SVG polygon element

Jakob Jenkov
Last update: 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>

Jakob Jenkov

Featured Videos




















Advertisements

High-Performance
Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next