The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline 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

CategoriesBasic shape element, Graphics element, Shape element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements


Global attributes

Specific attributes

DOM Interface

This element implements the SVGPolylineElement interface.


Simple usage


<svg width="120" height="120" xmlns="">
  <polyline fill="none" stroke="black" 
      points="20,100 40,60 70,80 100,20"/>


Stairs example

HTML Content

 <div class="contain-demo">
   <svg width="150" height="200">
       First orange polyline demonstrating
       white fill on open path.
         points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         fill="white" stroke="#D07735" stroke-width="6" />
   <svg width="150" height="200">
       Second orange polyline demonstrating
       yellow fill on open path.
         points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         fill="#F9F38C" stroke="#D07735" stroke-width="6" />
<p class="p">
  Demo by Joni Trythall.
  <a href="">See article</a>.

CSS Content

.contain-demo {
  margin: 25px auto;
  text-align: center;


Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<polyline>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<polyline>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) IE Opera Safari
Basic support 1.0 (Yes) 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 (Yes) 1.0 (1.8) No support (Yes) 3.0.4

The chart is based on these sources.

See also

Document Tags and Contributors

 Last updated by: mattwojo,