What makes different from ?

It automatically closes the shape back to its starting point

It cannot have more than four points

It cannot be filled with a color

How are the coordinate pairs inside a polygon's points attribute separated?

By spaces and/or commas between each x,y pair

Each point must be its own child element

If no fill attribute is set on a , how does it render?

Filled black, the default fill color

Completely transparent and unfilled

It inherits the HTML page's background color

SVG Polygon

Learn how the <polygon> element draws a closed shape by connecting a series of points, closing the path back to the start automatically.

The <polygon> Element

The <polygon> element renders a closed, filled shape from an arbitrary number of connected straight-line segments. You define its shape with a single points attribute listing pairs of coordinates, instead of separate x/y attributes. Unlike <polyline>, a polygon always draws a final segment connecting the last point back to the first, closing the shape automatically.

The points Attribute

The points attribute takes a list of x,y coordinate pairs, separated by spaces or commas: points="x1,y1 x2,y2 x3,y3". Each pair is one vertex of the shape. Because the shape auto-closes, you don't need to repeat the first point at the end of the list.

Example: A Basic Triangle

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,20 180,180 20,180" fill="#22c55e" />
</svg>

</body>
</html>

Fill and Stroke on Polygons

Because a polygon is a closed shape, it has an interior area, so both fill and stroke apply. fill controls the interior color (defaulting to black if omitted), while stroke and stroke-width outline the edges. The fill-rule attribute (nonzero or evenodd) controls how self-intersecting polygons are filled.

points - space or comma separated list of x,y vertex coordinates
fill - the interior color of the shape
stroke - the outline color
stroke-width - the outline thickness
fill-rule - nonzero (default) or evenodd, controls fill for self-intersecting shapes

Example: Hexagon with Stroke

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="220" viewBox="0 0 220 220">
  <polygon points="110,10 200,60 200,160 110,210 20,160 20,60"
           fill="#fde68a" stroke="#b45309" stroke-width="4" />
</svg>

</body>
</html>

Note: A polygon always closes itself, even if you don't repeat the first coordinate pair at the end of the points list -- the browser draws that final closing segment for you automatically.

Example: Star Shape Using fill-rule

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="220" viewBox="0 0 220 220">
  <polygon points="110,10 136,80 210,80 150,125 172,200 110,155 48,200 70,125 10,80 84,80"
           fill="#a855f7" fill-rule="evenodd" stroke="#581c87" stroke-width="2" />
</svg>

</body>
</html>

Note: Because a polygon always closes and has fill, it renders differently from a <polyline> built from the same points -- a polyline never auto-closes or fills by default. Use a polygon for a solid closed shape and a polyline for an open connected line.

Exercise: SVG Polygon

What makes <polygon> different from <polyline>?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVG Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to SVG and tweak your resume