Chapter 18: SVG Stroke
SVG Stroke means everything related to the border / outline / edge of your SVG shapes (line, rectangle, circle, ellipse, polygon, polyline, path, text, etc.).
Think of it this way:
- fill = inside color / pattern
- stroke = the line that draws the border around the shape (or the entire line if it’s a <line> or <path> with no fill)
Without stroke, many shapes (especially open ones like lines and paths) become invisible!
1. The Main Stroke Attributes (The Most Important Ones)
| Attribute | What it controls | Default value | Most common examples | Required to see border? |
|---|---|---|---|---|
| stroke | Color of the border | none | red, #000, currentColor, url(#grad) | Yes – no stroke = no border! |
| stroke-width | Thickness of the border | 1 | 2, 5, 10, 0.5 | Almost always set it |
| stroke-opacity | Transparency of stroke only | 1 | 0.6, 0.8 | Optional |
| stroke-linecap | How the end of the line looks | butt | butt, round, square | Great for arrows |
| stroke-linejoin | How corners / joins look | miter | miter, round, bevel | Important for polygons |
| stroke-dasharray | Dashed / dotted pattern | none | “5 5”, “10 3 2”, “20 10 5 5” | Very popular |
| stroke-dashoffset | Where the dash pattern starts | 0 | 10, -5, 50% | Used for animation |
2. Your First Stroke Example – Basic Border (Copy-Paste Now!)
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 Stroke Basics</title> </head> <body> <h1>Stroke makes shapes visible!</h1> <svg width="400" height="300" viewBox="0 0 400 300" style="border:1px solid gray;"> <!-- Rectangle with nice stroke --> <rect x="50" y="50" width="300" height="200" fill="none" stroke="purple" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/> </svg> </body> </html> |
What you see: A big purple rounded rectangle border — no fill, only stroke!
→ If you remove stroke=”purple”, the whole thing disappears!
3. Stroke-linecap – The End Cap Styles (Very Useful!)
Three options:
- butt (default) → flat cut at end
- round → soft rounded end (looks like a marker pen)
- square → square end, extends half stroke-width beyond
Example:
XML
|
0 1 2 3 4 5 6 7 8 |
<line x1="50" y1="50" x2="350" y2="50" stroke="blue" stroke-width="20" stroke-linecap="butt"/> <line x1="50" y1="100" x2="350" y2="100" stroke="blue" stroke-width="20" stroke-linecap="round"/> <line x1="50" y1="150" x2="350" y2="150" stroke="blue" stroke-width="20" stroke-linecap="square"/> |
→ Try it — see how ends change dramatically!
4. stroke-linejoin – Corner Styles (For Polygons & Paths)
- miter (default) → sharp pointed corner
- round → smooth rounded corner
- bevel → flat cut corner
Example with thick stroke:
XML
|
0 1 2 3 4 5 6 7 8 9 10 |
<polygon points="100,20 180,180 20,180" fill="none" stroke="orange" stroke-width="30" stroke-linejoin="round"/> |
→ Corners become nice and smooth instead of sharp spikes
5. Dashed Lines – stroke-dasharray (Most Asked in Interviews)
The numbers mean: dash length, gap length (repeat pattern)
XML
|
0 1 2 3 4 5 6 7 8 |
<line x1="20" y1="50" x2="380" y2="50" stroke="black" stroke-width="8" stroke-dasharray="10 5"/> <line x1="20" y1="100" x2="380" y2="100" stroke="black" stroke-width="8" stroke-dasharray="20 10 5 5"/> <line x1="20" y1="150" x2="380" y2="150" stroke="black" stroke-width="8" stroke-dasharray="1 10"/> |
→ First = long dash short gap → Second = long dash, medium gap, short dash, short gap → Third = dotted line
Pro tip: For marching ants effect (selection border), animate stroke-dashoffset
6. stroke-dashoffset Animation Example (Cool Effect!)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> @keyframes dash { to { stroke-dashoffset: -1000; } } .animated { animation: dash 15s linear infinite; } </style> <svg width="400" height="200"> <path d="M50 100 Q 200 20 350 100" fill="none" stroke="green" stroke-width="10" stroke-dasharray="30 10" stroke-dashoffset="0" class="animated"/> </svg> |
→ The dashes appear to move along the curve forever!
7. Stroke with Gradient or Pattern
Yes — stroke can be gradient too!
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<defs> <linearGradient id="grad"> <stop offset="0%" stop-color="yellow"/> <stop offset="100%" stop-color="red"/> </linearGradient> </defs> <circle cx="200" cy="100" r="80" fill="none" stroke="url(#grad)" stroke-width="20"/> |
→ Rainbow border!
8. Teacher’s Quick Summary Table (Exam Style)
| Goal | Attribute(s) you need | Typical value example |
|---|---|---|
| Make line visible | stroke + stroke-width | stroke=”black” stroke-width=”4″ |
| Rounded ends | stroke-linecap=”round” | For arrows, soft feel |
| Smooth corners | stroke-linejoin=”round” | Polygons, paths |
| Dashed line | stroke-dasharray | “5 5” = equal dash & gap |
| Moving dashes (marching ants) | stroke-dasharray + animate stroke-dashoffset | “20 10” + animation |
| Transparent border | stroke-opacity | 0.5 |
| Gradient border | stroke=”url(#myGrad)” | Very modern look |
9. Final Teacher Tips 😄
- Default stroke = none → always set stroke color for open shapes!
- Use currentColor when you want stroke to follow text/icon color
- Thick stroke + round join/cap = soft, friendly look
- Thin stroke + miter join = sharp, technical look
- Common mistake: Set fill=”none” but forget stroke → shape disappears
- Practice: Take any icon → remove fill, add thick stroke + round join → see new style!
Understood SVG stroke fully now? Want next: stroke animation project? stroke on text? Or combine fill + stroke + markers in one beautiful diagram? Just say — we’re making your SVG look professional! 🚀
