<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

Attributes

Global attributes

• Conditional processing attributes
• Core attributes
• Graphical event attributes
• Presentation attributes
• class
• style
• externalResourcesRequired
• transform

Specific attributes

• points

DOM Interface

This element implements the SVGPolylineElement interface.

Examples

Simple usage

SVG

<svg width="120" height="120" xmlns="https://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="https://sitepoint.com/understanding-svg-fill-rule-property">See article</a>.
</p>

CSS Content

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

Specifications

Browser compatibility

The chart is based on these sources.

See also

• <line>
• <polygon>