Summary -

In this topic, we described about the SVG Drawing Polygon with detailed example.

<svg> with <polygon> element used to draw a polygon. The <polygon> element creates a graphic that should contains minimum three sides.

Polygons can produce straight lines, and the shape is "closed" because all the lines connected up. By using ploygon can be draw a triangle, rectangle, square, pentagon and star etc.

Attribute Use
points Specifies to establish the x and y coordinates. For Example- <polygon points = "30,20 290,30, 180,60"></polygon>
fill Specifies the environment color of polygon.
stroke Specifies the polygon stroke color.
stroke-width Specifies the polygon stroke width.

Example –

Below example describes how to draw polygon with SVG. 
<!DOCTYPE html>
<html>
   	<head> 
      	<title>SVG Polygon </title>		
   	</head>
	<body>
		<!-- Simple SVG polygon -->
		<svg height="180" width="160">
			<polygon points="100,80 50,180 160,110" 
				style="fill:yellow;stroke:blue;stroke-width:2" />
		</svg>
		
		<!-- Simple SVG polygon with four sides -->
		<svg height="300" width="280">
			<polygon points="200,10 250,210 170,250 100,200" 
				style="fill:yellow;stroke:blue;stroke-width:2" />
		</svg>

	</body>
</html>

Output -