SVG Shapes (Polylines, Polygons)

By mbystedt on Jul 11, 2015, 3:28:46 PM

Polylines and polygons are used in SVG to create shapes that are made up of straight lines. The difference between a polygon and a polyline in SVG is that a polygon is a closed shape. If the last and first polygon points don't match then the shape is closed automatically.

On this page: Polyline, Polygon & Path Equivalents


BOLD means the attribute is required.
Italics denotes a presentation attribute of the shape like fill which is both optional and shared with other SVG elements.

The 'polyline' Element

<polyline points="10,190 20,190 20,150 50,150 50,190 80,190 80,110 110,110 110,190 140,190 140,70 170,70 170,190 190,190" stroke="blue" fill="darkblue" stroke-width="4" />
Code 1. Polyline
The points on the polyline. Each point must be a pair of coordinates.
Presentation Attributes

The 'polygon' Element

<polygon points="100,10 40,180 190,60 10,60 160,180 100,10" stroke="blue" fill="darkblue" stroke-width="4" fill-rule="nonzero" />
Code 2. Polygon
The points of the polygon. Each point must be a pair of coordinates. Closing point added automatically if not provided.
See below. Part of the FillStroke presentation attributes.
Presentation Attributes

Path Equivalents

All elementary shapes can be expressed as paths. See: Creating Paths in SVG

<path d="M100,10 L40,180 190,60 10,60 160,180 z" stroke="blue"  fill="darkblue" stroke-width="4" fill-rule="nonzero" />
Code 3. The same polygon as in code 2 but as a path.

Feel free to skip ahead to the filling and stroking page if you're not interested in a long winded explanation on controlling how shapes are filled. The fill-rule attribute controls this and has a sensible default.

Related Topics