SVG Polygon
On this page, you can find useful information about the SVG <polygon> shape element, see its usage with our examples and try to create one for yourself.
Description of the <polygon> element
The SVG <polygon> element creates a closed shape made of straight line segments. A polygon is defined by a list of corner points (at least three), and the shape is automatically closed: the browser draws a final line from the last point back to the first one, so you don't have to repeat the starting coordinate.
This auto-closing behavior is the key difference between <polygon> and <polyline>: a polyline draws the same connected line segments but leaves the path open (no segment back to the start). Use <polygon> for filled, enclosed shapes like triangles, stars, or arrows, and <polyline> for open paths such as zig-zag lines or graphs.
The points attribute
The shape is described entirely by the points attribute. It holds a list of x,y coordinate pairs, written in user-space units:
points="x1,y1 x2,y2 x3,y3 ..."- Each pair is a single corner of the polygon.
- Pairs are separated by whitespace; within a pair, the
xandyvalues are separated by a comma (or whitespace —220 30 270 210is also valid, but the comma form is easier to read). - Coordinates are absolute, measured from the top-left corner of the SVG canvas, where
yincreases downward.
So points="220,30 270,210 180,230" defines three corners and, because the shape closes automatically, produces a triangle.
Example of the SVG <polygon> element with three sides:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Here the points attribute lists three corners — 220,30, 270,210, and 180,230 — and the browser connects them and closes the shape into a triangle.
Styling: fill, stroke, and stroke-width
The visual appearance is controlled by presentation attributes. These are not specific to <polygon> — they apply to every SVG shape, and each one has an equivalent CSS property, so you can set them inline (as in style="..." above), as plain attributes (fill="yellow"), or from a CSS stylesheet:
fill— the color used to paint the interior of the shape.stroke— the color of the outline.stroke-width— the thickness of the outline, in user units.
Because they are real CSS properties, a stylesheet rule like polygon { fill: yellow; stroke: green; } overrides plain fill/stroke attributes but is itself overridden by an inline style.
Example of the SVG <polygon> element with four sides:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Adding more coordinate pairs simply adds more corners. The four points above produce a quadrilateral; you can list as many points as the shape needs.
Building a regular polygon
A regular polygon (equilateral triangle, square, pentagon, hexagon, etc.) has all sides and angles equal. There is no dedicated attribute for this — you place the corners on a circle yourself. For n sides on a circle of radius r centered at (cx, cy), each corner i is at:
x = cx + r * cos(2π * i / n)
y = cy + r * sin(2π * i / n)In practice the points are usually pre-computed (by hand or with a small script) and written into the points attribute. The triangle and quadrilateral examples above use hand-picked coordinates, so their sides are not exactly equal.
Example of the SVG <polygon> element for creating a star:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Understanding fill-rule (why the star center is hollow)
When a shape's outline crosses over itself — as a five-pointed star does — the browser has to decide which enclosed regions count as "inside" and should be filled. The fill-rule presentation attribute controls that decision. It takes one of two values:
nonzero(the default) — used in the star example above. For any region, the browser draws an imaginary ray outward and counts how the path crosses it:+1for each crossing in one direction,-1for the other. If the total is non-zero, the region is filled. For a star drawn in a single continuous stroke, the inner pentagon nets out to a non-zero count, so it is filled — the star appears solid.evenodd— counts the crossings regardless of direction. If the count is odd the region is filled; if even, it is left transparent. With this rule the inner pentagon of the star gets an even count and stays hollow.
So changing only fill-rule:nonzero to fill-rule:evenodd in the star example leaves the center see-through — a common way to create a star outline.
Attributes
| Attribute | Description |
|---|---|
points | The list of points (pairs of x,y absolute coordinates) that define the polygon's corners. |
fill-rule | How self-overlapping regions are filled: nonzero (default) or evenodd. |
pathLength | The total length the path should be treated as, in user units. Setting it lets attributes like stroke-dasharray use values relative to this length instead of the real geometric length — useful when you don't want to measure the shape exactly. |
Like all SVG shapes, <polygon> also accepts the presentation attributes fill, stroke, and stroke-width, plus the Global Attributes and Event Attributes.
Related pages
- SVG Polyline — the open-path counterpart of
<polygon>. - SVG Path —
<path>, the most flexible element for drawing curves and complex shapes. - SVG Reference — the full list of SVG elements and attributes.