Why convert strokes to fills at all?

Browsers scale stroke-width along with the shape. A 2px stroke at 48px becomes 4px at 96px. Converting to a fill locks the line weight to the shape geometry, so the icon reads consistently at any size. It's also required by tools that can't render strokes — Figma sometimes warps them, CNC/laser cutters need closed paths.

Are the corners mathematically precise?

Close but not exact. We sample the path at stroke-width / 3 intervals, so very thick strokes on sharp corners show slight flattening. For icon-library precision, round-trip through a vector editor like Inkscape or Illustrator after conversion — both have proper geometric offset implementations.

Does this handle dashed strokes?

Not yet. Dasharray is ignored; the full path is traced as a solid line. If you need dashed-stroke conversion, first bake the dashes to geometry in a vector editor, then paste the result here.

Will this break my existing filled paths?

No. Elements without a stroke or with stroke="none" are ignored. Only stroked elements are replaced by their filled equivalent. Non-stroke attributes like transforms are preserved, although only on the root SVG.

SVG Stroke to Fill Converter

Convert SVG strokes to filled paths for reliable rendering.

Parsed and traced in your browser. Files never upload.

Input SVG

Output SVG

Original

Filled

—

Similar tools

Image Resizer

Resize images in your browser. Batch-friendly, privacy-preserving.

Image Cropper

Crop to any aspect ratio with preset social media sizes.

Image to Base64 Converter

Convert any image to a Base64 data URL for inline use.

What is an SVG Stroke to Fill Converter?

A stroke-to-fill converter takes an SVG where shapes are drawn as outlines (a path with stroke="black" stroke-width="2" and no fill) and returns an SVG where every outline has been replaced by a filled shape that traces the stroke. The visual output looks identical at the scale you rendered it, but the new file has important advantages: strokes no longer scale with the shape, the geometry can be unioned or subtracted in vector editors, and the result imports correctly into tools like Figma, Lottie, and CNC / laser-cutting software that only understand filled paths.

Why you might need this. A 2-pixel stroke on a 48×48 icon becomes a 4-pixel stroke at 96×96 — browsers scale the stroke-width along with the shape, which is rarely what designers want. Converting the stroke to a fill locks the line weight to the shape itself, so the 2-pixel stroke at 48px becomes 4 SVG units wide and stays at 4 units when scaled to 96px — effectively a 1-pixel relative stroke that looks consistent across sizes. For multi-weight icon sets, this is the only reliable way to deliver crisp, pixel- accurate icons.

How the conversion works. For each stroked element in your SVG, we parse the geometry, trace it in small steps using the browser's getPointAtLengthAPI, compute the perpendicular at each sample, and offset by half the stroke width in both directions. The two offset curves become the two sides of a new filled polygon, and their enclosure becomes the filled path that replaces the stroke. Line caps are emulated (butt by default, round via a capping arc). Closed shapes (circles, rectangles, closed paths) produce a ring — an outer path plus an inner hole using the even-odd fill rule.

Limitations. This is a browser-based approximation, not a full computational geometry engine. Very thick strokes on tight curves can show slight flattening at corners — true miter/bevel joins are not implemented. Fractional-pixel accuracy on highly detailed paths is bounded by our sampling step (stroke-width / 3). For production icon libraries, round-trip through a vector editor like Illustrator or Inkscape to clean any rough corners before shipping.

What shapes are supported. path, line, polyline, polygon, rect, circle, and ellipse. Transforms are respected. Fills (elements that are already filled and not stroked) are passed through unchanged — only the stroke component is converted. Gradients on strokes are not yet supported; we use the solid stroke colour as the fill colour.

How to convert SVG strokes to fills

Paste your SVG source into the input panel.
Click "Convert strokes" to run the trace.
Compare the previews — original vs filled.
Copy the output or download as .svg.

Features

Handles path, line, polyline, polygon, rect, circle, ellipse.
Respects stroke-width, stroke-linecap (butt / round), and stroke colour.
Closed shapes produce a ring (outer + inner hole via even-odd).
Preserves viewBox and size — visual output identical at the original scale.
Side-by-side previews so you can compare before committing.
Runs entirely in your browser. No uploads.

Frequently asked questions

Why convert strokes to fills at all?: Browsers scale stroke-width along with the shape. A 2px stroke at 48px becomes 4px at 96px. Converting to a fill locks the line weight to the shape geometry, so the icon reads consistently at any size. It's also required by tools that can't render strokes — Figma sometimes warps them, CNC/laser cutters need closed paths.
What shapes are supported?: path, line, polyline, polygon, rect, circle, and ellipse. All are converted to paths internally, traced, and offset. Transforms on the source are preserved.
Are the corners mathematically precise?: Close but not exact. We sample the path at stroke-width / 3 intervals, so very thick strokes on sharp corners show slight flattening. For icon-library precision, round-trip through a vector editor like Inkscape or Illustrator after conversion — both have proper geometric offset implementations.
Does this handle dashed strokes?: Not yet. Dasharray is ignored; the full path is traced as a solid line. If you need dashed-stroke conversion, first bake the dashes to geometry in a vector editor, then paste the result here.
Will this break my existing filled paths?: No. Elements without a stroke or with stroke="none" are ignored. Only stroked elements are replaced by their filled equivalent. Non-stroke attributes like transforms are preserved, although only on the root SVG.