<polyline>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

The<polyline>SVG element is an SVG basic shape that creates straight lines connecting several points. Typically apolyline is used to create open shapes as the last point doesn't have to be connected to the first point. For closed shapes see the<polygon> element.

Usage context

Categories	Basic shape element, Graphics element, Shape element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements

Attributes

points: This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polylineValue type:<number>+;Default value:"";Animatable:yes
pathLength: This attribute lets specify the total length for the path, in user units.Value type:<number>;Default value:none;Animatable:yes

DOM Interface

This element implements theSVGPolylineElement interface.

Example

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">  <!-- Example of a polyline with the default fill -->  <polyline points="0,100 50,25 50,75 100,0" />  <!-- Example of the same polyline shape with stroke and no fill -->  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /></svg>