Summary -

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

<svg> with <polygon> element used to draw a octagon. To draw octagon, we need to provide the x,y coordinates for 8 angles.

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 octagon.
stroke Specifies the octagon stroke color.
stroke-width Specifies the octagon stroke width.

Example -

Below example describes how to draw octagon.
<!DOCTYPE html>
<html>
   	<head> 
      	<title>SVG Octagon </title>		
   	</head>
	<body>
    	<svg height="125" width="400">
      		<polygon points="40 13, 80 13, 110 40, 110 80,
				80 110, 40 110, 13 80, 13 40" 
				fill="red" stroke="green"
				stroke-width="5" />
    	</svg>
	</body>
</html>

Output -