Scalable vector Graphics

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="10" stroke="Red" stroke-width="2" fill="blue" /> <circle cx="200" cy="50" r="10" stroke="Red" stroke-width="2" fill="blue" /> </svg>

Like the circle above... Rectangle Normal rectangle, with opacity ,rounded corners <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="20" width="30" height="30" style="fill:red;stroke-width:2;stroke:blue" /> <rect x="40" y="20" width="30" height="30" style="fill:red;stroke:blue;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> <rect x="80" y="20" rx="5" ry="5" width="30" height="30" style="fill:red;stroke:blue;stroke-width:5;opacity:0.5" /> </svg>

Ellipse <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="200" cy="120" rx="100" ry="50" style="fill:white;stroke:red;stroke-width:2" /> <ellipse cx="220" cy="120" rx="40" ry="20" style="fill:black;stroke:red;stroke-width:2" /> <ellipse cx="400" cy="120" rx="100" ry="50" style="fill:white;stroke:red;stroke-width:2" /> <ellipse cx="420" cy="120" rx="40" ry="20" style="fill:black;stroke:red;stroke-width:2" /> </svg>

Line <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="0" style="stroke:red;stroke-width:1" /> <line x1="0" y1="2" x2="200" y2="2" style="stroke:white;stroke-width:1" /> <line x1="0" y1="4" x2="200" y2="4" style="stroke:lightgreen;stroke-width:1" /> </svg>

polygon . Notice the "Fillrule" <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="30,10 10,120 40,120" style="fill:blue;stroke:red;stroke-width:1" /> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:blue;stroke:red;stroke-width:1;fill-rule:nonzero;"/> <polygon points="200,10 140,180 290,60 110,60 260,180" style="fill:blue;stroke:red;stroke-width:1;fill-rule:evenodd;"/> </svg>

path <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M100 0 L75 200 L125 200 Z" stroke="black" stroke-width="2" fill="yellow"/> <path d="M 100 0 q 150 100 300 0" stroke="red" stroke-width="2" fill="none" /> <path d="M400 0 L375 200 L425 200 Z" stroke="black" stroke-width="2" fill="yellow"/> </svg>

Text <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">SVG is Boring</text> <text x="200" y="15" fill="red" transform="rotate(-10 100,15)">SVG is Boring</text> <defs><path id="mypath" d="M0,50 a1,1 0 0,0 100,0" /></defs> <text x="10" y="100" style="fill:red;"> <textPath xlink:href="#mypath">SVG is Boring</textPath> </text> <text x="200" y="50" style="fill:red;">SVG <tspan x="200" y="75">is</tspan> <tspan x="200" y="100">Boring</tspan> </text> </svg>

Gradient <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="horiz" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:red;stop-opacity:1" /> <stop offset="50%" style="stop-color:white;stop-opacity:1" /> <stop offset="100%" style="stop-color:green;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="185" ry="35" fill="url(#horiz)" /> </svg>

radial Gradient <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="radialOne" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:red;stop-opacity:1" /> <stop offset="50%" style="stop-color:white;stop-opacity:1" /> <stop offset="100%" style="stop-color:green;stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="185" ry="35" fill="url(#radialOne)" /> </svg>

EVENTS in SVG <script type="text/javascript" > function Amouseover(myitem) {myitem.textContent = "mouseover";} function Aonmouseout(myitem) {myitem.textContent = "onmouseout"; } function Aonclick(myitem) {myitem.textContent = "onclick";} function Aonload(myitem) {myitem.textContent = "onload";} function Aonzoom(myitem) {myitem.textContent = "onzoom"; } function Aonscroll(myitem) {myitem.textContent = "onscroll";} function Aonresize(myitem) {myitem.textContent = "onresize"; } </script> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="80"> <text x="0" y="15" fill="red" onmouseover="Amouseover(evt.target);" onmouseout="Aonmouseout(evt.target);" onclick="Aonclick(evt.target);" onload="Aonload(evt.target);" onzoom="Aonzoom(evt.target);" onscroll="Aonscroll(evt.target);" onresize="Aonresize(evt.target);" >SVG is Boring</text> </svg>