W3docs
en
Log in

SVG Polygon

On this page, you can find useful information about the SVG <polygon> shape element, see its usage with our examples and try to create one for yourself.

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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

Attributes

AttributeDescription
pointsThis attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polygon.
pathLengthThis attribute specifies the total length for the path, in user units.

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

Practice

Practice

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