SVG Stroke vs Fill
SVG paths have two painting properties — fill (interior color) and stroke (outline color). Understanding both is fundamental to SVG design and coding.
Fill vs Stroke: Core Difference
Every SVG shape has interior area (fill) and outline (stroke) — styled independently.
- Fill: the interior color of a closed SVG path — fill='#e74c3c' or fill: red in CSS
- Stroke: the line drawn on the path edge — stroke='black' stroke-width='2'
- Both can be none, a solid color, a gradient, or a pattern
- Default: fill='black', stroke='none' for most browsers
- fill='none': transparent interior — shows only the outline if stroke is set
Common Stroke vs Fill Patterns
Real-world SVG design uses specific fill/stroke combinations for different effects.
- Outline icon: fill='none' stroke='currentColor' stroke-width='1.5' — modern icon library style
- Solid filled icon: fill='currentColor' stroke='none' — flat filled icon style
- Two-tone icon: fill='lightblue' stroke='darkblue' stroke-width='1' — outline + fill combination
- Hollow shape: fill='none' stroke='black' stroke-width='3' — ring/donut effect
- Ghost button: fill='transparent' stroke='white' — outline button SVG background
Frequently Asked Questions
What does fill='currentColor' mean in SVG?
currentColor inherits the CSS color property from the SVG element's parent. Set color: blue on the parent HTML element, and all paths with fill='currentColor' turn blue automatically — perfect for icon theming.
How do I make an SVG icon change color on hover?
Use fill='currentColor' in the SVG and control via CSS: .icon { color: gray; } .icon:hover { color: blue; }. The icon color follows the CSS color property — no need to target SVG attributes directly.
What is stroke-width in SVG?
stroke-width defines the thickness of the SVG outline in SVG user units (pixels by default). stroke-width='1.5' is common for thin icon outlines. stroke-width is centered on the path — half inside, half outside the path boundary.
Why does my SVG stroke appear inside or outside the shape?
SVG stroke is always centered on the path — half renders inside the shape boundary, half outside. To make stroke only inside: set clip-path to the shape. To make stroke only outside: use the paint-order: stroke fill property.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free