SVG Stroke to Fill Converter

Paste or upload an SVG and this tool rewrites every stroked outline as a filled path that draws exactly the same picture. The result looks identical, but nothing in it depends on the renderer's stroking engine any more — which is what makes it portable.

Why convert a stroke to a fill

A stroke is an instruction ("draw a 2px line along this path"), not a shape. Plenty of software either ignores that instruction or interprets it differently:

• Icon fonts and font editors (FontForge, Glyphs, svg2ttf) only accept closed filled contours — stroked paths come out blank.
• Cutting machines — Cricut, Silhouette, laser and vinyl cutters — cut the centreline of a stroked path instead of the outline of the drawn shape.
• Scaling changes a stroke's relative weight in some pipelines, so a logo thickens or thins when it's resized.
• CAD, embroidery digitisers and older print RIPs often drop strokes entirely.

Outlining the stroke first sidesteps all of it. It's the same operation Illustrator calls Object → Path → Outline Stroke, Inkscape calls Path → Stroke to Path, and Figma calls Outline Stroke.

How to use it

1. Drop an .svg file on the upload box, or paste the markup into the SVG Code field.
2. Pick a curve quality — how finely curves and arcs are chopped up before the stroke is offset. Coarse gives the smallest file; Fine gives the smoothest edges.
3. Set decimal places to trade file size against precision (2 is plenty for most artwork).
4. Choose pretty-printed or minified output, then copy or download the result.

What it handles

Paths, rectangles (including rounded corners), circles, ellipses, lines, polylines and polygons. Stroke width, colour, gradients (stroke="url(#…)"), opacity, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-dasharray and stroke-dashoffset are all reproduced, as are stroke properties inherited from a parent <g> or declared in a style="…" attribute. Transforms, clip paths, masks, filters and the viewBox are preserved.

What gets skipped

Stroked <text> needs the font's own outlines, which aren't in the file, so text is left alone. So are <use> references, vector-effect="non-scaling-stroke" (whose whole point is that it doesn't scale with the geometry), and stroke widths given in percentages or physical units. The summary table tells you how many elements were converted and how many were skipped, so nothing goes missing silently.

Why is the output file bigger?

A stroke is one short instruction; its outline is real geometry, and curved strokes need many points to describe. That's the trade. Lower the decimal places, choose the Coarse curve quality, or run the result through the SVG Optimizer to claw most of it back.

Is my file uploaded anywhere?

No. The conversion runs entirely in your browser — the file never leaves your machine. (The same conversion is also available on our API if you want to script it.)

What if I need something else?

To inspect or rewrite a single path's commands, use the SVG Path Visualizer. To turn the finished SVG into a raster image, use the SVG to PNG Converter.