Jenkov.com
Tutorials About




SVG polygon element


Last updated: 2014-09-08

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>


Connect with me: Newsletter - Get all my free tips!
     



Close TOC
This website uses cookies to improve the user experience and gather statistics. Our advertisers use cookies too (3rd party cookies), to provide more relevant ads. Continued use of this website implies that you accept the use of cookies on this website. We do not share our cookies with our advertisers, and our advertisers do not share cookies with us.
OK