<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>