apike.ca

SVG Shapes (Polylines, Polygons)

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

Legend

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
Attribute
Explanation
Example
points
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
Attribute
Explanation
Example
points
The points of the polygon. Each point must be a pair of coordinates. Closing point added automatically if not provided.
fill-rule
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