Chapter 17: SVG Stroke
SVG Stroke
This is the second half of coloring in SVG (the first half was fill which we covered earlier). If fill paints the inside of shapes, then stroke paints the outline / border / edge of the shape.
Think of it like this:
- fill = coloring inside the lines of a coloring book
- stroke = actually drawing the black lines themselves
I’m going to explain it slowly and clearly, like we’re sitting together building stylish outlines step by step.
What is stroke in SVG?
stroke = the color, thickness, style, and ending details of the border around (or along) any SVG shape or path.
It applies to almost everything:
- <rect>, <circle>, <ellipse>, <polygon>, <path>
- <line>, <polyline> (they only have stroke — no fill makes sense)
- <text> and <textPath> (outline around letters!)
Default value: none (no visible stroke unless you set it)
Most important stroke properties
| Property | What it controls | Common values | Default | Super useful? |
|---|---|---|---|---|
| stroke | Color of the outline | #333, red, currentColor, url(#grad) | none | ★★★★★ |
| stroke-width | Thickness of the line | 1, 4, 10, “2px”, “0.5em” | 1 | ★★★★★ |
| stroke-opacity | Transparency of only the stroke | 0 to 1 (0 = invisible, 1 = opaque) | 1 | ★★★★☆ |
| stroke-linecap | Shape of the line endings | butt / round / square | butt | ★★★★☆ |
| stroke-linejoin | Shape of corners / joins | miter / round / bevel | miter | ★★★★☆ |
| stroke-dasharray | Creates dashed / dotted lines | “5”, “10 5”, “3 6 10 6” | none | ★★★★★ |
| stroke-dashoffset | Shifts where the dash pattern starts | number (positive or negative) | 0 | ★★★☆☆ |
You can set these as attributes on the element or as CSS properties.
Example 1 – Basic stroke on shapes
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<svg width="500" height="220" style="border:1px solid #eee; background:#f9f9f9;"> <rect x="40" y="40" width="120" height="120" fill="none" stroke="#2196F3" stroke-width="12"/> <circle cx="280" cy="100" r="70" fill="none" stroke="#F44336" stroke-width="20"/> <polygon points="150,180 200,40 250,180" fill="none" stroke="#4CAF50" stroke-width="16"/> </svg> |
Example 2 – stroke-linecap (line endings – very visible on open paths)
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 |
<svg width="500" height="180"> <defs> <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"> <path d="M0,0 L0,6 L9,3 z" fill="#FF5722"/> </marker> </defs> <!-- butt (default – square cut) --> <line x1="60" y1="50" x2="440" y2="50" stroke="#333" stroke-width="20"/> <!-- round --> <line x1="60" y1="90" x2="440" y2="90" stroke="#673AB7" stroke-width="20" stroke-linecap="round"/> <!-- square --> <line x1="60" y1="130" x2="440" y2="130" stroke="#009688" stroke-width="20" stroke-linecap="square" marker-end="url(#arrow)"/> <!-- arrow ignores cap style --> </svg> |
Here are visual differences of the three cap styles:
- butt: flat cut at exact end point
- round: half-circle cap (great for dotted lines)
- square: square cap extending half the stroke-width beyond end
Example 3 – stroke-linejoin (corners)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<svg width="500" height="220"> <polyline points="60,60 140,160 220,60 300,160 380,60 460,160" fill="none" stroke="#FF9800" stroke-width="30"/> <polyline points="60,180 140,100 220,180 300,100 380,180" fill="none" stroke="#E91E63" stroke-width="30" stroke-linejoin="round"/> </svg> |
- miter (default) → sharp point (can get very long on sharp angles)
- round → smooth rounded corners
- bevel → flat cut at 45°
Example 4 – Dashed & dotted lines (stroke-dasharray magic)
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 |
<svg width="500" height="240"> <!-- Solid --> <line x1="40" y1="40" x2="460" y2="40" stroke="#333" stroke-width="6"/> <!-- Long dashes --> <line x1="40" y1="80" x2="460" y2="80" stroke="#2196F3" stroke-width="6" stroke-dasharray="15 10"/> <!-- Dotted --> <line x1="40" y1="120" x2="460" y2="120" stroke="#F44336" stroke-width="6" stroke-dasharray="2 8" stroke-linecap="round"/> <!-- Dash – dot – long dash pattern --> <line x1="40" y1="160" x2="460" y2="160" stroke="#4CAF50" stroke-width="6" stroke-dasharray="20 5 5 5"/> <!-- Marching ants effect (animated later with JS/CSS) --> <line x1="40" y1="200" x2="460" y2="200" stroke="#FF5722" stroke-width="4" stroke-dasharray="8 4" stroke-dashoffset="0"/> </svg> |
Example 5 – stroke + fill together + currentColor
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> .btn:hover { color: #FFEB3B; } </style> <svg width="240" height="100"> <a href="#" class="btn"> <rect x="20" y="20" width="200" height="60" rx="12" fill="#673AB7" stroke="currentColor" stroke-width="8"/> <text x="120" y="65" font-size="32" text-anchor="middle" fill="white"> Click Me </text> </a> </svg> |
Hover → stroke color changes with parent color!
Quick Cheat Sheet
| Goal | Use this… |
|---|---|
| Visible border | stroke=”#333″ + stroke-width=”4″ |
| No border | stroke=”none” |
| Rounded ends (good for dots) | stroke-linecap=”round” |
| Smooth corners | stroke-linejoin=”round” |
| Dashed line | stroke-dasharray=”10 5″ |
| Dotted line | stroke-dasharray=”1 6″ + stroke-linecap=”round” |
| Outline only (no fill) | fill=”none” |
Common beginner mistakes
- Forget stroke color → nothing visible even with stroke-width
- Set stroke on filled shape but want only border → add fill=”none”
- Very thin stroke on huge shape → looks invisible (use relative units or bigger number)
- Dasharray pattern too long/short → experiment with numbers!
- Expect stroke to affect text inside <text> → text uses its own stroke
Mini practice for you
- Draw a red circle with a thick dashed border (stroke-dasharray)
- Create three horizontal lines: one with round caps, one square, one butt — different colors
- Make a button-like rectangle with thick rounded stroke and no fill (outline button)
Paste your code here if you want feedback — I’ll review it like we’re pair-coding 😄
Any part still confusing? Dasharray patterns? linecap vs linejoin? currentColor with stroke? Just tell me — we’ll zoom in with more examples until it’s super clear! 🚀
