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


Global attributes

Specific attributes

DOM Interface

This element implements the SVGPolylineElement interface.


Simple usage


<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"/>


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="http://sitepoint.com/understanding-svg-fill-rule-property">See article</a>.

CSS Content

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


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–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.