SVG <polygon>

SVG Polygon - <polygon>

<polygon> The element is used to create a shape with at least three sides.

Polygons are made up of straight lines and are shaped 'closed' (all lines connect).

The word 'Polygon' comes from the Greek language. 'Poly' means 'many', and 'gon' means 'angle'.

Example 1

The following example creates a triangular polygon:

This is the SVG code:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Try It Yourself

Code Explanation:

  • The points attribute defines the x and y coordinates of each corner of the polygon

Example 2

The following example creates a quadrilateral polygon:

This is the SVG code:

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Try It Yourself

Example 3

Using <polygon> Create a star element:

This is the SVG code:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Try It Yourself

Example 4

Change the fill-rule attribute to "evenodd":

This is the SVG code:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Try It Yourself