Description of the <polygon> element

The SVG <polygon> element creates a graphic containing at least three sides.

Polygons consist of straight lines, which are connected up, and its shape is "closed".

Example of the SVG <polygon> element with three sides:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250" >
      <polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

In this example the points attribute specifies the x and y coordinates for each corner of our polygon.

Example of the SVG <polygon> element with four sides:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Example of the SVG <polygon> element for creating a star:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="230" >
      <polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
      Sorry, inline SVG isn't 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 polygon.
pathLength This attribute specifies the total length for the path, in user units.

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

Practice Your Knowledge

What is true about SVG polygon as per the content from the provided URL?

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.

Do you find this helpful?