Polygon

You can use the <polygon> element to define a series of points connected by straight lines. The x and y coordinates are separated by a comma. The shape is closed automatically, meaning that you do not have to go back to the start point.

<polygon points="0,100 150,50 100,200 50,50 200,100
                 50,150 100,0 150,150" fill="#00B6A8" />

As long as the lines in the polygon do not cross, the coloring of the surface remains unambiguous. If the connecting lines cross each other, however, there are two different ways the polygon can be filled. For more information, see the section Fill rules.