Open In App
Related Articles

SVG polygon Element

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <polygon> element of SVG is used to make any type of polygon on the SVG and defines a closed shape consisting of a set of connected straight line segments.

Syntax:

<polygon  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 <polygon> SVG element.

Example 1:

<!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>
<body>
  <svg width="400px" height="400px">
  <!-- try different pairs and make different shapes-->
    <polygon points="0, 100 100, 100 100, 100 100, -20000" 
             fill="green">
  </svg>
</body>
</html>

                    

Output:

Example 2:

<!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>
  <svg width="200px" height="200px">
  <!-- try different pairs and make different shapes-->
    <polygon points="100, 100 15, 205 150, 7 20, 0"
              fill="green" stroke="yellow">
  </svg>
</body>
</html>

                    

Output:

Browsers supported: Below given are the browsers supported by this svg element.

  • Chrome
  • Edge
  • Opera
  • Internet explorer
  • Safari
  • Firefox


Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads