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: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

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, or upload an .svg file

2

Click "Expand Strokes" to process the SVG — all path, line, polyline, and rect strokes are converted to filled outline paths

3

Preview the result in the preview pane — the visual appearance should look identical to the original

4

If the result has unwanted inner fills (especially for round stroke ends), toggle "Remove Inner Paths" for a cleaner result

5

Click "Copy SVG" to copy the outline-expanded SVG code, or "Download SVG" 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>

Client-Side Processing

SVG stroke expansion is computed entirely in your browser using JavaScript geometry calculations. Your SVG code — potentially containing proprietary icon designs or illustrations — is never sent to any server.

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%.

Inkscape as Desktop Alternative

For complex SVG files with many paths, gradients, 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 handles edge cases like dashed strokes, markers, and gradient paints more accurately than browser-based tools. 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 — both the stroke and the expanded fill render the same pixels. However, there are edge cases: (1) stroke-linecap="round" creates semicircular caps; the filled equivalent is an arc path. (2) stroke-linejoin="round" creates rounded joins at path corners; the filled equivalent approximates this with Bézier curves. (3) stroke-dasharray (dashed strokes) — the filled equivalent creates separate closed paths for each dash segment. Most icon use cases don't involve dashes, so round caps and joins are the main consideration.
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?
Stroke gradients (stroke="url(#gradient)") are valid SVG but technically complex to expand while preserving the gradient. The expanded filled path's gradient would need to be respecified to cover the new geometry. This tool converts the stroke color to a fill using the stroke-paint value. Gradient strokes are converted using a solid color approximation (the gradient's averaged midpoint color). For gradient strokes, use Inkscape's Stroke to Path which preserves gradients more accurately.
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.

How This Tool Works

The SVG code is parsed into a DOM using DOMParser. All path, line, polyline, circle, rect, and ellipse elements with stroke attributes are identified. For each stroked element: the stroke geometry is computed by expanding the center-line path by stroke-width/2 on each side, applying linecap and linejoin calculations to end caps and corner joins. The resulting outer and inner contours form a closed fill-only path element. The original stroke attributes are removed and the new filled path element is inserted into the SVG DOM. The modified SVG is serialized back to a string for display.

Technical Stack

DOMParser SVG processingBézier stroke expansion mathSVG path geometry calculationLinecap/linejoin algorithmsClient-side only

Related Tools

Image Cropper
Crop, rotate, and resize images with preset aspect ratios — all locally in your browser with no quality loss.
Placeholder Image Generator
Generate placeholder images with exact dimensions, colors, and text — download as PNG or copy the URL for development.
Favicon Generator
Create favicons from text, emoji, or images — generates ICO, PNG, and all required Apple Touch icon sizes.
Base64 Image Encoder
Convert PNG, JPG, WebP, and SVG images to Base64 strings for direct embedding in HTML, CSS, or JSON payloads.
Image Converter
Convert images between PNG, JPG, WebP, and AVIF formats — with quality controls and batch conversion.
Image Compressor
Reduce image file size online — compress JPEG, PNG, and WebP without losing visible quality.