When should I use instead of or ?

Use for closed straight-sided shapes defined by a list of vertices. Use for open chains of segments, and when you need curves, arcs, or mixed commands.

SVG <polygon> Element

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Basic Shape

SVG Polygon tutorial illustration showing points attribute and closed shapes

Overview

What You’ll Learn

SVG’s <polygon> draws closed shapes from a list of vertex coordinates. This tutorial covers the points attribute, fill and stroke styling, stroke-linejoin, responsive viewBox usage, five worked examples, and how <polygon> compares to <polyline>, <path>, and <rect>.

<polygon>

Core element

Place <polygon> inside an <svg> to draw a closed multi-sided shape.

points

Vertex list

Space-separated x,y pairs define each corner of the shape.

Auto-close

Closed path

The browser connects the last point back to the first — no repeat needed.

Fill

Interior paint

Set fill for the interior colour or pattern of the shape.

Stroke

Outline

Add stroke and stroke-width for a visible border.

viewBox

Responsive

Scale polygons cleanly with a viewBox and CSS sizing.

Introduction

SVG’s <polygon> builds closed shapes from a flat list of coordinates — triangles, diamonds, hexagons, stars, and badges all start here. It powers icon glyphs, map regions, chart segments, and decorative UI elements.

Unlike <polyline>, a polygon always closes itself. The browser draws straight edges between consecutive points and connects the last vertex back to the first, giving you a fillable area.

Why it matters?

Raster PNG icons blur when scaled. SVG polygons stay sharp, stay tiny in markup, and can be filled, stroked, and themed with CSS just like other vector shapes.

Key Highlights

Points List

points="x1,y1 x2,y2 x3,y3" defines every vertex.

Auto-Closed

Last point connects to first — no duplicate coordinate needed.

Fill & Stroke

Interior colour from fill; outline from stroke.

Scales With viewBox

One drawing scales to any CSS size without rewriting points.

In short: list your corners in points, then paint with fill and stroke — the browser closes the shape for you.

Foundation

📝 Syntax

Basic form of the SVG polygon element:

index.html

<svg width="200" height="200">
  <polygon points="100,20 20,100 100,180 180,100"
           fill="yellow" stroke="black" stroke-width="2" />
</svg>

Attributes

Attribute	Type	Description
`points`	List	Space-separated `x,y` pairs for each vertex. Required for a visible shape.
`fill`	Paint	Interior colour. Defaults to black; use `none` for transparent fill.
`stroke`	Paint	Outline colour around the polygon edges.
`stroke-width`	Length / number	Thickness of the outline in user units.
`stroke-linejoin`	Keyword	Corner shape: `miter`, `round`, or `bevel`.
`fill-rule`	Keyword	`nonzero` or `evenodd` for self-intersecting shapes like stars.

What It Draws

Result	Details
closed polygon	Renders a closed shape by connecting consecutive points and closing back to the first.

Minimal workflow

index.html

<svg width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,30 40,170 160,170"
           fill="#60a5fa" stroke="#1e3a8a" stroke-width="2" />
</svg>

Coordinate tips

Idea	Detail	Notes
Origin	`(0, 0)` is top-left	y grows downward
Separators	Spaces between points	`"10,10 50,10 50,50"` is standard
Minimum points	Three vertices	Two points make a line segment, not a filled area

Cheat Sheet

⚡ Quick Reference

Goal	Code
Basic triangle	`<polygon points="100,30 40,170 160,170" fill="#60a5fa" />`
Diamond (4 points)	`<polygon points="100,20 20,100 100,180 180,100" fill="yellow" stroke="black" stroke-width="2" />`
Stroke only	`fill="none" stroke="#0f172a" stroke-width="2"`
Rounded corners	`stroke-linejoin="round"`
Star fill rule	`fill-rule="evenodd"`
Responsive SVG	`<svg viewBox="0 0 200 200">...` + CSS width

Compare

📋 `<polygon>` vs `<polyline>` vs `<path>` vs `<rect>` vs `<line>`

All can define edges — pick the simplest element that fits.

closed shape

Straight-sided closed shapes from a points list

open chain

Connected segments that stay open unless you repeat the first point

<path>

any shape

Curves, arcs, and mixed commands — most flexible

<rect>

axis-aligned box

Rectangles with x, y, width, height — not arbitrary angles

<line>

one segment

Single straight stroke — no fillable area

Context

When to Use `<polygon>`

Reach for <polygon> whenever you need a closed straight-sided shape defined by vertices.

Icons & badges
Diamonds, chevrons, stars, and notification badges.
Simple geometry
Triangles, pentagons, hexagons, and other regular polygons.
Charts & diagrams
Pie slices, map regions, and labelled zones.
UI affordances
Play buttons, tooltips, speech-bubble tails, and arrows.
Not for curves
If you need arcs or Bézier curves, use <path>.

Key benefit: a flat list of points plus automatic closing — the lightest closed shape in SVG.

Hands-On

Examples Gallery

Five starter snippets using <polygon>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Draw a diamond and a styled triangle.

Example 1 — Diamond (4-Point Polygon)

Create a diamond by placing four points around a centre — top, left, bottom, and right.

index.html

<svg width="200" height="200">
  <polygon points="100,20 20,100 100,180 180,100"
           fill="yellow" stroke="black" stroke-width="2" />
</svg>

Try It Yourself

How It Works

Four x,y pairs define the vertices. The browser draws edges between them and closes back to the first point automatically.

Example 2 — Triangle With Fill and Stroke

A three-point polygon with a blue fill, dark outline, and rounded corners via stroke-linejoin.

index.html

<svg width="200" height="200">
  <polygon points="100,30 40,170 160,170"
           fill="#60a5fa" stroke="#1e3a8a" stroke-width="3"
           stroke-linejoin="round" />
</svg>

Try It Yourself

How It Works

Three points are enough for a closed triangle. stroke-linejoin="round" softens the corners where edges meet.

📈 Practical Patterns

Regular polygons, stars, and stroke-only badges.

Example 3 — Regular Hexagon

Six evenly spaced vertices around a centre create a flat-top hexagon — common in honeycomb layouts and game tiles.

index.html

<svg width="220" height="200" viewBox="0 0 220 200">
  <polygon points="110,20 190,60 190,140 110,180 30,140 30,60"
           fill="#a7f3d0" stroke="#047857" stroke-width="2"
           stroke-linejoin="round" />
</svg>

Try It Yourself

How It Works

Six points at 60° intervals form a regular hexagon. A viewBox keeps the shape proportional when you resize the SVG.

Example 4 — Five-Point Star

Alternate outer and inner vertices to create a star. Use fill-rule="evenodd" for a clean centre cutout.

index.html

<svg width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,15 123,75 188,75 136,115 158,180
                   100,140 42,180 64,115 12,75 77,75"
           fill="#fbbf24" stroke="#b45309" stroke-width="2"
           fill-rule="evenodd" stroke-linejoin="round" />
</svg>

Try It Yourself

How It Works

Ten alternating outer/inner points trace the star outline. Self-intersecting shapes often need fill-rule="evenodd" to fill correctly.

Example 5 — Chevron Badge (Stroke Only)

A six-point chevron with no fill — outline-only polygons work well for arrows and navigation icons.

index.html

<svg width="200" height="100" viewBox="0 0 200 100">
  <polygon points="40,10 100,50 40,90 55,90 115,50 55,10"
           fill="none" stroke="#22c55e" stroke-width="4"
           stroke-linejoin="round" stroke-linecap="round" />
</svg>

Try It Yourself

How It Works

Set fill="none" and a visible stroke to draw outline-only shapes. Without a stroke, a transparent fill would be invisible.

Use Cases

Real-world places where SVG polygons show up every day.

1. Rating Stars

Five-point stars for reviews and favourites.

Example: filled and outline star icons.

2. Navigation Chevrons

Back, forward, and dropdown arrow badges.

Example: breadcrumb or carousel chevrons.

3. Chart Segments

Pie slices and radar chart facets.

Example: donut chart wedge from centre points.

4. Map Regions

Clickable country or zone outlines.

Example: choropleth map with hover fill.

5. UI Badges

Notification counts, labels, and tags.

Example: diamond sale badge on a product card.

6. Education

Geometry lessons teaching vertices and angles.

Example: interactive triangle angle demos.

Pro Tip: for repeating tile fills inside polygons, pair with SVG Patterns.

Advantages

Why draw closed shapes with SVG polygons instead of images or CSS hacks.

1. Simple Vertex List
One points attribute defines the entire shape — no path commands to memorise.
2. Resolution Independent
Stays sharp on retina screens without extra assets.
3. Fillable Areas
Unlike lines, polygons create a closed region you can fill, pattern, or clip.
4. Compact Markup
Triangles and badges in a single element — smaller than equivalent PNG icons.
5. CSS Styleable
Change fill, stroke, and hover states with CSS selectors.

Pro Tip: use fill="currentColor" so polygons inherit the parent text colour for theming.

Usage Tips

Follow these practices for clean, scalable SVG polygons.

1. Keep Points Readable
Use one space between x,y pairs — avoid inconsistent comma spacing.
2. Round Sharp Corners
stroke-linejoin="round" softens corners on triangles and stars.
3. Use viewBox for Scaling
Define geometry once, then size the SVG with CSS.
4. Set fill-rule for Stars
Self-intersecting shapes often need fill-rule="evenodd".
5. Prefer path for Complex Curves
Polygons are for straight edges — switch to <path> when you need arcs.

Pro Tip: CSS classes on <polygon> keep fill and stroke consistent across an icon set.

Common Pitfalls

Avoid these mistakes when your polygon refuses to show up.

1. No Visible Fill or Stroke
fill="none" with no stroke makes the shape invisible.
→ Set a fill colour or a visible stroke.
2. Malformed points String
Missing commas or odd separators break coordinate parsing.
→ Use consistent "x,y x,y x,y" formatting.
3. Outside the ViewBox
Vertices outside the canvas get clipped or disappear.
→ Keep all points inside the SVG size or viewBox.
4. Wrong fill-rule on Stars
Self-intersecting stars may fill the centre incorrectly.
→ Try fill-rule="evenodd" for star shapes.
5. Using Polygon for Open Paths
Polygons always close — open chains need <polyline>.
→ Use <polyline> when the shape should stay open.

Pro Tip: if a polygon vanishes, check fill, stroke, and whether all points sit inside the viewBox — those three catch most issues.

🧠 How `<polygon>` Is Drawn

List vertices in points

Each x,y pair in points marks a corner of the shape.

Vertices

Connect consecutive points

The browser draws straight edges from point to point in order.

Edges

Auto-close the path

The last point connects back to the first — you never repeat the starting coordinate.

Fill and stroke the area

Apply fill for the interior and stroke for the outline.

Paint

A closed, fillable shape

The browser renders the polygon live from vertices and paint — sharp at every zoom level.

Important Notes

<polygon> always closes — last point connects to first automatically.
SVG origin is the top-left; positive y goes down.
Minimum three points for a meaningful filled triangle.
fill-rule="evenodd" helps self-intersecting stars fill correctly.
Open chains? Use <polyline> instead.
Pair with viewBox when the graphic must scale responsively.

Quick Takeaway: list corners in points, paint with fill and stroke. Keep vertices inside the viewBox, and use CSS sizing for responsive icons.

Compatibility

Browser Support

The SVG <polygon> element is supported in all modern browsers — and has been for many years — as part of SVG 1.1 basic shapes.

✓ SVG 1.1+

SVG <polygon>

Usein inline SVG or external .svg files. The points attribute, fill, and stroke work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<polygon> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG <polygon> turns a flat list of coordinates into closed, fillable shapes — triangles, diamonds, hexagons, stars, and badges.

Practice the five examples above, then continue to SVG Polyline when you need open multi-segment paths.

Remember auto-close behaviour, set visible fill or stroke, and use viewBox when the shape must scale with the layout.

View Examples Gallery Continue to Polyline

Pro Tips

💡 Best Practices

✅ Do

Keep points readable with consistent spacing
Use stroke-linejoin="round" for nicer corners
Set fill-rule="evenodd" on self-intersecting stars
Use a viewBox when polygons must scale
Prefer <path> for complex curves

❌ Don’t

Forget that polygons automatically close the shape
Use fill="none" without a visible stroke
Mix inconsistent separators in the points string
Put points outside the SVG canvas/viewBox unintentionally
Hard-code pixel sizes when you need a responsive icon

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG `<polygon>`

Draw closed shapes the SVG way.

Core concepts

⬟ 01

<polygon>

Closed multi-sided shape

API

xy 02

points

x,y vertex list

Geometry

↺ 03

Auto-close

Last → first edge

Path

✎ 04

Fill & Stroke

Interior and outline

Paint

🗺 05

viewBox

Scales cleanly

Responsive

❓ Frequently Asked Questions

How do I draw a polygon in SVG?

Use the <polygon> element and provide a points attribute containing x,y pairs. Example: <polygon points="100,20 20,100 100,180 180,100" fill="yellow" stroke="black" stroke-width="2" />.

What format does the points attribute use?

points is a list of coordinate pairs. Each point is x,y and points are separated by spaces (or commas). Example: "10,10 50,10 50,50".

What's the difference between polygon and polyline?

A polygon is automatically closed (it connects the last point back to the first). A polyline is open unless you repeat the first point at the end.

Why is my polygon not visible?

Common causes: the points are outside the viewBox, the shape has fill="none" with no stroke, or the points string is malformed.

Can I style a polygon with CSS?

Yes. You can set fill, stroke, and stroke-width via CSS selectors, and add hover/focus styles for interactivity.

When should I use <polygon> instead of <path> or <polyline>?

Use <polygon> for closed straight-sided shapes defined by a list of vertices. Use <polyline> for open chains of segments, and <path> when you need curves, arcs, or mixed commands.

Did you Know? 🔊

An SVG <polygon> automatically closes the shape — the browser connects the last point back to the first, so you never repeat the starting coordinate. Unlike <polyline>, you never need to repeat the first point at the end of the list.

Continue to SVG Polyline

Learn how <polyline> draws open multi-segment paths with the same points syntax.

Polyline tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

SVG Line SVG Polyline

SVG <polygon> Element

What You’ll Learn

<polygon>

points

Auto-close

Fill

Stroke

viewBox

Introduction

Why it matters?

Points List

Auto-Closed

Fill & Stroke

Scales With viewBox

📝 Syntax

Attributes

What It Draws

Minimal workflow

Coordinate tips

⚡ Quick Reference

📋 <polygon> vs <polyline> vs <path> vs <rect> vs <line>

When to Use <polygon>

Icons & badges

Simple geometry

Charts & diagrams

UI affordances

Not for curves

Examples Gallery

📚 Getting Started

Example 1 — Diamond (4-Point Polygon)

How It Works

Example 2 — Triangle With Fill and Stroke

How It Works

📈 Practical Patterns

Example 3 — Regular Hexagon

How It Works

Example 4 — Five-Point Star

How It Works

Example 5 — Chevron Badge (Stroke Only)

How It Works

Use Cases

1. Rating Stars

2. Navigation Chevrons

3. Chart Segments

4. Map Regions

5. UI Badges

6. Education

Advantages

1. Simple Vertex List

2. Resolution Independent

3. Fillable Areas

4. Compact Markup

5. CSS Styleable

Usage Tips

1. Keep Points Readable

2. Round Sharp Corners

3. Use viewBox for Scaling

4. Set fill-rule for Stars

5. Prefer path for Complex Curves

Common Pitfalls

1. No Visible Fill or Stroke

2. Malformed points String

3. Outside the ViewBox

4. Wrong fill-rule on Stars

5. Using Polygon for Open Paths

🧠 How <polygon> Is Drawn

List vertices in points

Connect consecutive points

Auto-close the path

Fill and stroke the area

A closed, fillable shape

Important Notes

Browser Support

SVG &lt;polygon&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG <polygon>

📋 `<polygon>` vs `<polyline>` vs `<path>` vs `<rect>` vs `<line>`

When to Use `<polygon>`

🧠 How `<polygon>` Is Drawn

SVG <polygon>

Five things to remember about SVG `<polygon>`