How to expand svg strokes into filled paths for perfect scaling
- Step 1Upload your stroke-based SVG — Drop a stroke-based icon — typically designed with stroke-width and no fill. Identify it by looking for elements with fill='none' and a stroke attribute.
- Step 2Review the expanded paths preview — The tool shows the expanded fill version alongside the original. Verify that the stroke weight looks correct and cap/join styles are preserved.
- Step 3Download the filled SVG — Download the converted SVG. The output uses only filled paths — no stroke attributes remain. It is now suitable for icon font tools and consistent multi-size rendering.
Frequently asked questions
Why convert strokes to fills?+
Stroke-based icons appear inconsistent when scaled — a 1px stroke looks different at 16px vs. 64px. Converting to fills makes the rendered weight consistent at any size, which is essential for icon systems.
Does this support all stroke styles?+
Yes. The tool handles stroke-linecap (round, butt, square), stroke-linejoin (miter, round, bevel), stroke-dasharray (dashed strokes), and stroke-width. All stroke properties are correctly expanded into the fill path.
Is this required for icon fonts?+
Yes. Icon font generators require filled paths. Converting strokes to fills is a mandatory step before generating .ttf or .woff icon fonts from SVG sources.
Is this a Developer tier feature?+
Yes. Stroke-to-fill path expansion requires WASM-based path geometry computation — available exclusively on 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.