SVG Polylines and Polygons
Need to connect multiple points? SVG gives you two elements for that: polyline for open paths and polygon for closed shapes.
The polyline Element
A polyline connects a series of points with straight lines, leaving the path open (the start and end points are not connected). All the points are provided in a single points attribute as comma-separated x,y coordinate pairs.
Example: A Jagged Line
Notice that fill="none" is set here. By default, SVG will try to fill the area enclosed by a polyline. Setting the fill to none shows just the line, which is usually what you want.
The polygon Element
A polygon works exactly like polyline, but it automatically draws a closing line back from the last point to the first, creating a closed shape. This makes it perfect for triangles, stars, pentagons, and any custom shape made of straight lines.
Example: A Pentagon and a Star
Polygon points are calculated using basic trigonometry, but for common shapes you can look up or calculate the coordinates:
The points Attribute
The points attribute is the only unique attribute for both polyline and polygon. It accepts a list of coordinate pairs. Both of the following formats are valid:
- Space-separated coordinates:
points="10,20 80,40 150,20"(The comma joins X and Y). - Comma-separated pairs:
points="10 20, 80 40, 150 20"(The comma joins the sets).
In addition to points, both elements support all the standard stroke and fill attributes you've already seen: fill, stroke, stroke-width, opacity, stroke-dasharray, stroke-linejoin, and stroke-linecap.