SVG Polyline

Description of the `<polyline>` element

The SVG <polyline> element creates any shape consisting of only straight lines that connect multiple points. Unlike the <polygon> element, the <polyline> creates open shapes.

Example of the SVG `<polyline>` element:

Example of the SVG <polyline> element

html

<!DOCTYPE html>
<html>
 <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="220" >
      <polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

To define the shape, list the coordinate pairs in the points attribute. Separate the x and y values of each pair with a comma, and separate each pair with a space. For example: points="30,30 50,35 70,50".

Example of the SVG `<polyline>` element with straight lines:

Example of the SVG <polyline> element with straight lines

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
      Sorry, inline SVG is not supported by your browser.
    </svg>
  </body>
</html>

Attributes

Attribute	Description
points	This attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polyline.
pathLength	This attribute specifies the total length for the path, in user units.
stroke-linejoin	Specifies the type of corner created when two lines meet.
stroke-linecap	Specifies the shape of the line ends.

The SVG <polyline> element also supports the Global Attributes and Event Attributes.

Practice

What attributes can be used with the SVG <polyline> element in HTML?

SVG Polyline ​

Description of the <polyline> element ​

Example of the SVG <polyline> element: ​

Example of the SVG <polyline> element with straight lines: ​