SVG Introduction


				<svg id="smap">

				  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="4" fill="blue" />

				  <rect id="recht" x="200" y="50" width="100" height="50" />

				  <rect x="310" y="20" rx="20" ry="20" width="50" height="100" style="fill:red; stroke:black; stroke-width:5; opacity:0.5" />

				  <ellipse cx="400" cy="60" rx="60" ry="30" style="fill:yellow; stroke:purple; stroke-width:2" />

				  <line x1="400" y1="150" x2="500" y2="100" style="stroke:rgb(255,0,0); stroke-width:2" />

				  <polygon id="pol" points="100,200 50,350 100,300 150,350" style="fill:lime; stroke:purple; stroke-width:1" />

				  <polyline points="150,200 160,250 170,270 180,270 200,250 250,240" style="fill:none; stroke:black; stroke-width:3" />

				  <path d="M300 200 L400 200 L280 300 Z" />

				  <path d="M 400 350 q 100 -200 200 0" stroke="blue" stroke-width="2" fill="none" />

				  <text x="220" y="150" fill="red" font-size="16px">JumpingCat</text>

				  <text x="220" y="150" fill="red" font-size="14px" transform="rotate(30 200,150)">JumpingCat</text>

				  <text x="220" y="150" fill="red" font-size="12px" transform="rotate(60 200,150)">JumpingCat</text>

				  <text x="220" y="150" fill="red" font-size="10px" transform="rotate(90 200,150)">JumpingCat</text>

				</svg>