SVG Polygon – <polygon> Example 1 <!DOCTYPE html> <html> <body> <svg height=”250″ width=”500″> <polygon points=”220,10 300,210 170,250 123,234″ style=”fill:lime;stroke:purple;stroke-width:1″ /> Sorry, your browser does not support inline SVG. </svg> </body> </html> SVG Polygon –
SVG Polygon – <polygon> The <polygon> element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is “closed” (all the lines connect up). Polygon comes from Greek. “Poly” means “many” and “gon” means “angle”. Example 1: <!DOCTYPE html> <html> <body> <svg height=”210″ width=”500″> … Read more
SVG Ellipse – <ellipse> example <!DOCTYPE html> <html> <body> <svg height=”150″ width=”500″> <ellipse cx=”240″ cy=”100″ rx=”220″ ry=”30″ style=”fill:purple” /> <ellipse cx=”220″ cy=”70″ rx=”190″ ry=”20″ style=”fill:lime” /> <ellipse cx=”210″ cy=”45″ rx=”170″ ry=”15″ style=”fill:yellow” /> Sorry, your browser does not support inline SVG. </svg> </body> </html> Output: Example 2: <!DOCTYPE html> <html> <body> <svg height=”100″ … Read more
SVG <circle> SVG Circle – <circle> The <circle> element is used to create a circle. Example : <!DOCTYPE html> <html> <body> <svg height=”100″ width=”100″> <circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” /> Sorry, your browser does not support inline SVG. </svg> </body> </html>