W3cubDocs

/SVG

<polyline>

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

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

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGPolylineElement interface.

Examples

Simple usage

SVG

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <polyline fill="none" stroke="black" 
      points="20,100 40,60 70,80 100,20"/>
</svg>

Result

Stairs example

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;
}

Specifications

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

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline