How to automate svg stroke-to-fill conversion across large icon sets
- Step 1Call the batch conversion API — POST all stroke-based SVG files to /api/svg/to-code with mode: stroke-to-fill. The API returns a ZIP of all converted fill-path SVGs with the same filenames.
- Step 2Pass the expanded icons to an icon font tool — Upload the ZIP to Icomoon.io, Fontello, or use the svgtofont npm package. These tools require filled paths — the batch-converted output is immediately compatible.
- Step 3Add to your design system CI — After any icon update from the design team, run the stroke-to-fill conversion in CI before the icon font build step. This ensures the font is always built from correctly expanded paths.
Frequently asked questions
Does the API preserve stroke cap and join styles?+
Yes. stroke-linecap (round, butt, square) and stroke-linejoin (miter, round, bevel) are read from each element and correctly applied during path expansion. The visual result matches the original stroked rendering.
How do I verify the expanded paths look identical to the originals?+
Render both the original stroke SVG and the expanded fill SVG at your intended icon size (e.g., 24px) and compare. At exact rendering size, they should look pixel-identical.
What happens to stroke-dasharray during expansion?+
Dashed strokes (stroke-dasharray) are expanded into filled paths that represent each dash segment individually. The dashes become filled rectangles (or rounded shapes for round caps), giving an identical visual result.
Does the stroke-to-fill conversion affect viewBox?+
The viewBox remains unchanged. The filled paths are generated within the same coordinate space as the original strokes. No viewBox adjustment is needed after conversion.
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.