This is used to draw a closed shape by connecting multiple straight lines.
Before reading further, read the following articles.
Now let's move forward to understanding SVG polygons.
The tag <polygon> is used to draw various polygon shapes by connecting multiple straight lines like a polyline
, but with the difference that a polyline draws open structures and a polygon draws closed structures.
In other words, it draws graphics or polygons that are closed (all lines are connected to each other) and that should contain at least three sides to be closed.
Note: When we use three coordinates to draw a shape by a polyline
, it only draws two straight lines depending on the given coordinates but if we draw by a polygon
then it automatically adds or connects one additional straight line to close the shape.
Like polyline, it also has the attribute “points” which is the list of points to make up the polygons.
Let's see a few examples to understand it properly.
Polygons of a minimum of three sides, four sides, and five sides.
By applying the preceding property, the crossing area gets unfilled by “evenodd” and the separate area is unfilled by “nonzero”.