SVG polygon element

• SVG Polygon - Video Tutorial
• SVG Polygon Example

The SVG <polygon> element is used to draw shapes with multiple (3 or more) sides / edges.

SVG Polygon - Video Tutorial

Here is a video version of this tutorial:

SVG Polygon Example

Here is a simple SVG polygon example:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <polygon points="10,0  60,0  35,50"
         style="stroke:#660000; fill:#cc3333;"/>

</svg>

Here is the resulting image:

You may notice that all 3 sides are drawn, even if only 3 points are listed. That is because the <polygon> element draws lines between all points, including a line from the last point back to the first. The <polyline> does NOT draw a line from the last point to the first. This seems to be the only difference the <polygon> and the <polyline> elements.

Here is a larger example - an 8-sided polygon (octagon?):

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <polygon points="50,5   100,5  125,30  125,80 100,105
                   50,105  25,80  25, 30"
          style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>

</svg>