How to convert an SVG stroke to a fill

Every way to outline a stroke, from the design apps to a command line, and what goes wrong when it's done badly.

Why a developer is asking for this

A stroke is a rendering instruction: "draw this path with a 1.5 unit line". Plenty of tools only understand shapes. Icon-font builders like IcoMoon, CSS mask-image, cutting machines, some Android and iOS pipelines, and any workflow that wants a single fill="currentColor" all need the outline of that line as a real filled path. Converting is called outlining, expanding or "stroke to path" depending on the app.

In the browser, without installing anything

Drop the file on Outline Stroke. It uses Skia, the engine Chrome draws with, keeps currentColor, dashes, opacity and your groups and ids, and shows a pixel-by-pixel match against the original so you know it still looks the same. Nothing is uploaded.

Be careful with the other free converters that rank for this search. In our benchmark, two of the three most popular simply swap the word stroke for fill, which turns a play button into a solid rectangle, and the third re-traces the icon as a single black shape, losing colours and opacity.

Adobe Illustrator

Select the path, then Object → Path → Outline Stroke. To keep a copy of the live stroke, duplicate the layer first. Export with File → Export → Export As → SVG, styling set to "Presentation attributes" and "Minify" on, otherwise you get a <style> block with .st0 class names that collide when icons are inlined together.

Figma

Select the layer, then Object → Outline Stroke, or Shift + Cmd + O (Shift + Ctrl + O on Windows). Figma flattens strokes on export too if you tick "Outline text" and use "Include id attribute" sparingly, but converting before export gives you a chance to check the result.

Inkscape

Select the path, then Path → Stroke to Path (Ctrl + Alt + C). If the shape also had a fill, Inkscape leaves you with a group of two objects: the fill and the new outline. Save as "Plain SVG" rather than "Inkscape SVG" to drop the editor namespaces.

Affinity Designer and Sketch

Affinity: Layer → Expand Stroke. Sketch: Layer → Combine → Flatten after Layer → Convert to Outlines. Both apps add their own namespace to the SVG on export; the Icon Set Audit flags those so they can be removed.

Whole folders, in CI

The command-line version of Outline Stroke runs the same engine over a folder and can verify every result:

npx iconlint fix --outline icons/ --verify

Add the audit as a GitHub Action and a pull request fails when a new icon doesn't match the set.

What goes wrong, and how to check

• The middle fills in. A closed stroked shape becomes two contours, and the inner one must be a hole. If the converter ignores the fill rule, the hole fills. Look for fill-rule="evenodd" or correctly wound contours in the result.
• Dashes drift. Dash patterns are measured along the path. Converters that measure coarsely put later dashes in the wrong place, most visibly on circles.
• Colour becomes black. Anything that rasterises and re-traces loses colours, opacities and separate shapes.
• currentColor becomes #000000. Then the icon can't be themed from CSS any more. The output should still say currentColor wherever the input did.
• Groups and transforms vanish. Fine visually, but the developer's CSS selectors and the designer's structure are gone.

The quickest check is to open the original and the result side by side at a large size, and to make sure no live stroke attributes are left on the shapes. Outline Stroke does both for you on every file.