svgby garagemade

Outline stroke — convert an SVG stroke to fill

svgby garagemade
0,0browser-local
Drop an SVG to start
or pick a sample on the home page

Outlining a stroke — also called stroke to fill, stroke to path, or expand stroke — turns a stroked line into a filled shape that describes the same outline, so its look no longer depends on how a renderer draws strokes. Who needs it: icon sets shipped as fonts, SVGs for cutting machines (Cricut, Silhouette), and logos that must look identical across tools. It runs in your browser with real geometry — joins, caps, and curves handled properly, not a visual trick.

How to outline strokes in an SVG

  • Drop your SVG (or browse). It stays in your browser.
  • Click “Outline stroke”. Every stroked path becomes a filled path with the same outline.
  • Check the before/after preview — the appearance is unchanged.
  • Export the clean SVG.

Why convert stroke to fill

  • Consistent rendering: stroke rendering varies between engines; a filled outline does not.
  • Cutting machines and some tools ignore or mishandle strokes — they need fills.
  • Scaling: a filled outline scales without the stroke width drifting relative to the shape.
  • Font and icon pipelines often require outlined paths.

What it handles

  • Joins (miter, round, bevel), caps (butt, round, square), and dashes.
  • Curves and beziers, not just straight lines.
  • Elements with both a fill and a stroke — the fill is kept, the outlined stroke added on top.
  • Transformed elements — the outline is computed correctly in the element's own space.

Stroke to fill vs fill to stroke

  • Stroke to fill (a.k.a. outline stroke): what this page does — convert a stroke into a filled path. Common, well-defined.
  • Fill to stroke (recovering a centerline from a filled shape): the rare reverse. On the roadmap as a separate feature.

Frequently asked questions

Is “stroke to fill” the same as “outline stroke”?
Yes — two names for the same operation (also called stroke to path or expand stroke). This page does exactly that.
What does “outline stroke” mean?
It converts a line with a stroke width into a filled shape with the same outline, so the look no longer depends on stroke rendering.
Does this change how my SVG looks?
No. The outline matches the original; only the underlying path type changes from stroked to filled.
Does it handle curves and corners correctly?
Yes. It uses a real polygon-offset engine, so joins, caps, and bezier curves are handled — not a naive double outline.
Why would a cutting machine need this?
Cutting software often cuts along filled paths and ignores stroke width. Outlining strokes gives it the exact shape to cut.
My stroke uses a gradient — will it look the same?
Usually yes. In rare cases a gradient defined relative to the shape's bounding box can shift slightly, because outlining changes that box. Solid strokes are always exact.
I used non-scaling-stroke — what happens?
It gets baked at the current scale. That matches its purpose (staying constant on screen), just fixed in place.
Are my files uploaded?
No. The conversion runs in your browser. Nothing is sent to us.
Can I reverse it (fill back to stroke)?
That's a separate, harder operation (centerline tracing). It's on the roadmap.
Is it free?
Yes. No signup, no watermark.

Related tools