ImageToSVG

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

Try the converterFree online image to SVG toolHow to convertStep-by-step conversion guideSVG for webWeb developer SVG guideInkscape guideFree SVG editor reference

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