How to svg stroke vs fill: rendering differences, plainly
- Step 1Identify whether your shape is open or closed — A closed shape (
circle,rect, apathending inZ) has an interior a fill can paint. An open shape (aline,polyline, or unterminatedpath) has none. This single property predicts what a colour-only stroke→fill will do: closed shapes get filled, open shapes disappear. - Step 2Check how the shape is currently painted — Look for
fill="none" stroke="…"(stroke-only — a conversion candidate) versusfill="…"with or without a stroke (already filled — the JAD tool will skip it). Strokes set via CSS class orstyle=""are invisible to the tool and won't convert. - Step 3Decide your real goal — Goal A: a stroke-width-independent filled OUTLINE that scales perfectly — that needs true geometric expansion (a vector editor), not this tool. Goal B: move a stroke colour onto fill so a fill-only pipeline renders your closed shapes — that is what the JAD tool does.
- Step 4For Goal B, run the JAD stroke-to-fill tool — Drop or paste the SVG. With no options to set, it rewrites stroke-only elements in one pass and reports
Elements converted. Preview the single result pane; there is no side-by-side before/after view. - Step 5Verify against the open/closed prediction — Closed shapes should now show a solid fill in the colour the stroke had. Open paths should be gone — if they are, that matches the model, not a bug. If you needed them visible, switch to true outlining.
- Step 6Optimise the chosen result — Whichever path you take, finish with svg-pro-minifier to strip redundant attributes, or svg-precision-tuner to trim coordinate decimals for smaller files.
Stroke vs fill rendering model
The core differences that decide whether converting helps you. 'CSS px' means the SVG user-unit as scaled to the viewport.
| Property | Stroke | Fill |
|---|---|---|
| What it paints | A band of width stroke-width centred on the path outline | The interior region the path encloses |
| Needs a closed shape? | No — works on open paths too (a visible line) | Yes — an open path encloses no area, so fill paints nothing |
| Behaviour under scaling | Width is in user units; relative weight shifts with render size; thin strokes hairline-out small | Scales proportionally — geometry-defined, looks identical at any size |
| Cap / join styling | stroke-linecap, stroke-linejoin, stroke-miterlimit shape the ends/corners | No such concept — corners are whatever the geometry is |
| Survives a colour-only stroke→fill move? | n/a (stroke is removed) | Closed shape: yes, becomes solid. Open path: no, becomes invisible |
What the JAD tool changes vs what it does not
A precise map of the attribute rewrite, so the comparison stays honest about the tool's reach.
| Aspect | Behaviour |
|---|---|
| Stroke colour | Copied onto fill, then the stroke attribute is removed |
stroke-width | Removed — not folded into any new geometry |
| Cap / join / miter attributes | Removed — no fill geometry is generated to mimic them |
| Open-path outlining (offset path) | NOT performed — this is the key gap versus a real outliner |
| Already-filled elements | Skipped — fill and stroke both preserved |
| Element scope | path, rect, circle, ellipse, polygon, polyline, line only |
Cookbook
Worked comparisons showing the same shape under each model, then what the JAD tool produces. Watch how open vs closed decides the outcome.
Why a thin stroke hairlines-out at small sizes
A 1-unit stroke on a 24-unit icon is ~4% of its width. Render that icon at 16px and the stroke is ~0.6 device px — sub-pixel, so it thins or shimmers. A fill of the same shape keeps its proportion at any size. This is the classic argument for fills in multi-size icon systems.
Stroked icon at three sizes (stroke-width=1, viewBox 0 0 24 24): rendered 16px → stroke ≈ 0.67 device px (sub-pixel, fragile) rendered 24px → stroke ≈ 1.00 device px (crisp) rendered 96px → stroke ≈ 4.00 device px (heavy) Same shape as a FILL: visual weight is constant relative to the icon at every size.
Closed shape: stroke→fill gives a solid version
A closed rectangle outline. Moving the stroke colour to fill produces a solid rectangle — useful if a downstream fill-only renderer ignored the stroke. The shape stays where it was; only the paint model changed.
Before (outline only):
<rect x="2" y="2" width="20" height="20"
fill="none" stroke="#111" stroke-width="2"/>
After JAD stroke-to-fill:
<rect x="2" y="2" width="20" height="20" fill="#111"/>
→ a solid black square (not a square outline).Open path: stroke→fill makes it disappear
The same operation on an open path. The line had no interior, so once the stroke is removed the fill paints nothing. This is the headline difference between a colour move and true outlining.
Before (a visible diagonal line):
<line x1="2" y1="2" x2="22" y2="22"
stroke="#111" stroke-width="2"/>
After JAD stroke-to-fill:
<line x1="2" y1="2" x2="22" y2="22" fill="#111"/>
→ nothing renders. A real outliner would emit a thin
filled quadrilateral 2 units wide along the diagonal.What true outlining would produce (for contrast)
To show the gap concretely: genuine stroke expansion of a 2-unit horizontal stroke yields a closed filled rectangle 2 units tall. The JAD tool does not compute this — it is what Inkscape's Stroke to Path or Illustrator's Outline Stroke do.
Stroke: M4 12 H20 with stroke-width=2 True expansion → a closed filled band: M4 11 H20 V13 H4 Z (fill, 2 units tall) JAD tool output (NOT this): <path d="M4 12 H20" fill="#…"/> → zero-area, invisible
Mixed icon: prediction by open/closed
A real icon mixing a closed frame and open detail strokes. Predict the result before running: closed frame survives as a solid block, open detail lines vanish. The converted count tells you how many elements the rule matched, not how many stayed visible.
<svg viewBox="0 0 24 24"> <rect ... fill="none" stroke="#333"/> → solid block <path d="M7 12 H17" fill="none" stroke="#333"/> → gone <path d="M7 16 H17" fill="none" stroke="#333"/> → gone </svg> Elements converted: 3, but only the rect is still visible.
Edge cases and what actually happens
Open paths vanish, closed paths solidify
By designThe single most important rendering consequence: after a colour-only stroke→fill, open paths (lines, arcs, unterminated paths) paint nothing because they have no interior, while closed paths become solid because their interior is now filled. Neither matches the visual outline you started with. This is inherent to moving paint without computing geometry.
Expecting weight-consistent outlines from the tool
Not providedThe whole appeal of fills for icons is weight consistency across sizes — but you only get that if the outline is genuinely expanded into a filled shape. The JAD tool does not expand; it moves colour. So it does not deliver the stroke-width-independent outline that the stroke-vs-fill argument promises. Use a vector editor for that.
Sub-pixel strokes look fine at design size, bad in production
Rendering caveatA stroke that is crisp in your editor at 100% can hairline-out at 16px favicon scale or shimmer during animation. That is a reason to PREFER fills — but it is a reason to outline properly, not to run a colour-only move that loses open detail. Verify your real target sizes before deciding.
Stroke applied via CSS not attributes
Not convertedIf the stroke comes from a <style> rule, a class, or inline style="stroke:…", the JAD tool's attribute read does not see it and the element is skipped — it stays a stroked shape. Inline the stroke as an attribute first if you need it converted.
vector-effect: non-scaling-stroke in play
Rendering caveatSome SVGs use vector-effect="non-scaling-stroke" so the stroke stays a fixed device width regardless of zoom — a different solution to the scaling problem than converting to fill. The JAD tool ignores this attribute and still removes the stroke; if you relied on non-scaling-stroke, converting changes the behaviour entirely.
Two-tone fill+stroke artwork
PreservedWhere a designer deliberately combines a fill with a contrasting stroke, the tool leaves it alone (it only acts on stroke-only elements). The stroke is not flattened into the fill — which is correct, because doing so would destroy the two-tone look.
Gradients or patterns referenced by stroke
Copied as-isA stroke="url(#grad)" value is copied verbatim to fill, so the fill then references the same gradient/pattern. That can work for a closed shape, but the gradient was authored to run along a stroke band, not fill an area, so it may look different than intended.
Comparing file size before deciding
ExpectedRemoving five stroke attributes per element usually shrinks the file slightly; the result panel shows original vs output bytes. But size is a poor reason to convert — the rendering change (open paths vanishing) dominates. Decide on appearance first, size second.
Frequently asked questions
What is the actual difference between an SVG stroke and a fill?
A stroke paints a band of stroke-width centred on the path; a fill paints the region the path encloses. Strokes can make open paths visible (a line has no interior to fill); fills cannot. Strokes keep their absolute width as the SVG scales, so their relative weight shifts and thin ones hairline-out at small sizes; fills scale proportionally and look identical at any size.
Why do designers convert strokes to fills for icons?
To get weight consistency across sizes and to satisfy fill-only pipelines (many icon-font generators and simple renderers ignore strokes). But genuine consistency requires the stroke to be expanded into a filled outline shape — a geometric operation. A colour-only move alone does not achieve it.
Does the JAD tool give me weight-consistent filled outlines?
No. It moves the stroke colour onto fill and deletes the stroke attributes; it does not compute an offset/outline path. Closed shapes become solid, open paths become invisible. For weight-consistent outlines, expand strokes in a vector editor first.
Will converting make my open line icons disappear?
Yes, if they are open paths. An open path has no interior, so once the stroke is removed its fill paints nothing. That is expected for a colour-only conversion. Closed shapes (rings drawn as circles, rectangle outlines) instead become solid blocks.
Is fill always better than stroke?
No. Stroke is the right tool for line art and any open geometry, and vector-effect: non-scaling-stroke solves the scaling-width problem without converting. Fill is better when you need a solid silhouette, multi-size weight consistency from a properly outlined shape, or compatibility with a fill-only consumer.
What does the tool keep and what does it remove?
It keeps the colour by moving it to fill, and removes stroke, stroke-width, stroke-linecap, stroke-linejoin, and stroke-miterlimit. Cap, join, and dash styling are not reconstructed in any form.
Why do thin strokes look fine in my editor but bad on the site?
Your editor renders at a large zoom where a 1px stroke is several device pixels. In production at small sizes the same stroke can be sub-pixel, causing thinning or shimmer. This argues for outlining strokes properly — not for a colour-only conversion that drops open detail.
Does it understand non-scaling-stroke?
No. It ignores vector-effect="non-scaling-stroke" and still removes the stroke. If you used that effect to keep a constant device-width stroke, converting changes the rendering model completely — re-evaluate whether you actually want to convert.
Can I see a before/after side by side in the tool?
Not as a split view. The result panel shows a single preview of the output, the Elements converted count, the Note about approximated geometry, and byte sizes. Use View SVG source to read the rewritten XML, and keep your original open separately to compare.
Which tools should I use for each goal?
For true outlining: Inkscape Path > Stroke to Path / Illustrator Outline Stroke. To then optimise: svg-pro-minifier or svg-precision-tuner. To recolour: svg-monochrome-converter or svg-css-variable-injector. To simplify already-polyline paths: svg-path-simplifier.
Is anything uploaded during the comparison/conversion?
No. The conversion runs in your browser via DOMParser / XMLSerializer; the result shows a 0 bytes uploaded badge. Only an anonymous run counter is recorded for signed-in users.
What tier is required?
The conversion tool's minimum tier is Developer, so Free and Pro accounts see an upgrade overlay. The educational comparison on this page is free to read; running an actual conversion needs the Developer plan.
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.