Vachmi

The <polyline> element is used to draw multiple connected lines.
A polyline can use used to draw open shapes made up of multiple lines connected to each other.

Here is the SVG code to draw this polyline.

<svg width="200" height="150">
  <polyline points="0,100 50,25 50,75 100,0, 150, 75, 150, 25, 200,100" style="fill: none; stroke:black; />
</svg>

Code Explanation

• points attribute of polyline is used to define the structure of polyline.

• First two numbers define the start point of the polyline. The multiple lines in a polyline are identified by points.

• Each point is listed as x, y coordinate pair in points attribute.

• In the above polyline, there are 7 points resulting into 6 connected lines.

• The CSS fill property is used to paint the element with a particular color and the CSS stroke property defines the color of the line.

Attributes

points - The points attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline.

It can accept a number as its value.