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:

<!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>

Try it Yourself »

Here's a step-by-step process to calculate the numbers in the points attribute of a <polyline> tag:

Decide on the design: Determine the shape you want to create using the polyline. It could be a simple zigzag line, a polygon, or any other series of connected straight-line segments.
Identify the vertices: Identify the positions of the vertices in the design. These are the points where the straight lines connect.
Determine the coordinates: For each vertex, calculate its x and y coordinates based on the SVG coordinate system. You may use graph paper, a design software, or any other method to determine the positions of the vertices in your design.
Format the points attribute: List the coordinate pairs for each vertex in the points attribute, separating the x and y values with commas and each pair with a space.

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

<!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>

Try it Yourself »

Attributes

Attribute	Description
points	This attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polygon.
pathLength	This attribute specifies the total length for the path, in user units.

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.