SVG Polygon

Q: How do I draw a polygon in SVG?

Use the element and provide a points attribute containing x,y pairs. Example: .

Q: 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".

Q: 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.

Q: 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.

Q: 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.

Beginner

⏱️ 6 min read

📚 Updated: Aug 2025

🎯 1 Code Example

Basic Shape

SVG Polygon tutorial illustration showing point coordinates

What You’ll Learn

SVG polygons let you create custom shapes by connecting multiple points. They are perfect for diamonds, stars, badges, and geometric illustrations.

You’ll learn how the points attribute works, how to style polygons with fill and stroke, and how polygons differ from polylines.

⚡ Quick Reference — SVG Polygon

Element <polygon>

A closed shape built from points

Points points

Space-separated x,y pairs

Fill fill

Interior colour

Stroke stroke

Outline colour

Stroke width stroke-width

Outline thickness

Basic Syntax

<svg>
  <polygon points="x1,y1 x2,y2 x3,y3" />
</svg>

👀 Live Preview — Common Polygons

Polygons are great for geometric icons and decorative shapes.

Diamond

Triangle

Chevron

Complete HTML Example

This example creates a diamond (4-point polygon) and styles it with fill and stroke:

index.html

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Try It Yourself

💡 Best Practices

Do

Keep points readable (one space between points)
Use stroke-linejoin="round" for nicer corners
Use a viewBox when polygons must scale responsively
Use CSS classes for consistent styling across multiple polygons
Prefer simple polygons for icons; use <path> for complex curves

Don’t

Forget that polygons automatically close the shape
Use fill="none" without a visible stroke (hard to see)
Mix inconsistent separators in points (stay consistent)
Put points outside the SVG canvas/viewBox unintentionally
Overuse many points when a simpler shape works

❓ Frequently Asked Questions

How do I draw a polygon in SVG?

Use <polygon> and provide points as x,y pairs. Add fill and stroke to style it.

What format does the points attribute use?

points is a list of coordinate pairs like "10,10 50,10 50,50". Pairs are separated by spaces.

What’s the difference between polygon and polyline?

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

Why is my polygon not visible?

Check that your points are inside the viewBox/canvas and that you have a visible fill or stroke. Also verify the points string is valid.

Can I style a polygon with CSS?

Yes. Use CSS to set fill, stroke, and stroke-width, and add hover or focus styles if needed.

Connect Points with Polylines

Next, learn <polyline> to draw open shapes and multi-segment strokes.

SVG Polyline →

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)

4 people found this page helpful

SVG Patterns SVG Polyline