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 Line – <line> <!DOCTYPE html> <html> <body> <svg height=”210″ width=”500″> <line x1=”0″ y1=”0″ x2=”200″ y2=”200″ style=”stroke:rgb(255,0,0);stroke-width:2″ /> Sorry, your browser does not support inline SVG. </svg> </body> </html> Code explanation: The x1 attribute defines the start of the line on the x-axis The y1 attribute defines the start of the line on the … Read more
SVG Ellipse – <ellipse> <!DOCTYPE html> <html> <body> <svg height=”140″ width=”500″> <ellipse cx=”200″ cy=”80″ rx=”100″ ry=”50″ style=”fill:yellow;stroke:purple;stroke-width:2″ /> Sorry, your browser does not support inline SVG. </svg> </body> </html>
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>
SVG – Scalable Vector Graphics <!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width=”100″ height=”100″> <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” /> Sorry, your browser does not support inline SVG. </svg> </body> </html> Output: SVG stands for Scalable Vector Graphics. SVG defines vector-based graphics in XML format. What is SVG? SVG stands for … Read more