HTML5 svg

<svg> <svg x="10"> <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/> </svg> <svg x="200"> <rect x="10" y="10" height="100" width="100" style="stroke:#009900; fill: #00cc00"/> </svg> </svg>

<g> is used to group SVG shapes together
<svg>

<g transform="rotate(45 50 50)">
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #006600;"/>

<rect x="10" y="20" height="50" width="75"
style="stroke: #006600; fill: #006600"/>

<text x="10" y="90" style="stroke: #660000; fill: #660000">
Text grouped with shapes</text>
</g>

</svg>

<rect> element represents a rectangle
<svg>

<rect x="10" y="10" height="100" width="100"
style="stroke:#006600; fill: #00cc00"/>
<rect x="70" y="10" height="50" width="50"
rx="10" ry="10"
style="stroke:#006600; fill: #00cc00"/>

</svg>

circle
<svg>

<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
<ellipse cx="40" cy="40" rx="30" ry="15"
style="stroke:#0066FF; fill:#00cc00"/>

</svg>

<svg>

<line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/>


<polyline points="0,0 30,0 15,30"
style="stroke:#006600;"/>
<polyline points="10,10 30,0 15,30 0,0"
style="stroke:#006600; fill: #33cc33;"/>

</svg>

Path and polygon
<svg>

<polygon points="0,0 50,0 25,50"
style="stroke:#660000; fill:#cc3333;"/>

<polygon points="50,05 100,5 125,30 125,80 100,105
50,105 25,80 25, 30"
style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>

<path d="M50,50
A30,30 0 0,1 35,20
L100,100
M110,110
L100,0"
style="stroke:#660000; fill:none;"/>

</svg>

<svg>

<text x="20" y="40">Example SVG text 1</text>

<a href="janaganamana.net"><text x="60" y="40">Example SVG text 1</text></a>

</svg>

tspan
<svg>

<text x="20" y="10">
<tspan>tspan line 1</tspan>
<tspan dy="10">tspan line 2</tspan>
</text>


<defs>
<text id="theText">A text that is referenced.</text>
</defs>

<text x="20" y="10">
<tref xlink:href="#theText" />
</text>
<text x="30" y="30">
<tref xlink:href="#theText" />
</text>

</svg>

images
<svg>
<rect x="10" y="10" height="130" width="500" style="fill: #000000"/>
<image x="20" y="20" width="300" height="80" href="http://janaganamana.net/images/chakra.gif" />

<line x1="25" y1="80" x2="350" y2="80"
style="stroke: #ffffff; stroke-width: 3;"/>
</svg>

circle
<svg><circle r="50" cx="50" cy="50" fill="green" stroke="#00cc00" /></svg>

ellipse
<svg><ellipse cx="40" cy="40" rx="30" ry="15" fill="#00ff00" stroke="#00ff00" /></svg>

line
<svg><line x1="0" y1="10" x2="0" y2="100" fill="#00ff00" stroke="#00ff00" /></svg>

path
<svg><path d="M80,20 A20,50 0 1,0 150,20" stroke="#00ff00" fill="none" /></svg>

polygon
<svg><polygon points="25,0 65,0 90,20 90,65 65,90 25,90 0,65 0,25" stroke="#00ff00" fill="#00ff00" /></svg>

polyline
<svg><polyline points="0,0 30,0 15,30" fill="#00ff00" stroke="#00ff00" /></svg>

rectangle
<svg><rect x="0" y="0" height="50" width="50" rx="15" ry="15" fill="#00ff00" stroke="#00ff00" /></svg>