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.

• 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:

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)

4. More Real & Fun Examples (Try Them All!)

Example 1: Star (5-pointed – Classic!)

→ Golden star (points go around in order)

Example 2: Hexagon (6 sides – Regular)

→ Nice honeycomb shape

Example 3: Irregular Shape + No Fill + Dashed Border

→ Zigzag open look but closed polygon

Example 4: Hover Effect with CSS

Hover → diamond shape changes color + thicker border!

Example 5: Gradient Fill Polygon

→ 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. 🚀