How to svg stroke vs. fill: understanding rendering differences
- Step 1Compare your stroke icon at different sizes — Render your stroke-based icon at 16px, 32px, and 64px. Note how the stroke weight changes proportionally — at 16px a 2-unit stroke looks fine; at 64px it may look too thick.
- Step 2Test the fill version at the same sizes — Convert to fill paths and render at the same sizes. The visual weight should be consistent — the outline reflects the intended stroke width proportionally at every size.
- Step 3Decide based on your icon size range — If your icons are only used at one fixed size, strokes are fine. If used across a range of sizes (16px to 256px), fill paths produce more consistent results.
Frequently asked questions
What is vector-effect: non-scaling-stroke?+
vector-effect: non-scaling-stroke keeps the stroke at a fixed pixel width regardless of SVG transform scaling. It's an alternative to path expansion — useful when you want consistent stroke width without converting to fills.
Do strokes scale differently when the SVG has a transform?+
Yes. SVG transforms (scale, rotate) affect path geometry but not stroke-width by default. A stroke-width: 2 on a path inside a scale(2) transform renders as a 4-unit-wide stroke — fills do not have this behavior.
What about half-pixel strokes causing blurry rendering?+
Strokes centred on a pixel-aligned path can cause anti-aliasing blur. A stroke-width: 1 on a path at integer coordinates renders cleanly; strokes on non-integer coordinates or half-pixel widths produce blurry renders.
Should new icon sets be designed with fills or strokes?+
Design choice depends on the aesthetic you want. Outlined (stroke) icons look modern and minimal; filled icons are bolder. Once you've chosen, converting strokes to fills at export time gives you the best of both worlds.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.