Skip to content
Related Articles

Related Articles

Improve Article
SVG polygon Element
  • Last Updated : 14 Aug, 2020

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :