SVG

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>