stroke="..." + stroke-width="N" and replaces them with filled outline paths that produce identical visual rendering — but as filled regions, not strokes. Necessary for laser cutters, CNC routers, vinyl plotters, embroidery machines, and any pipeline that scales SVGs without honouring stroke-width. Our free SVG stroke-to-fill tool uses the same path-offset algorithms as Inkscape and Illustrator’s “Stroke to Path” command.SVG paths can be rendered two ways: with a stroke (a line drawn along the path with a configurable width) or as a fill (the area enclosed by the path is filled with colour). Visually they can look identical — a 4px black stroke around a circle and a filled donut shape with the same dimensions render the same. But many pipelines that consume SVG ignore stroke entirely:
- Laser cutters (Glowforge, Epilog, AxiDraw): cut along path centerlines, but interpret fill as engraving area. A stroked path may be cut as the path itself with no width.
- CNC routers (vCarve, Carbide Create): treat stroke-width as visual decoration, not toolpath geometry.
- Vinyl plotters (Cricut, Silhouette): cut along paths; stroke-width has no effect on the cut.
- Embroidery digitisers: convert paths to stitches; strokes need explicit fill geometry.
- Some printers and PDF generators: round stroke-width to nearest pixel multiple at low DPI.
The fix: convert every stroke to a filled outline path before exporting. Our SVG stroke-to-fill converter does this automatically — paste your SVG, get back a version where every stroked path has been replaced with an equivalent filled outline. The visual rendering is unchanged in browsers but the geometry is now portable across every SVG-consuming pipeline.
When you need stroke-to-fill conversion
| Pipeline | Honours stroke-width? | Action |
|---|---|---|
| Web browser rendering | Yes | No conversion needed |
| Print PDF | Mostly | Convert if printing under 100 DPI |
| Laser cutter (Glowforge, Epilog) | No | Convert before export |
| CNC router (Shapeoko, Carbide) | No | Convert before export |
| Vinyl plotter (Cricut) | No | Convert before export |
| Embroidery (PE-Design) | No | Convert before export |
| Figma / Illustrator export | Yes | No conversion needed |
How the conversion works
The technique is path offsetting. For a path defined by a series of points, the offset path is a new path running parallel to the original at a constant distance (half the stroke-width) on each side. The two offset paths plus the rounded line caps form a closed outline — a filled region equivalent to the stroked line.
Edge cases that need careful handling:
- Line caps: butt, round, square. Each requires different geometry at the path endpoints.
- Line joins: miter, round, bevel. Where path segments meet, the corners need different treatments.
- Self-intersections: a path that crosses itself produces overlapping offset regions that need union-ing.
- Bezier curves: the offset of a Bezier isn’t itself a Bezier — it’s approximated with multiple Bezier segments.
Most converters (including ours) use the Clipper library or paper.js’s PathOffset algorithm — the same code Inkscape’s “Stroke to Path” command runs.
How to convert SVG strokes to fills
- Open the SVG stroke-to-fill converter
- Paste your SVG markup or upload an
.svgfile - The tool detects every stroked path and converts each to a filled outline
- Preview shows before/after side by side — should look visually identical
- Click Download for the converted SVG
Common gotchas
- Output is bigger. A filled-outline path has more points than the stroked version. File size typically grows 30–80%. For laser/CNC export this is fine; for web rendering, keep the stroked version.
- Anti-aliasing differs slightly. Browsers anti-alias strokes differently from filled paths. Visual difference is usually invisible but exists at the pixel level — zoom to 400% and you may see edge differences.
- Doesn’t simplify nested groups. If your SVG has nested
<g>groups with transforms, the conversion preserves the structure. Some legacy laser-cutter software trips on nested groups; flatten with a separate pass if needed. - Stroke-dasharray becomes dashed filled paths. Dashed strokes (
stroke-dasharray) convert to multiple separate filled segments. Visual is correct but the path count multiplies. - Round caps and joins add curve segments. A path with
stroke-linecap="round"gets quarter-circle Bezier curves at endpoints in the output. Visual unchanged; geometry slightly more complex. - Variable stroke widths aren’t standard SVG. If you’ve used a non-standard
stroke-width-variableextension (Illustrator’s variable-width strokes), the tool can’t reproduce that — it treats stroke-width as constant per path.
When NOT to use this tool
If your destination consumes SVG with full stroke support (modern browsers, Adobe Illustrator, Figma, Affinity), don’t convert — it bloats the file with no benefit. For web SVG, stroke-width is rendered correctly everywhere. For interactive SVG (paths animated with stroke-dasharray for “drawing” effects), don’t convert — you’ll lose the ability to animate the stroke offset. For SVGs you’ll edit later in a vector tool, keep strokes — they’re easier to manipulate than filled outlines. Use this tool only when exporting to a destination that ignores stroke-width.
Frequently asked questions
Why do I need to convert strokes for laser cutters?
Laser cutters cut along path geometry, not stroke decoration. A 4mm-wide stroked line in your design isn’t a 4mm-wide cut — the cutter follows the centerline of the path. To produce a 4mm-wide cut region, the geometry must be a filled 4mm-wide outline shape. Conversion makes the geometry match what the cutter sees.
Will the output look the same in a browser?
Yes — visually identical at typical viewing zoom. Browsers anti-alias strokes and fills slightly differently, so at 400%+ zoom you might see edge differences, but the rendered effect is the same.
Does it support all SVG features?
Most: line caps (butt, round, square), line joins (miter, round, bevel), dashed strokes, miter limits, transforms. It doesn’t handle: variable-width strokes (Illustrator extension), stroke alignment (Inkscape’s stroke-alignment=”inset/outset”), or pattern-based strokes. Those convert with imperfect approximations.
What’s the file-size penalty?
Typically 30–80% larger output. A 12 KB SVG with strokes becomes 18–22 KB after conversion. The growth comes from filled outlines having more path points than centerline strokes, especially with rounded line caps.
Is my SVG uploaded?
No. The converter runs in your browser. SVG markup is processed locally — never sent to our servers.
Can I batch-convert many SVGs?
For one or two files, this tool is fastest. For batch processing (50+ files), use Inkscape’s command line: inkscape --export-type=svg --export-text-to-path --export-area-page --export-stroke-to-path *.svg. Same algorithm, scriptable.
Related tools and guides
- SVG Stroke to Fill Converter
- SVG to PNG Converter
- SVG Pattern Generator
- SVG Blob Generator
- All image tools