Chapter 10: SVG polyline
SVG Polyline means using the <polyline> tag inside SVG to draw a chain of connected straight lines (an open path made of multiple line segments). It’s like <polygon> but does NOT close automatically — the last point does not connect back to the first one. That’s the big difference!
- Use polyline when you want an open shape (like a zigzag line, graph plot, path that doesn’t loop, outline without filling a closed area).
- Use polygon when you want a closed shape (triangle, star, house) that fills inside.
1. Basic Syntax of <polyline>
The main attribute is points — same as polygon, but no auto-closing.
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<polyline points="x1,y1 x2,y2 x3,y3 ... xn,yn" <!-- REQUIRED – list of points --> stroke="..." <!-- Color of the lines – usually REQUIRED to see it! --> stroke-width="..." fill="..." <!-- Optional – but often "none" for open shapes --> /> |
- Self-closing tag (/>)
- Must be inside <svg>…</svg>
- points is required — list of x,y pairs separated by spaces (comma inside each pair)
- At least 2 points needed (otherwise invisible)
- No automatic closing → last point stays open (unlike <polygon>)
- Fill usually set to none (or transparent) because open shapes don’t have a clear “inside” — browser might fill oddly if you don’t.
2. Your First SVG Polyline (Copy-Paste Right Now!)
Save as polyline.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 Polyline Basics</title> </head> <body> <h1>Simple Zigzag Polyline</h1> <svg width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;"> <!-- Basic zigzag open line --> <polyline points="20,180 100,20 200,180 300,20 380,180" fill="none" stroke="blue" stroke-width="6" /> </svg> </body> </html> |
What you see: A blue zigzag line going up-down-up-down — open at both ends, no closing connection.
Breakdown:
- points=”20,180 100,20 200,180 300,20 380,180″
- Starts at bottom-left-ish
- Goes up to near top, down again, up, down to end
- fill=”none” → no inside fill (very important for open shapes!)
- stroke=”blue” stroke-width=”6″ → makes the lines visible and thick
- Zoom browser — stays perfectly sharp!
3. All Important Attributes (Full Class Notes Style)
| Attribute | Meaning | Required to See? | Default | Example values | Notes |
|---|---|---|---|---|---|
| points | List of x,y coordinate pairs | Yes | — | “0,100 50,25 100,75 150,0” | Space separated pairs, comma inside |
| stroke | Color of the line segments | Yes (usually) | none | red, #00ff00 | Without stroke = invisible! |
| stroke-width | Thickness of lines | No | 1 | 4, 10 | In user units |
| fill | Fill color (inside if closed-ish) | No | black | none, yellow | Set to “none” for open polylines |
| stroke-linecap | Style of line ends | No | butt | round, square | “round” looks smooth |
| stroke-linejoin | Style of joins/corners | No | miter | round, bevel | Controls sharp corners |
| stroke-dasharray | Dashed/dotted pattern | No | — | “10 5”, “5 5 10” | Dash-gap pattern |
| opacity | Transparency for whole polyline | No | 1 | 0.7 | Affects stroke + fill |
4. More Real & Useful Examples (Try These!)
Example 1: Simple Graph Line (Like Stock Chart)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<svg viewBox="0 0 300 200" width="300" height="200"> <polyline points="20,180 60,140 100,160 140,90 180,120 220,50 260,110 280,30" fill="none" stroke="green" stroke-width="4" stroke-linecap="round" /> </svg> |
→ Wavy upward trend line (open path)
Example 2: Dashed Open Shape (Like Outline Path)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<polyline points="50,50 100,150 200,50 250,150 300,50" fill="none" stroke="purple" stroke-width="8" stroke-dasharray="12 6" /> |
→ Dashed zigzag
Example 3: Hover Effect with CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .my-polyline:hover { stroke: orange; stroke-width: 12; stroke-dasharray: none; } </style> <svg width="300" height="200"> <polyline class="my-polyline" points="30,170 80,30 150,170 220,30 270,170" fill="none" stroke="navy" stroke-width="5"/> </svg> |
Hover → thicker solid orange line!
Example 4: Filled Polyline (Rare, but Possible – Looks Like Polygon)
|
0 1 2 3 4 5 6 |
<polyline points="100,20 180,100 100,180 20,100" fill="skyblue" stroke="black" stroke-width="4"/> |
→ If you fill it, browser treats it almost like a polygon (but still technically open — fill rule might vary slightly in some browsers)
5. Quick Comparison: <polyline> vs <polygon>
| Feature | <polyline> | <polygon> |
|---|---|---|
| Closes automatically? | No – open path | Yes – last point connects to first |
| Best for | Lines, plots, paths, open zigzags | Closed shapes (triangle, star, house) |
| Fill behavior | Usually “none” (no clear inside) | Fills the enclosed area nicely |
| Points needed | 2+ | 3+ |
| Common use | Graphs, diagrams, connectors | Icons, buttons, filled shapes |
6. Teacher’s Tips (Hyderabad Student Style 😄)
- Always set fill=”none” for typical polylines — otherwise browser might fill weirdly
- Stroke is king here — forget stroke color/thickness = invisible shape!
- For very complex paths (curves too) → use <path> instead (more powerful, but harder)
- Responsive websites: Use viewBox so polyline scales perfectly on mobile
- Common mistake: Copy polygon code → forget to change to polyline + set fill=”none” → looks closed but isn’t!
- Real jobs: Polylines great for data visualization (charts), SVG icons with strokes, animated drawing effects (stroke-dashoffset animation)
Understood polyline fully? Now tell me — want to see animated drawing polyline (like line growing)? Or polyline with markers (arrowheads)? Or full graph example with axes + polyline plot? Or move to <path> next (the king of SVG shapes)? Just say — we’re building your SVG mastery one shape at a time! 🚀
