Chapter 9: SVG polygon
SVG Polygon means using the <polygon> tag inside SVG to draw a closed shape with straight sides (at least 3 sides). Think triangle, pentagon, hexagon, star, irregular house shape, arrowhead, country map outline — anything made of connected straight lines where the last point automatically connects back to the first to close the shape.
- Key difference from previous:
- <line> → open, 2 points
- <polyline> → open chain of many points
- <polygon> → closed chain of many points (auto-connects end to start)
- <rect> → special easy rectangle (4 sides)
- Polygon → general any number of straight sides
1. Basic Syntax of <polygon>
The magic attribute is points — a list of x,y coordinate pairs.
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<polygon points="x1,y1 x2,y2 x3,y3 ... xn,yn" <!-- REQUIRED – list of points --> fill="..." <!-- inside color --> stroke="..." <!-- border color --> stroke-width="..." /> |
- Self-closing tag (/>)
- Must be inside <svg>…</svg>
- points is required — no points = nothing shows
- Coordinates are space-separated pairs (no commas between pairs, comma inside pair)
- At least 3 points needed for a visible shape (triangle minimum)
- Last point automatically connects back to first — no need to repeat first point
2. Your First SVG Polygon – Simple Triangle (Copy-Paste Now!)
Save as polygon.html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Polygon Basics</title> </head> <body> <h1>Basic Triangle Polygon</h1> <svg width="300" height="250" viewBox="0 0 300 250" style="border:1px solid gray;"> <!-- Simple red triangle --> <polygon points="150,20 280,200 20,200" fill="red" stroke="black" stroke-width="5" /> </svg> </body> </html> |
What you see: A red triangle pointing up, base at bottom.
Breakdown (like pointing on screen):
- points=”150,20 280,200 20,200″
- Point 1: (150,20) → top point
- Point 2: (280,200) → bottom-right
- Point 3: (20,200) → bottom-left
- Browser auto-draws line from last (20,200) back to first (150,20) → closed!
- fill=”red” → inside color
- stroke=”black” stroke-width=”5″ → black border
Zoom — still perfect sharp edges!
3. All Important Attributes (Full Teacher Notes)
| Attribute | Meaning | Required? | Default | Example values | Notes |
|---|---|---|---|---|---|
| points | List of x,y pairs (space separated) | Yes | — | “10,10 50,90 90,10” | Odd number of coords ignored |
| fill | Inside color | No | black | blue, #00ff00, none | none = transparent |
| stroke | Outline color | No | none | black, purple | Invisible without it sometimes |
| stroke-width | Border thickness | No | 1 | 4, 8 | In user units |
| stroke-linecap | End cap style | No | butt | round, square | Nice for thick lines |
| stroke-linejoin | Corner join style | No | miter | round, bevel | Controls sharp corners |
| stroke-dasharray | Dashed pattern | No | — | “10 5” | Dash-gap |
| opacity | Whole shape transparency | No | 1 | 0.7 | Affects fill + stroke |
4. More Real & Fun Examples (Try Them All!)
Example 1: Star (5-pointed – Classic!)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg viewBox="0 0 200 200" width="200" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" fill="gold" stroke="orange" stroke-width="5" /> </svg> |
→ Golden star (points go around in order)
Example 2: Hexagon (6 sides – Regular)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg viewBox="0 0 220 200" width="220" height="200"> <polygon points="110,10 200,60 200,140 110,190 20,140 20,60" fill="lightblue" stroke="darkblue" stroke-width="6" /> </svg> |
→ Nice honeycomb shape
Example 3: Irregular Shape + No Fill + Dashed Border
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="300" height="200"> <polygon points="50,150 100,50 150,180 200,60 250,170" fill="none" stroke="purple" stroke-width="8" stroke-dasharray="10 5" stroke-linecap="round" /> </svg> |
→ Zigzag open look but closed polygon
Example 4: Hover Effect with CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .my-polygon:hover { fill: lime; stroke: darkgreen; stroke-width: 10; } </style> <svg width="200" height="200"> <polygon class="my-polygon" points="100,20 180,100 100,180 20,100" fill="skyblue" stroke="navy" stroke-width="6"/> </svg> |
Hover → diamond shape changes color + thicker border!
Example 5: Gradient Fill Polygon
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<svg viewBox="0 0 200 200" width="200" height="200"> <defs> <linearGradient id="grad"> <stop offset="0%" stop-color="yellow"/> <stop offset="100%" stop-color="red"/> </linearGradient> </defs> <polygon points="100,10 190,90 150,190 50,190 10,90" fill="url(#grad)" stroke="black"/> </svg> |
→ Arrowhead-like with gradient
5. Teacher’s Tips (Hyderabad Student Style 😄)
- Order of points matters — clockwise or counterclockwise (affects fill if using evenodd rule later)
- Too few points (<3) → nothing visible
- Points attribute: spaces between pairs, commas inside — wrong format = broken shape
- For regular polygons (pentagon, etc.) → calculate points with math or use tools like Inkscape
- Vs <polyline>: polyline doesn’t close automatically — good for open paths
- Common use: Icons (star, heart outline), charts (radar/polygon charts), custom buttons, maps
- Responsive: Always use viewBox so polygon scales nicely
Got polygon clear now? Tell me — want a full star with animation? House shape example? Or how to make irregular polygon from Figma? Or compare with path for complex shapes? Just say — we’re almost through basic shapes! Next could be polyline or path if you want. 🚀
