SVG <polygon>

SVG Polygon - <polygon>

Example 1

The <polygon> tag is used to create a graphic that has at least three sides.

Polygons are made up of straight lines and are "closed" shapes (all the lines connect up).

Here is the SVG code:

Example

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

For Opera users: View SVG file (right-click on the SVG graphic to view the source).

Code Analysis:

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

Example 2

The following example creates a four-sided polygon:

Here is the SVG code:

Example

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

For Opera users: View SVG file (right-click on the SVG graphic to view the source).

Example 3

Creating a star shape using the <polygon> element:

Here is the SVG code:

Example

<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>

For Opera users: View SVG file (right-click on the SVG graphic to view the source).

Example 4

Changing the fill-rule attribute to "evenodd":

Here is the SVG code:

Example

<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>

For Opera users: View SVG file (right-click on the SVG graphic to view the source).