SVG Basic

SVG Shapes

SVG Filters

SVG Gradients

SVG Examples

SVG Reference

SVG <polygon>

SVG Polygon - <polygon>

Example 1

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

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

Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".

Here is the SVG code:

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

Code explanation:

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

Example 2

The following example creates a polygon with four sides:

Here is the SVG code:

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

Example 3

Use the <polygon> element to create a star:

Here is the SVG code:

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

Example 4

Change the fill-rule property to "evenodd":

Here is the SVG code:

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