SVG <polyline> Draw Curved Line

The polyline element is a basic shape in SVG, used to create a series of straight lines connecting multiple points. A typical polyline is used to create an open shape, where the last point does not connect to the first point

polyline example online

Example code for a polyline is as follows:

<svg width="120" height="120"　
　　　　　viewPort="0 0　120　120" version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg>
　　　　<polyline fill="none" stroke="black"　
　　　　　　　　　　　　　　points="20,100　40,60　70,80　100,20"/>
</svg>

The effect after running is as follows:

Draw a triangle

Example code is as follows:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;/>
</svg>

Preview of the effect after running:

lines are identified by points. Each point is listed with x, y in the points attribute. This example has3points define a triangle.
The3points are connected by lines, and then filled. The default fill color is black.

Draw a filled green triangle

Example code is as follows:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600; stroke-width:　2;
　　　　　　　　　　　　　　　fill:　#33cc33;"/>
</svg>

Preview of the effect after running:

You may have noticed that only two lines in the triangle are drawn with the stroke color (dark green). The reason is that only the lines between the listed points are drawn. There is no line drawn back to the first point. To do this, the first point is added to the attribute again as shown below:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52　　10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

The style attribute sets the color and thickness of the stroke (line) and the fill color.