HTML Media
Video example
video with a CG battle
Outer controls
Events
States
readyState:
networkState:
seeking:
buffered:
currentTime :
duration:
loop:
volume:
currentSrc:
preload:
playbackRate:
defaultPlaybackRate:
paused:
ended :
muted :
mediaGroup :
<figure id="videoContainer">
<!--
<video
id="video"
width="300" height="200"
controls autoplay
preload="metadata"
poster="video/battle.png"
>
-->
<video
id="video"
width="300"
height="200"
controls
preload="metadata"
poster="video/battle.png"
>
<source src="video/battle.mp4" type="video/mp4">
<source src="video/battle.webm" type="video/webm">
<source src="video/battle.ogg" type="video/ogg">
<!--
<track src="subtitles_en.vtt"
kind="subtitles"
srclang="en"
label="English"
default
>
<track
src="subtitles_no.vtt"
kind="captions|chapters|descriptions|metadata|subtitles"
srclang="no"
label="Norwegian"
>
-->
<object
type="application/x-shockwave-flash"
data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4"
width="300"
height="200"
>
<param
name="movie"
value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4"/>
<param
name="allowfullscreen"
value="true" />
<param
name="wmode"
value="transparent" />
<param
name="flashvars"
value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videoUrl=video/battle.mp4" />
<img
alt="Tears of Steel poster image"
src="video/battle.png"
width="300"
height="150"
title="No video playback possible, please download the video from the link below" />
</object>
<a href="video/battle.mp4">Download MP4</a>
</video>
<figcaption>video with a CG battle</figcaption>
</figure>
<h3>Outer controls</h3>
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<h3>States</h3>
readyState: <span id="rs"></span>
networkState: <span id="ns"></span>
seeking: <span id="seek"></span>
buffered: <span id="buffered"></span>
currentTime : <span id="ct"></span>
duration: <span id="duration"></span>
loop: <span id="loop"></span>
volume: <span id="volume"></span>
currentSrc: <span id="src"></span>
preload: <span id="preload"></span>
playbackRate: <span id="pr"></span>
defaultPlaybackRate: <span id="dpr"></span>
paused: <span id="paused"></span>
ended : <span id="ended"></span>
muted : <span id="muted"></span>
mediaGroup : <span id="mg"></span>
<!-- error.code : <span id="err"></span> -->
<div id="vid_events">
<h3>Events</h3>
</div>
var myVideo = document.getElementById("video");
var playPause = () => { (myVideo.paused) ? myVideo.play() : myVideo.pause(); }
function makeBig() { myVideo.width = 600; }
function makeSmall() { myVideo.width = 150; }
function makeNormal() { myVideo.width = 300; }
;(function () {
var video = document.getElementById("video");
video.loop = 0;
video.currentTime = 5;
video.volume = 0.86;
video.playbackRate = 2;
video.defaultPlaybackRate = 2;
video.mediaGroup = "video";
rs = document.getElementById("rs");
ns = document.getElementById("ns");
setInterval(function(){
switch(video.networkState) {
case 0: rs.innerHTML = "0 = HAVE_NOTHING"; break;
case 1: rs.innerHTML = "1 = HAVE_METADATA"; break;
case 2: rs.innerHTML = "2 = HAVE_CURRENT_DATA"; break;
case 3: rs.innerHTML = "3 = HAVE_FUTURE_DATA"; break;
case 4: rs.innerHTML = "4 = HAVE_ENOUGH_DATA"; break;
default: rs.innerHTML = "???";
}
switch(video.networkState) {
case 0: ns.innerHTML = "0 = NETWORK_EMPTY"; break;
case 1: ns.innerHTML = "1 = NETWORK_IDLE"; break;
case 2: ns.innerHTML = "2 = NETWORK_LOADING"; break;
case 3: ns.innerHTML = "3 = NETWORK_NO_SOURCE"; break;
default: ns.innerHTML = "???";
}
document.getElementById("seek").innerHTML = (video.networkState) ? "1" : "0";
document.getElementById("buffered").innerHTML =
"Start: " + video.buffered.start(0) + " End: " + video.buffered.end(0) +
" Length: " + video.length;
document.getElementById("ct").innerHTML = video.currentTime;
document.getElementById("duration").innerHTML = video.duration;
document.getElementById("loop").innerHTML = (video.loop) ? "1" : "0";
document.getElementById("volume").innerHTML = video.volume;
document.getElementById("src").innerHTML = video.currentSrc;
document.getElementById("preload").innerHTML = video.preload;
document.getElementById("pr").innerHTML = video.playbackRate; // 1.0, -1.5, ...
document.getElementById("dpr").innerHTML = video.defaultPlaybackRate;
document.getElementById("paused").innerHTML = video.paused;
document.getElementById("ended").innerHTML = video.ended;
document.getElementById("muted").innerHTML = video.muted;
document.getElementById("mg").innerHTML = video.mediaGroup;
// document.getElementById("err").innerHTML = video.error.code;
},100);
var ve = document.getElementById("vid_events");
video.onwaiting = () => { ve.innerHTML += "Wait! I need to buffer the next frame"; };
video.oncanplay = () => { ve.innerHTML += "Can start playing video"; };
video.oncanplaythrough = () => { ve.innerHTML += "Can play through video without stopping"; };
video.ondurationchange = () => { ve.innerHTML += "The video duration has changed"; };
video.onvolumechange = () => { ve.innerHTML += "The volume has been changed"; };
video.ontimeupdate = () => { ve.innerHTML += "The playing position has changed"; };
video.onsuspend = () => { ve.innerHTML += "Loading of the media is suspended"; };
video.onstalled = () => { ve.innerHTML += "Media data is not available"; };
video.onseeking = () => { ve.innerHTML += "Seek operation began"; };
video.onseeked = () => { ve.innerHTML += "Seek operation completed"; };
video.onratechange = () => { ve.innerHTML += "The playing speed of the video was changed"; };
video.onratechange = () => { ve.innerHTML += "The playing speed of the video was changed"; };
video.onprogress = () => { ve.innerHTML += "Downloading video"; };
video.onplaying = () => { ve.innerHTML += "The video is now playing"; };
video.onloadstart = () => { ve.innerHTML += "Starting to load video"; };
video.onloadedmetadata = () => { ve.innerHTML += "Meta data for video loaded"; };
video.onloadeddata = () => { ve.innerHTML += "Browser has loaded the current frame"; };
video.onerror = () => { ve.innerHTML += "Error! Something went wrong"; };
})();
- Video formats support:
- MP4 has most support
- others (WebM, Ogg) will depend on browser
Video formats media types
| File Format |
Media Type |
| MP4 |
video/mp4 |
| WebM |
video/webm |
| Ogg |
video/ogg |
Audio example
MarioBros soundtrack
Outer controls
Events
States
readyState:
networkState:
seeking:
buffered:
currentTime :
duration:
loop:
volume:
currentSrc:
preload:
playbackRate:
defaultPlaybackRate:
paused:
ended :
muted :
mediaGroup :
<figure id="audioContainer">
<audio id="audio" controls>
<!-- <source src="horse.ogg" type="audio/ogg"> -->
<source src="flappy/bg.mp3" type="audio/mpeg">
Your browser does not support the audio element
</audio>
<figcaption>MarioBros soundtrack</figcaption>
</figure>
<h3>Outer controls</h3>
<button onclick="audioPlayPause()">Play/Pause</button>
<h3>States</h3>
readyState: <span id="a_rs"></span>
networkState: <span id="a_ns"></span>
seeking: <span id="a_seek"></span>
buffered: <span id="a_buffered"></span>
currentTime : <span id="a_ct"></span>
duration: <span id="a_duration"></span>
loop: <span id="a_loop"></span>
volume: <span id="a_volume"></span>
currentSrc: <span id="a_src"></span>
preload: <span id="a_preload"></span>
playbackRate: <span id="a_pr"></span>
defaultPlaybackRate: <span id="a_dpr"></span>
paused: <span id="a_paused"></span>
ended : <span id="a_ended"></span>
muted : <span id="a_muted"></span>
mediaGroup : <span id="a_mg"></span>
<!-- error.code : <span id="err"></span> -->
<div id="audio_events">
<h3>Events</h3>
</div>
var audio = document.getElementById("audio");
var audioPlayPause = () => { (audio.paused) ? audio.play() : audio.pause(); }
;(function () {
var audio = document.getElementById("audio");
audio.loop = 0;
audio.currentTime = 3;
audio.volume = 0.86;
audio.playbackRate = 1.1;
audio.defaultPlaybackRate = 1.1;
audio.mediaGroup = "audio";
a_rs = document.getElementById("a_rs");
a_ns = document.getElementById("a_ns");
setInterval(function(){
switch(audio.networkState) {
case 0: a_rs.innerHTML = "0 = HAVE_NOTHING"; break;
case 1: a_rs.innerHTML = "1 = HAVE_METADATA"; break;
case 2: a_rs.innerHTML = "2 = HAVE_CURRENT_DATA"; break;
case 3: a_rs.innerHTML = "3 = HAVE_FUTURE_DATA"; break;
case 4: a_rs.innerHTML = "4 = HAVE_ENOUGH_DATA"; break;
default: a_rs.innerHTML = "???";
}
switch(audio.networkState) {
case 0: a_ns.innerHTML = "0 = NETWORK_EMPTY"; break;
case 1: a_ns.innerHTML = "1 = NETWORK_IDLE"; break;
case 2: a_ns.innerHTML = "2 = NETWORK_LOADING"; break;
case 3: a_ns.innerHTML = "3 = NETWORK_NO_SOURCE"; break;
default: a_ns.innerHTML = "???";
}
document.getElementById("a_seek").innerHTML = (audio.networkState) ? "1" : "0";
document.getElementById("a_buffered").innerHTML =
"Start: " + audio.buffered.start(0) + " End: " + audio.buffered.end(0) +
" Length: " + audio.length;
document.getElementById("a_ct").innerHTML = audio.currentTime;
document.getElementById("a_duration").innerHTML = audio.duration;
document.getElementById("a_loop").innerHTML = (audio.loop) ? "1" : "0";
document.getElementById("a_volume").innerHTML = audio.volume;
document.getElementById("a_src").innerHTML = audio.currentSrc;
document.getElementById("a_preload").innerHTML = audio.preload;
document.getElementById("a_pr").innerHTML = audio.playbackRate; // 1.0, -1.5, ...
document.getElementById("a_dpr").innerHTML = audio.defaultPlaybackRate;
document.getElementById("a_paused").innerHTML = audio.paused;
document.getElementById("a_ended").innerHTML = audio.ended;
document.getElementById("a_muted").innerHTML = audio.muted;
document.getElementById("a_mg").innerHTML = audio.mediaGroup;
// document.getElementById("err").innerHTML = audio.error.code;
},100);
var aev = document.getElementById("audio_events");
audio.onwaiting = () => { aev.innerHTML += "Wait! I need to buffer the next frame"; };
audio.oncanplay = () => { aev.innerHTML += "can start playing"; };
audio.oncanplaythrough = () => { aev.innerHTML += "can play through without stopping"; };
audio.ondurationchange = () => { aev.innerHTML += "duration has changed"; };
audio.onvolumechange = () => { aev.innerHTML += "volume has been changed"; };
audio.ontimeupdate = () => { aev.innerHTML += "playing position has changed"; };
audio.onsuspend = () => { aev.innerHTML += "loading is suspended"; };
audio.onstalled = () => { aev.innerHTML += "media data is not available"; };
audio.onseeking = () => { aev.innerHTML += "seek operation began"; };
audio.onseeked = () => { aev.innerHTML += "seek operation completed"; };
audio.onratechange = () => { aev.innerHTML += "playing speed was changed"; };
audio.onratechange = () => { aev.innerHTML += "playing speed was changed"; };
audio.onprogress = () => { aev.innerHTML += "downloading"; };
audio.onplaying = () => { aev.innerHTML += "now playing"; };
audio.onloadstart = () => { aev.innerHTML += "starting to load"; };
audio.onloadedmetadata = () => { aev.innerHTML += "meta data for loaded"; };
audio.onloadeddata = () => { aev.innerHTML += "browser has loaded the current frame"; };
audio.onerror = () => { aev.innerHTML += "Error! Something went wrong"; };
})();
- Audio formats support:
- MP3 has most support
- others (Wav, Ogg) will depend on browser
Audio formats media types
| File Format |
Media Type |
| MP3 |
audio/mpeg |
| Ogg |
audio/ogg |
| Wav |
audio/wav |
YouTube
<iframe
width="420"
height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=0&loop=1&controls=1"
>
</iframe>
SVG
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:gray;stroke:black;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line.</tspan>
<tspan x="10" y="70">Second line.</tspan>
</text>
</svg>
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg height="100" width="500">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
<svg height="120" width="120">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur stdDeviation="5" />
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="90" height="90" fill="grey" filter="url(#filter)" />
<rect width="90" height="90" fill="yellow" stroke="black" />
</svg>
<svg height="140" width="140">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
<svg height="140" width="140">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
<svg width="400" height="550">
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0">
<stop offset="0" style="stop-color:#000000" />
<stop offset=".33" style="stop-color:#ffffff" />
<stop offset=".67" style="stop-color:#ffff00" />
<stop offset="1" style="stop-color:#808080" />
</linearGradient>
<filter id="normal">
<feBlend mode="normal" in="SourceGraphic" />
</filter>
<filter id="multiply">
<feBlend mode="multiply" in="SourceGraphic" />
</filter>
<filter id="screen">
<feBlend mode="screen" in="SourceGraphic" />
</filter>
<filter id="darken">
<feBlend mode="darken" in="SourceGraphic" />
</filter>
<filter id="lighten">
<feBlend mode="lighten" in="SourceGraphic" />
</filter>
</defs>
<g style="enable-background:new">
<rect x="40" y="20" width="300" height="450" style="fill:url(#MyGradient)" />
<g style="font-size:75px;fill:#888888;fill-opacity:.6">
<text x="50" y="90" filter="url(#normal)">Normal</text>
<text x="50" y="180" filter="url(#multiply)">Multiply</text>
<text x="50" y="270" filter="url(#screen)">Screen</text>
<text x="50" y="360" filter="url(#darken)">Darken</text>
<text x="50" y="450" filter="url(#lighten)">Lighten</text>
</g>
</g>
</svg>
<svg width="400" height="200">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#MyFilter)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
<svg width="400" height="200">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#MyFilter)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
<svg width="400" height="200">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#MyFilter)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
<svg width="400" height="200">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#MyFilter)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
<svg width="400" height="200">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#MyFilter)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
<svg width="400" height="200">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
<feMerge>
<feMergeNode in="offsetBlur" />
<feMergeNode in="litPaint" />
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#cccccc" />
<g filter="url(#MyFilter)">
<path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
</g>
</svg>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<svg width="400" height="400">
<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
</svg>
<svg width="500" height="500">
<rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
<animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
</rect>
</svg>
<svg width="500" height="500">
<rect x="10" y="20" width="90" height="60">
<animate id="a1" attributeName="fill" from="red" to="blue" dur="3s" fill="freeze" />
</rect>
<rect x="10" y="120" width="90" height="60">
<animate id="a2" attributeName="fill" from="blue" to="yellow" begin="a1.end" dur="3s" fill="freeze" />
</rect>
<rect x="10" y="220" width="90" height="60">
<animate id="a3" attributeName="fill" from="yellow" to="green" begin="a2.end" dur="3s" fill="freeze" />
</rect>
</svg>
<svg width="500" height="500">
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
<animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" />
</text>
</g>
</svg>
<svg width="600" height="600">
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
<animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" />
</text>
</g>
</svg>
<svg width="600" height="600">
<rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
<animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
</rect>
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
<animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" />
</text>
</g>
</svg>
<svg width="100%" height="300px">
<g id="R1" transform="translate(250 250)">
<ellipse rx="100" ry="0" opacity=".3">
<animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" />
<animate attributeName="cx" dur="8s" values="-20; 220; -20" repeatCount="indefinite" />
<animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite" />
</ellipse>
</g>
<use xlink:href="#R1" transform="rotate(72 390 150)" />
<use xlink:href="#R1" transform="rotate(144 390 150)" />
<use xlink:href="#R1" transform="rotate(216 390 150)" />
<use xlink:href="#R1" transform="rotate(288 390 150)" />
</svg>
Back to Main Page