Summary -

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

<svg> with <polyline> element used to draw a polyline in SVG. The <polyline> element is to create a shape that contains straight lines. The points attribute is used to provide the x and y coordinates for every corner.

Example -

Below example describes about how to draw a polyline with SVG.
<!DOCTYPE html>
<html>
   	<head> 
      	<title>SVG Polyline </title>
		<style> svg {border: 1px solid blue;} </style>		
   	</head>
	<body>
		<!-- Simple SVG polyline -->
		<svg height="200" width="400">
			<polyline points="0,20 40,80 90,80 80,120 110,120"
				style="fill:blue;stroke:red;stroke-width:3" /> 
		</svg> 
		
		<!-- Simple SVG polyline -->
		<svg height="200" width="400">
			<polyline points="30,30 40,25 50,40 80,110 110,150 210,170" 
				style="fill:none;stroke:black;stroke-width:3" />
		</svg>
	</body>
</html>

Output -