SVG Polygon

SVG : Creating Multi-Sided Shapes

The Element

The <polygon> element is used to create closed shapes consisting of three or more straight line segments. You define the vertices (corners) of the polygon, and the browser automatically connects the last vertex back to the first to close the shape.

The term ‘Polygon’ comes from Greek: ‘Poly’ (many) and ‘gon’ (angle).

Example 1: A Simple Triangle

Creating a polygon with three sides (a triangle):

A lime-green triangle with a purple border.

SVG Code:

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

Code Explanation:

• points: This attribute defines the coordinates of each vertex of the polygon. It’s a list of numbers, interpreted as x,y pairs: “x1,y1 x2,y2 x3,y3 …”. Commas or spaces can be used as separators between coordinate values, and spaces are typically used between pairs.

Example 2: A Four-Sided Polygon (Quadrilateral)

Creating a polygon with four sides:

An irregular lime-green quadrilateral with a purple border.

SVG Code:

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

Example 3: Creating a Star with ‘nonzero’ Fill Rule

The <polygon> element can create more complex shapes like stars by defining intersecting paths.

A lime-green five-pointed star with a thick purple border. The center of the star is filled due to the ‘nonzero’ fill rule.

SVG Code:

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

Code Explanation:

• fill-rule: This CSS property determines how the interior of a self-intersecting shape is filled. nonzero (default) fills areas based on winding numbers (if a ray from a point to infinity crosses the path a net non-zero number of times, it’s inside).

Example 4: Star with ‘evenodd’ Fill Rule

Changing the fill-rule to evenodd:

A lime-green five-pointed star outline with a thick purple border. The center of the star is hollow (not filled) due to the ‘evenodd’ fill rule.

SVG Code:

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

Code Explanation:

• fill-rule: evenodd;: With evenodd, if a ray from a point to infinity crosses the path an odd number of times, it’s inside; if an even number, it’s outside. This often results in hollow areas in self-intersecting shapes like this star.

Practical Applications:

Polygons are used for creating custom geometric shapes, icons, chart components (like pie slices if approximated), and any graphic requiring straight-sided closed paths. For shapes with curves or open paths, the <path> element is more suitable.

Remember to provide accessible descriptions (e.g., using <title> and <desc>) if the polygon conveys meaningful information.