How to move an svg stroke colour onto fill, in the browser
- Step 1Confirm you actually need an attribute rewrite, not stroke expansion — If you want a thin stroked line turned into a closed, stroke-width-independent filled outline (true vector expansion), this tool will not do it — it copies colour, not geometry. Use a desktop editor's
Path > Stroke to Path(Inkscape) orObject > Path > Outline Stroke(Illustrator) for that. If instead your goal is to makefill="none"line shapes carry a fill colour so a fill-only pipeline renders them, continue. - Step 2Open the tool and drop or paste your SVG — Drop a single
.svgfile onto the upload area, or paste the SVG source into the text box below it. One file at a time (this tool is not multi-file). The Developer-tier per-job size limit is 2 GB; Free and Pro tiers are gated out of this tool by an upgrade overlay because its minimum tier is Developer. - Step 3Process — there is nothing to configure — Click Process SVG. There is no options panel for this tool: no tolerance, no cap/join setting, no colour picker. It walks the document once and rewrites every qualifying element using the rules above.
- Step 4Read the metrics and the preview — The result panel shows
Elements converted: N, aNotethat geometry is approximated, the original/output byte sizes, and a rendered preview of the result. There is a single preview of the output — not a side-by-side before/after. UseView SVG sourceto inspect the rewritten XML. - Step 5Sanity-check that thin lines did not vanish — Because no offset path is generated, an open
polylineorpaththat was only visible due to its stroke-width can become an almost-invisible zero-area fill. If your preview shows missing lines, that is expected behaviour — see the edge cases. Closed shapes (acirclewithfill="none" stroke="…") become solid discs, which is usually not what icon designers want either. - Step 6Download or copy, then hand off to the next tool — Download writes
<name>-filled.svg, or copy the source to clipboard. For genuine outlining, hand the original to a vector editor; to then clean the result, chain svg-pro-minifier or recolour with svg-monochrome-converter.
What happens to each element
The single decision the tool makes per element, based on its stroke and fill attributes. Applies to path, rect, circle, ellipse, polygon, polyline, line only.
| Element state | Action taken | Result |
|---|---|---|
stroke="#333" and no fill attribute | fill set to #333; stroke + stroke-width + stroke-linecap + stroke-linejoin + stroke-miterlimit removed | Converted (counted in Elements converted) |
stroke="#333" fill="none" | fill overwritten to #333; the five stroke attributes removed | Converted |
stroke="#333" fill="#fff" | Nothing — element already has a real fill | Left unchanged (stroke preserved) |
stroke="none" or no stroke attribute | Nothing — there is no stroke colour to move | Left unchanged |
<text>, <image>, <use>, <g>, gradients in <defs> | Not in the target element list — never inspected | Left unchanged |
Stroke attributes after conversion
Exactly which presentation attributes survive a conversion. This is why the tool cannot reproduce stroke geometry — the data describing it is deleted.
| Attribute | Kept or removed | Why it matters |
|---|---|---|
stroke (colour) | Removed (its value is copied to fill first) | The colour is preserved on fill; the stroke paint is gone |
stroke-width | Removed | No width is folded into geometry — thin lines lose their only source of visible area |
stroke-linecap | Removed | Round / butt / square cap shapes are not reconstructed as fill geometry |
stroke-linejoin | Removed | Miter / round / bevel corners are not reconstructed |
stroke-miterlimit | Removed | No miter geometry exists to limit |
stroke-dasharray / stroke-dashoffset | Not touched by name, but irrelevant once stroke is gone | Dashes are a stroke-only effect; they have no fill equivalent and are not rendered |
Cookbook
Real input → output XML so you can see exactly what the rewrite touches. The element count in the result panel matches the number of rows that changed.
A line icon: stroke colour moves to fill
The canonical case the tool is built for: a closed shape drawn with fill="none" and a stroke. The stroke colour lands on fill and the stroke attributes disappear. Note that a CLOSED shape becomes a solid fill — fine for a recolour pass, surprising if you expected an outline.
Input:
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9"
fill="none" stroke="#1f2937"
stroke-width="2" stroke-linejoin="round"/>
</svg>
Output (filename: <name>-filled.svg):
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9" fill="#1f2937"/>
</svg>
Metrics: Elements converted: 1
→ A solid disc, not a ring. No offset path was computed.An open stroked path collapses to near-nothing
An open path was only visible because of its 2px stroke. After conversion the stroke is gone and the fill of an open path has effectively zero area, so it can render invisible. This is the most important limitation to understand.
Input:
<path d="M4 12 L20 12" fill="none"
stroke="#000" stroke-width="2"
stroke-linecap="round"/>
Output:
<path d="M4 12 L20 12" fill="#000"/>
Result: an open polyline with fill paints no visible area —
the line disappears. True outlining (a filled 2px-wide
rectangle along the path) is NOT produced.Filled artwork is left completely alone
An element that already has a real fill is skipped entirely — both its fill and its stroke are preserved. This protects two-tone artwork where the designer uses fill plus a contrasting stroke on purpose.
Input:
<path d="M2 2 H22 V22 H2 Z"
fill="#fde68a" stroke="#b45309" stroke-width="1"/>
Output (identical — not converted):
<path d="M2 2 H22 V22 H2 Z"
fill="#fde68a" stroke="#b45309" stroke-width="1"/>
Metrics: Elements converted: 0Mixed document: only the stroke-only rows change
A realistic icon with several elements. The tool converts only the ones that have a stroke and no real fill; the rest pass through. The count reflects exactly what moved.
Input:
<svg viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28"
fill="none" stroke="#0ea5e9"/> <!-- converts -->
<line x1="8" y1="16" x2="24" y2="16"
stroke="#0ea5e9" stroke-width="2"/> <!-- converts -->
<circle cx="16" cy="16" r="3" fill="#0ea5e9"/> <!-- skipped -->
</svg>
Metrics: Elements converted: 2
(the rect + line; the already-filled circle untouched)currentColor strokes are copied verbatim
The tool copies the literal stroke value, whatever it is. currentColor is a string like any other, so it ends up on fill — which actually keeps CSS-driven theming working, since fill: currentColor inherits the element's color exactly as the stroke did.
Input:
<path d="M4 8 H20 M4 16 H20"
fill="none" stroke="currentColor" stroke-width="2"/>
Output:
<path d="M4 8 H20 M4 16 H20" fill="currentColor"/>
Theming via `color:` still works — but note the open
paths again paint no area (see the open-path example).Edge cases and what actually happens
Open path / polyline becomes invisible after conversion
By designAn open shape (a path that does not close, a polyline, a line) was visible only because of its stroke. Once stroke/stroke-width are removed and fill is set, the open geometry has no enclosed area to paint, so it disappears. The tool does not generate an offset outline. For visible outlining, run Stroke to Path in Inkscape or Outline Stroke in Illustrator on the original, then bring that result here only if you need a colour move.
Open shape designed with fill=none becomes a solid blob
By designA closed shape such as a ring drawn as <circle fill="none" stroke> becomes a solid disc, because the area that was empty is now filled. That is the literal consequence of copying stroke colour to fill without computing the band between inner and outer radius. If you wanted a ring, this tool is the wrong one.
Stroke styling — caps, joins, dashes — is discarded
By designstroke-linecap, stroke-linejoin, stroke-miterlimit are removed and stroke-dasharray becomes meaningless once stroke is gone. Round caps, bevelled corners, and dashed lines have no fill equivalent and are not reconstructed. Earlier marketing for this page claimed these were 'handled correctly' — they are not; they are deleted.
Stroke set via CSS class or inline style instead of attribute
Not convertedThe tool reads the stroke and fill presentation attributes via getAttribute. A stroke applied through a <style> rule, a class, or a style="stroke:…" inline declaration is not seen, so the element is skipped. Convert such files by first inlining the stroke as an attribute (a manual edit) before processing.
Stroke on a <g> group inherited by children
Not converted<g> is not in the target element list, and the tool does not resolve inherited presentation attributes. If stroke is set on a group and the children rely on inheritance with no stroke of their own, nothing is converted. Push the stroke down onto each shape element first.
Element already has a real fill
PreservedAny element whose fill is set to a real colour (not none) is skipped entirely — its fill and its stroke both survive. This is deliberate so two-colour artwork (fill plus a decorative stroke) is never silently flattened. If you wanted the stroke gone there too, remove it manually or use a recolour tool.
stroke="none" or no stroke attribute
PreservedWith no stroke colour to move, the element is left exactly as-is and is not counted in Elements converted. Processing a fully-filled SVG with no strokes is a safe no-op that returns the document unchanged (modulo serializer formatting).
Trying to call this tool over the JSON REST API
rejected (not server-safe)This tool is not in the server-safe set, so the API entry point throws: '...is not exposed via the API — it requires browser-side processing (DOM, Canvas, or remote-font fetch). Use the web tool.' It can only run in the browser tab or through the paired @jadapps/runner's headless-browser session — not via a plain server-side runSvgToolApi call.
Free or Pro account hits an upgrade overlay
rejected (tier gate)The tool's minimum tier is Developer, so Free and Pro users see a Pro/Developer upgrade overlay instead of the upload area. The size limit only applies once you can run it: 5 MB on Free, 50 MB on Pro, 2 GB on Developer — but Free/Pro never reach the limit here because the tier gate fires first.
Document with no stroke-only elements
ExpectedIf every shape is already filled or has no stroke, Elements converted reads 0 and the output equals the input. That is correct: the tool only acts on stroke-only elements, and it has nothing to do here.
Frequently asked questions
Does this tool really expand strokes into filled outline paths?
No. It performs an attribute rewrite: for elements with a stroke and no fill it copies the stroke colour to fill and deletes stroke, stroke-width, stroke-linecap, stroke-linejoin, and stroke-miterlimit. It does not compute an offset path, so it does not turn a thin stroked line into a closed, stroke-width-independent filled shape. True expansion needs a vector-geometry library, which this in-browser DOM rewrite is not — the result panel even carries a Note saying the geometry is approximated.
Why did my line icon disappear after converting?
Your shape was an open path or polyline that was only visible because of its stroke-width. After conversion the stroke is removed and an open path's fill paints no area, so it vanishes. This is expected. For a visible outline you need real stroke-to-path expansion in a vector editor (Inkscape Path > Stroke to Path, Illustrator Object > Path > Outline Stroke).
Why did my ring icon turn into a solid disc?
A ring drawn as <circle fill="none" stroke="…"> has no separate inner/outer geometry stored — only one circle. Copying the stroke colour to fill fills the whole circle, giving a solid disc. Reconstructing the band between two radii is exactly the offset-path computation this tool does not perform.
Does it handle stroke-linecap, stroke-linejoin, and dashes?
No — it removes them. stroke-linecap, stroke-linejoin, and stroke-miterlimit are deleted, and stroke-dasharray has no meaning once the stroke is gone. None of these stroke-only effects are reconstructed as fill geometry. Any earlier claim that caps and joins are 'handled correctly' is inaccurate.
Which elements does it process?
path, rect, circle, ellipse, polygon, polyline, and line. It does not touch <text>, <image>, <use>, <g> groups, or anything in <defs> such as gradients. Each qualifying element is evaluated independently on its own stroke and fill attributes.
Will it damage artwork that already uses a fill?
No. Any element with a real fill (anything other than none) is skipped entirely — both its fill and its stroke are left untouched. The rewrite only ever acts on elements that have a stroke and no fill, which is why two-tone icons survive intact.
Are there any options or settings?
None. There is no options panel, no tolerance, no cap/join control, and no colour picker. You drop or paste an SVG and click Process; the tool applies one fixed rule to the whole document.
Is my file uploaded?
No. Parsing and rewriting happen in your browser via DOMParser and XMLSerializer. The result panel shows a 0 bytes uploaded badge. The only server interaction is an anonymous usage counter for signed-in dashboard stats — never the file content.
What tier do I need, and how big can the file be?
The tool's minimum tier is Developer, so Free and Pro accounts see an upgrade overlay. On Developer the per-job file limit is 2 GB. (For reference the platform's Free limit is 5 MB and Pro is 50 MB, but those tiers can't open this tool.)
Can I run this in a batch / API pipeline?
Not via the JSON REST API — this tool is not server-safe and the API explicitly rejects it, directing you to the web tool. It can run in the browser or through the paired @jadapps/runner's headless-browser session. For a true offline batch you'd script a vector editor (Inkscape CLI) since you most likely want real stroke expansion, which this tool does not do.
What is the output filename and what do the metrics mean?
Download produces <name>-filled.svg. The metrics show Elements converted (how many stroke-only elements were rewritten) and a Note stating the geometry is approximated rather than offset-path-expanded, plus original/output byte sizes.
What should I use instead for genuine outlining?
For real stroke-to-path geometry: Inkscape's Path > Stroke to Path or Illustrator's Object > Path > Outline Stroke. Then, to optimise or recolour the genuinely-outlined result, chain svg-pro-minifier, svg-path-simplifier (polyline paths only), or svg-monochrome-converter.
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.