SVG Polyline element

Last Updated : 07 Aug, 2020

The <polyline> element of SVG in HTML is used to create a shape by connecting lines through different points. It is different from <polygon> as it can be used to create open shapes.

Syntax:

<polyline points="Pair of points required to draw the shape"
      stroke="stroke color"
      fill="fill color for colored closed shapes">

Attributes:

points: Pair of points required to draw the shape
pathLength: It tells the total length of the path.

Few examples are given below for a better understanding of the <polyline> SVG element.

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  svg{
    background-color: black;
  }
</style>
<body>
  polyline <br>  
  <svg width="200px" height="200px">
    <polyline points="100,150 10,250 180,17 50,100"
              fill="green" stroke="yellow" 
              stroke-width="5">
  </svg><br>
  polygon <br>
  <svg width="200px" height="200px">
    <polygon points="100,150 10,250 180,17 50,100"
             fill="green" stroke="yellow" 
             stroke-width="5">
  </svg>
</body>
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  svg{
    background-color: black;
  }
</style>
<body>
  polyline <br>  
  <svg width="200px" height="200px">
    <polyline points="100,105 180,20 100,17 50,100"
              stroke="yellow" stroke-width="5">
  </svg><br>
  polygon <br>
  <svg width="200px" height="200px">
    <polygon points="100,105 180,20 100,17 50,100"
             stroke="yellow" stroke-width="5">
  </svg>
</body>
</html>

Output:

Supported Browsers:

Chrome
Edge
Opera
Internet Explorer
Safari
Firefox

My Personal Notes

Related Articles

HTML

HTML