Part of the SVG Elements Reading List

Cet article est également disponible en français

If you want a closed SVG shape that is more than a basic circle, ellipse or rectangle, you’ll need to create a polygon.

In SVG, a polygon is any closed shape that consists of straight line segments: SVG doesn’t yet have elements for regular polygons (no <star /> or <hexagon />); instead, it simply allows you to make closed shapes of any kind by specifying points. While three or four-point polygon shapes are easy to code by hand, you’ll probably want to use a graphical editor like , Inkscape or PhotoShop to create more complex designs, exporting them as SVG. Regardless, it’s very useful to understand the basics of SVG polygons, as doing so allows you to “tweak” and alter shapes in code without relying on graphical editors.

The Simplest SVG Polygon: A Triangle

Let’s start with the simplest possible shape, using just three points to make a right-angled triangle: 

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0 0, 100 100, 0 100"/>
</svg>

Which creates:

A few things to note:

  • as before, x and y axes have their origin in the top left corner of the viewBox: x goes horizontally, increasing as it moves to the right, y vertically, increasing as it moves downwards.
  • the points that make up the polygon are defined as pairs of x and y coordinates.
  • these coordinate pairs are separated by commas.
  • there’s no required directionality to the order of the points: you can start defining any point, and proceed in any direction around the shape. (In the example above, the “top” point of the polygon is defined first, followed by the others in a “clockwise” direction; it would be equally valid to define the bottom left point first and proceed counter-clockwise).
  • there’s no need to repeat the first point at the end; SVG knows to “auto-close” the polygon shape.
  • stroke, fill and stroke-width are equally applicable to polygon shapes as they are to ellipses, circles and rectangles.

What if we wanted to create an equilateral triangle? That would mean repositioning just one point: 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <polygon points="50 15, 100 100, 0 100"/>
</svg>

Which produces:

The Crossing Fill Problem

With just three points joined by straight lines, it’s impossible for a polygon’s edges to self-intersect. But at four points, it’s completely possible: 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <polygon points="0 20, 100 20, 100 0, 0 100 "/>
</svg>

SVG (together with most graphical editors) is completely okay with rendering this result, even if it’s not exactly what you might expect:

Depending on your intentions, this outcome might mean repositioning the third point, or adding a fifth, to fix the rendering issue.

A Basic SVG Library of Regular Polygons

While you’re likely to create SVG elements in a drawing application, seeing how the code for regular polygons is constructed in SVG is useful. You’re also welcome to copy and use this code in your own creations; each polygon is inside a 100 × 100 unit viewBox.

Pentagon

<polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/>

Star

<polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/>

Hexagon

<polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/>

Octagon

<polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4"  fill="hsl(216,80%,50%)"/>

Now that we’ve covered basic shapes, we’ll move back to lines in the next article: specifically, SVG lines, polylines, and paths.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.