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

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

Show JavaScript

var xmlns = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(xmlns, "polyline");
 
elem.setAttributeNS(null,"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");
elem.setAttributeNS(null,"stroke", "blue");
elem.setAttributeNS(null,"fill", "darkblue");
elem.setAttributeNS(null,"stroke-width", 4);
 
document.documentElement.appendChild(elem);

Code 1. Polyline

Attribute	Explanation	Example
points	The points on the polyline. Each point must be a pair of coordinates.
Presentation Attributes	Color, FillStroke, Graphics, Markers

The 'polygon' Element

Show JavaScript

var xmlns = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(xmlns, "polygon");
 
elem.setAttributeNS(null,"points",
  "100,10 40,180 190,60 10,60 160,180 100,10");
elem.setAttributeNS(null,"stroke", "blue");
elem.setAttributeNS(null,"fill", "darkblue");
elem.setAttributeNS(null,"stroke-width", 4);
elem.setAttributeNS(null,"fill-rule", "nonzero");
 
document.documentElement.appendChild(elem);

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	Color, FillStroke, Graphics, Markers

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.