The <polygon> element is very similar to the <polyline> — they both consist of multiple dots connected to each other. The only difference is that the <polygon> is a closed shape, and its last point stretches to the first one. On the contrary, the <polyline> is an open shape.

The polygon should have at least 3 sides (then you get a triangle), and for each corner, we set x and y coordinates using the points attribute. For example, for drawing a red triangle with two equal sides, you can use the following syntax: <polygon points="205,10 250,160 160,160" style="fill:red;"/>.