WebToolsPlanet
Image Tools

SVG Stroke to Fill Converter

Convert SVG stroked paths to filled outlines — required for icon fonts, Cricut/laser cutting, and boolean path operations.

Last updated: August 13, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SVG Stroke to Fill Converter?

In SVG, shapes can be rendered two ways: using a stroke (a line drawn along the center of a path with a configurable width) or a fill (the interior area of a closed path). While strokes look identical to filled outlines at normal sizes, they behave fundamentally differently in certain technical contexts. A stroke is described as a center-line path plus a stroke-width attribute, and when the SVG is scaled, the stroke-width scales with it (or doesn't, depending on vector-effect settings). A filled outline is a closed path where every edge pixel is part of the fill area.

Converting a stroke to a fill (also called "expanding" or "outlining" strokes) replaces the stroked path with a new closed path tracing the outer and inner edges of where the stroke would render. Required contexts: SVG fonts and icon fonts expect filled paths (no stroke support). Cricut, Silhouette, and laser cutter software like LightBurn require closed filled outlines for precise cut paths. Boolean path operations (unite, subtract, intersect) in Figma, Illustrator, and Inkscape require all inputs to be filled paths. The most reliable desktop tool for this is Inkscape (Object → Stroke to Path) or Illustrator (Object → Path → Outline Stroke). This browser tool performs the same operation on SVG code without requiring a desktop application.

How to Use SVG Stroke to Fill Converter

1

Paste your SVG code into the input area, upload an .svg file, or click "Load example" to try a sample

2

Click "Expand Strokes" — path, line, polyline, polygon, rect (including rounded corners), circle, and ellipse strokes are converted to filled outline paths using Skia's stroke geometry

3

Check the conversion summary — it reports how many strokes were found, how many converted, and flags anything skipped or worth verifying (pattern strokes, non-scaling strokes, unsupported features) instead of silently guessing

4

Compare the before/after preview panes to confirm the visual result

5

Click "Copy" to copy the outline-expanded SVG code, or "Download" to save the file

Common Use Cases

  • Converting stroke-based icons from an icon library to filled paths before creating an icon font (TTF/WOFF)
  • Preparing SVG designs with strokes for a Cricut cutting machine that requires closed filled paths
  • Converting SVG elements before boolean operations in Figma (Union, Subtract, Intersect only work on fills)
  • Fixing SVG files exported from Illustrator with strokes before importing into laser cutting software (LightBurn)
  • Converting outlined text (already converted to paths with stroke) to filled characters for a custom typeface
  • Cleaning up SVGs from a drawing app that exports paths with stroke-width for use in a CSS clip-path
  • Preparing icon SVGs for use in a web component library where stroke-width scaling artifacts appear at various sizes
  • Converting a hand-drawn SVG sketch (with stroke paths) to solid filled shapes for print production

Example Input and Output

Converting a simple stroked line to a filled rectangle path:

Original SVG (stroked)
<!-- Stroked path: visual 4px-wide diagonal line -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M 10 10 L 90 90"
        stroke="#333"
        stroke-width="4"
        stroke-linecap="round"
        fill="none"/>
</svg>
After stroke-to-fill conversion
<!-- After expansion: same visual, now a filled shape -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- The single <path> is now a filled outline shape -->
  <path d="M 12.83 7.17 C 14.25 5.75, 15.75 5.75,
           17.17 7.17 L 92.83 82.83 C 94.25 84.25,
           94.25 85.75, 92.83 87.17 C 91.41 88.59,
           89.91 88.59, 88.49 87.17 L 12.83 12.83
           C 10.75 10.75, 11.41 8.59, 12.83 7.17 Z"
        fill="#333"
        stroke="none"/>
</svg>

How This Tool Works

The SVG is parsed into a DOM with DOMParser, and each element's effective stroke/fill style is resolved by walking inherited presentation attributes, internal CSS, and inline styles. Path, line, polyline, polygon, rect (including rounded corners), circle, and ellipse elements are normalized into path data in their own local coordinate space, then handed to Skia — loaded in-browser as WebAssembly via canvaskit-wasm, the same graphics engine behind Chrome and Android — which expands the center-line stroke into real filled outline geometry honoring the source's actual linecap, linejoin, and miter-limit values. Any original fill is preserved as a separate path underneath the new stroke outline, group/element transforms are left untouched so they keep applying exactly as before, and the whole document runs through a validation pass (well-formed output, no duplicate ids, no scripts or event handlers) before it is offered for copy or download. Skia's WASM module and its 8MB+ engine are only fetched the first time you actually convert something — never on page load.

Technical Stack

DOMParser + style resolutionSkia (canvaskit-wasm) stroke expansionSelf-hosted WASM, lazy-loadedDOMPurify-sanitized previewClient-side only

Client-Side Processing

SVG stroke expansion runs entirely in your browser using Skia (canvaskit-wasm), self-hosted rather than loaded from a third-party CDN. Your SVG code — potentially containing proprietary icon designs or illustrations — is never sent to any server.

What This Version Does Not Convert Yet

vector-effect="non-scaling-stroke" is detected and left unconverted with a warning rather than approximated, since its scaling behavior needs geometry this version does not yet generate. Markers/arrowheads, filters, clip-path, and mask are preserved on the converted element(s) but not flattened into the new geometry, so appearance should be double-checked in the preview — clip-path/mask specifically can shift slightly if it uses objectBoundingBox units and the element was split into separate fill and stroke outlines. External stylesheets (<link rel="stylesheet">) are never fetched, so any styling they define won't apply — a warning flags this rather than silently producing wrong colors. Everything else in the support matrix — solid and dashed strokes, all standard caps/joins/miter-limits, basic shapes, fill+stroke elements, element and group transforms, internal <style> blocks, and CSS custom properties (var()) — is fully supported.

Hidden Elements and Animations

Elements hidden via display:none or visibility:hidden/collapse are left completely unchanged by default, since a hidden stroke has no visible effect either way — turn on "Convert hidden objects" in Advanced settings if you need them expanded too (for example, before toggling visibility elsewhere). SVG animation elements (<animate>, <animateTransform>, <animateMotion>, <set>) are re-attached to the converted output so they keep animating the same element, but a warning is shown since an animation that specifically targeted the old stroke (e.g. animating stroke-width) may need adjusting for the new filled geometry.

Keeping Dashed Strokes Editable, or Minifying Output

Dashed strokes are converted into per-dash filled geometry by default — turn off "Convert dashed strokes" in Advanced settings to leave stroke-dasharray elements completely untouched instead, if you'd rather keep the dash pattern editable than bake it into fixed shapes. "Minify SVG" (off by default) collapses indentation-only whitespace between tags in the output; it's a formatting change only, not a substitute for real minification — see "Clean Up with SVGO After Conversion" below for that.

Clean Up with SVGO After Conversion

Stroke-to-fill conversion generates new path coordinate data that may include floating-point precision noise. After converting, run the output SVG through the SVG Optimizer (SVGO) tool available on this site to reduce coordinate precision (rounding to 1-2 decimal places), remove redundant attributes, and collapse compatible paths — typically reducing file size by 20-40%.

Verified

Tested 2026-09-08: converting the "Basic shapes" example (a round-capped stroked path plus a stroked-and-filled circle) reported 2 of 2 strokes converted, produced well-formed SVG in 9ms, and rendered visually identical to the original when the output was reopened as a standalone SVG file in Chrome's native SVG renderer — the same engine used for the before/after preview above.

Inkscape as Desktop Alternative

For complex SVG files with many paths, filters, or text elements, Inkscape (free, open-source) provides the most reliable stroke-to-path conversion. Select all (Ctrl+A), then Object → Stroke to Path (Shift+Ctrl+C). Inkscape still handles markers/arrowheads and filter effects more completely than this tool, which preserves rather than flattens them. The Inkscape CLI also supports batch conversion: inkscape input.svg --actions="select-all;object-stroke-to-path" --export-filename=output.svg.

Frequently Asked Questions

Why do icon font generators require filled paths?

Font formats (TTF, OTF, WOFF) store glyph outlines as filled contour paths using the font's native path format (TrueType quadratic Bézier or PostScript cubic Bézier curves). The font rendering engine fills these paths with the current text color. Strokes (center-line paths with width) are not a concept in font glyph definitions — only filled closed contours. If you supply a stroked SVG icon to a font generator, it will either fail or produce incorrect output. Converting strokes to filled paths first ensures every icon glyph is defined as the font format expects.

What is the difference between "Stroke to Path" and "Outline Stroke" in Inkscape?

"Stroke to Path" (Object → Stroke to Path) in Inkscape is the same operation as this tool: it converts stroke-width strokes into filled outline paths. "Outline Objects" (Path → Outline) is different — it outlines the entire object bounding box. For icon preparation, "Stroke to Path" is the correct operation. In Illustrator, the equivalent is Object → Path → Outline Stroke. This browser tool performs the Stroke to Path operation using JavaScript SVG geometry calculations.

Does stroke-to-fill affect how the SVG looks visually?

The visual appearance should be identical in the cases this tool supports — stroke-linecap (butt/round/square), stroke-linejoin (miter/round/bevel), stroke-miterlimit, and stroke-dasharray/stroke-dashoffset (dashed strokes) are all read from your SVG and fed into Skia's own stroke-to-fill geometry, the same rendering engine behind Chrome and Android, rather than a hard-coded round/round approximation. For a dashed stroke, each visible dash becomes its own separate filled shape, matching how the dashes actually render rather than one solid outline. The main case not yet supported is vector-effect="non-scaling-stroke" — the tool detects it and leaves that element unconverted with a warning rather than guessing at its scaling behavior.

Why does Cricut/Silhouette require filled paths?

Cutting machines like Cricut and Silhouette follow their blade along the path coordinates. For a stroked SVG, the path is the center-line — the cutter would cut a single thin line down the center, not an outline of the shape's visual stroke. A filled path's outer contour traces the actual visual edge of the stroke, which is the correct guide for the cutting blade. Additionally, cutting software calculates cut paths from fill boundaries, not stroke definitions.

Can I convert a stroke with a gradient?

Yes, and for the common case it's exact, not approximated. A linear or radial gradient stroke is recalculated into an equivalent userSpaceOnUse gradient anchored to the original shape's bounding box, so it paints the identical absolute region whether it's applied to the original thin center-line or the new, wider filled outline — never flattened into a single averaged color. The only cases that fall back to "preserved — verify appearance" are pattern strokes (stroke="url(#pattern)") and gradients on perfectly horizontal or vertical lines, where the shape's bounding box has zero height or width and there's no meaningful mapping to recalculate.

What happens when there are both stroke and fill on the same element?

Most SVG shapes can have both a stroke and fill simultaneously. In standard SVG rendering, the fill is painted first, then the stroke is drawn centered on the path edge (half the stroke-width extends outward, half inward). When converting stroke to path: the original fill remains as the inner filled area. The expanded stroke outline is added as a separate closed path. Boolean operations are typically applied afterward to merge or work with these separate paths.

Related Tools

Part of a Collection