Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

The polyline 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

Example

Example 1:

Source code Output result

Unable to find file polyline.svg

Unable to find file polyline.svg

» polyline.svg

Stairs example

Source: http://codepen.io/SitePoint/pen/BagGE

HTML Content

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

CSS Content

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

.p {
  text-align: center;
  margin-top: 140px;
}

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGPolylineElement interface.

Specifications

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

Browser compatibility

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 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: brunoais,