<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg 6 elements</title> </head> <body> <h1>Hello SVG 6 Elements</h1> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" > <rect x="20" y="20" width="50" height="30" rx="5" ry='10'></rect> <circle cx="100" cy="20" r="10"></circle> <ellipse cx="150" cy="20" rx="10" ry="5"></ellipse> <line x1="100" y1="100" x2="110" y2="90" style='stroke:rgb(99,99,99);stroke-2'></line> <polygon points="100,100 150,150 139,123" style="fill:#cccccc; stroke:#000000;stroke-1"/> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-2"/> </svg> </body> </html>
basic. svg
<svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" rx="5" ry="5" width="150" height="100" stroke="red" fill="none"></rect> <circle cx="250" cy="60" r="50" stroke="red" fill="none"></circle> <ellipse cx="400" cy="60" rx="70" ry="50" stroke="red" fill="none"></ellipse> <line x1="10" y1="120" x2="160" y2="220" stroke="red"></line> <polyline points="250 120 300 220 200 220" stroke="red" fill="none"></polyline> <polygon points="250 120 300 220 200 220" stroke="red" stroke-width="5" fill="yellow" transform="translate(150 0)"></polygon> </svg>