SVG <polygon>

Example 1

<polygon> Labels are used to create shapes with no less than three sides.

A polygon is made up of straight lines and its shape is “closed” (all the lines are connected).

Polygon is from Greece. “Poly” means “many” and “gon” means “angle”.

Here is the SVG code:

Example

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

For Opera users: view the SVG file (right-click the SVG drawing preview source).

Code parsing:

• points Property defines the x and y coordinates of each corner of a polygon

Example 2

The following example creates a four-sided polygon:

Here is the SVG code:

Example

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

For Opera users: view the SVG file (right-click the SVG drawing preview source).

Example 3

Use <polygon> element to create a star:

Here is the SVG code:

Example

<svgheight="210"width="500"><polygonpoints="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 the SVG file (right-click the SVG drawing preview source).

Example 4

Change the fill-rule property to “evenodd”:

Here is the SVG code:

Example

<svgheight="210"width="500"><polygonpoints="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 the SVG file (right-click the SVG drawing preview source).