<!DOCTYPE HTML> <html lang="en"> <style> rect, text, foreignObject, circle, ellipse, image, line, path, polygon, polyline { outline: 1px solid; } </style> <body> <svg xmlns="http://www.w3.org/2000/svg" overflow="visible"> <g> <rect width="100" height="100" style="fill: yellow"/> <text x="0" y="140" font-family="Verdana" font-size="20"> Hello world </text> <foreignObject x="0" y="160" width="200" height="60"> <div xmlns="http://www.w3.org/1999/xhtml"> Here is a paragraph that requires word wrap </div> </foreignObject> <circle cx="40" cy="275" r="40" style="fill: green"/> <ellipse cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/> <image x="0" y="450" height="100" width="100"/> <line x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/> <path d="M50 600 L10 650 L90 650 Z"/> <polygon points="300,50 350,0 400,50" style="fill: lime"/> <polyline points="300,80 350,70 400,80" style="fill: none; stroke: black;stroke-width: 3"/> <g transform="translate(300, 70)" style="outline: 1px solid"> <circle cx="50" cy="50" r="20" style="fill: blue; outline: 0px"/> </g> <g transform="translate(300, 150)" style="outline: 1px solid"> <circle cx="50" cy="50" r="20" style="fill: green; outline: 0px"/> <g> <rect x="15" y="15" width="30" height="10" style="fill: blue"/> </g> </g> <svg x="300" y="250"> <rect x="30" y="10" height="50" width="50" style="fill: red"/> </svg> </g> </svg> </body> </html>