A five-pointed star, a warning triangle, a decorative hexagon: whenever a geometric shape has straight sides and needs to close back on itself, <polygon> is the fastest shortcut. Instead of chaining L commands followed by a Z like with a <path>, a single list of coordinates is enough.
It is the go-to element for drawing simple geometric icons without having to memorize path command syntax. Many icon libraries even let you paste a ready-made list of points straight in, rather than recomputing a complex outline as path commands.
Definition
The <polygon> element draws a closed shape from a list of points given in the points attribute, written as a sequence of x,y pairs separated by spaces or commas. The browser draws a straight line between each point in order, then automatically closes the shape by connecting the last point back to the first, without needing to write that final segment.
Main attributes
| Attribute | Role |
|---|---|
points | List of vertices, written as "x1,y1 x2,y2 x3,y3..." |
fill, stroke | Fill color and outline color |
fill-rule | Fill rule used when sides cross each other |
A points value that is too short (fewer than three coordinate pairs) causes no visible error but simply prevents any shape from being drawn, a polygon needs at least three vertices to enclose a surface.
Concrete rendering example
A warning triangle and a five-pointed star, two common shapes in interfaces:
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 75,80 5,80" fill="#e9c46a" stroke="#8a6d1a" stroke-width="3" />
<polygon points="160,5 170,38 205,38 177,58 187,90 160,70 133,90 143,58 115,38 150,38" fill="#f4a261" />
</svg>The triangle only needs three points, connected and then closed automatically. The star uses ten points alternating between an outer tip and an inner notch, without ever having to write a closing command.
Difference from a broken line
The difference from <polyline> comes down purely to closing the shape. A broken line always stays open, the last point is never connected back to the first, while a <polygon> always closes the outline and fills the inside with the color set by fill. If the goal is a closed, filled outline, like an icon or a badge, <polygon> is the right choice; if the goal is a path or a line chart that does not close, the other shape remains the better fit. This has a practical consequence when drawing icons: the outline of a house, for instance, needs to close and is therefore a polygon, while the profile of a mountain range stays open and fits a broken line perfectly.
Common pitfall
points attribute of a <polygon> knows no curve command at all. Every line drawn between the points is necessarily straight, it is impossible to get a rounded corner or a curved side without switching to a more free-form outline, which often trips up beginners looking in vain for an "rx" attribute like on a rectangle.Real-world use case
Star rating icons, hexagonal status badges, direction arrows inside a diagram, or simple geometric logos are almost all drawn with <polygon>. It is also the base shape of radar charts (spider charts), where each vertex represents a value measured on a different axis. A simple oriented triangle, made from just three points, also works as a sort arrow in a data table or a selection caret in a dropdown menu.
FAQ
No, that is exactly the point of <polygon> compared to a manual path, the closing segment between the last and first point is automatic, repeating the first point causes no error but adds nothing.
points?Yes, a negative coordinate simply places the point outside the visible area defined by the viewBox, which can be intentional to let a star's tip spill past the frame.
Yes, as in a classic five-pointed star, and it is precisely the fill-rule attribute that determines which inner regions get filled or left empty when the sides overlap. The default value, nonzero, covers the vast majority of everyday cases, while evenodd is mainly used to create cutouts or holes inside a complex shape.