SVG <polygon>

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

SVG Polygon - <polygon>

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" (it automatically connects the last point with the first).

The <polygon> element has one basic attribute that defines the points of the polygon:

A Polygon With Three Sides

The following example creates a polygon with three sides:

Here is the SVG code:

Code explanation:

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

A Polygon With Four Sides

The following example creates a polygon with four sides:

Here is the SVG code:

A Polygon With Six Sides

The following example creates a polygon with six sides:

Here is the SVG code:

A Polygon Star

Use the <polygon> element to create a star:

Here is the SVG code:

Another Polygon Star

Use the fill-rule attribute to specify the inside part of a shape:

Here is the SVG code:

Code explanation:

• The fill-rule attribute defines the algorithm to use to specify the inside part of a shape