SVG polyline element

SVG Polyline - Video Tutorial
SVG Polyline Example

Jakob Jenkov
Last update: 2014-09-08

The SVG <polyline> element is used to draw multiple connected lines (poly = multiple).

SVG Polyline - Video Tutorial

Here is a video version of this tutorial:

SVG Polyline Example

Here is a simple SVG polyline example:

<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>

Here is the resulting image:

The multiple lines are identified by points. Each point is listed as x,y in the points attribute. This example had 3 points which defined a triangle.

The 3 points are joined by lines, and then filled. The default fill-color is black. Here is an example that specifies a fill color different from black:

<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>

You may notice that only two of the lines in the triangle are drawn with the stroke color (darker green). The reason is, that only lines between the points listed are drawn. There is no line drawn back to the first point. To do this, add the first point to the points attributes again, like this:

<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 (the line) and the fill color. Style attributes are covered in more detail in a different text.

Next: SVG polygon element

Tweet
	Jakob Jenkov