Skip to main content
FromSVG LogoFromSVG
Back to Tools

Convert Fill to Stroke

Convert solid shape fills into outlined stroke borders.

Input

Drag & drop SVG

Drop a .svg file here, click to browse, or paste raw markup below.

input.svg

Output

Result will appear here

Browser-local SVG Processing

The Convert Fill to Stroke utility processes SVG content in your browser. The raw SVG is not uploaded for processing; actual processing time depends on the file and your device. See the Privacy Policy for normal website requests and hosting logs.

About Convert Fill to Stroke

Transform solid filled shapes into outlined vector paths by reassigning fill colors to stroke attributes (`stroke = fill; fill = 'none'`). You can specify a custom stroke-width value to control outline thickness. Perfect for turning solid flat icons into modern line-art wireframes and outlined icon variants.

How It Works

01

Paste your SVG.

02

Set target stroke width.

03

Download the outlined SVG.

Outline conversion notes

Convert Fill to Stroke turns filled shapes into outline-oriented SVG by moving fill values to strokes and applying a chosen stroke width. It is useful for line-art variants, but a filled shape’s visual silhouette is not always preserved by a simple fill-to-stroke mapping.

What this tool does

  • Uses supported fill colors as stroke colors and sets the fill to none.
  • Applies a configurable stroke width to the converted elements.
  • Keeps the original path geometry so the result remains editable as SVG markup.

Review before publishing

  • A stroke follows the path centerline and may not reproduce the original filled silhouette.
  • Joins, caps, clipping, and stroke width can change the visual bounds of the artwork.
  • Shapes without useful fill values or with complex paint servers should be reviewed individually.

Filled input

<path fill='#2563eb' d='M2 2h8v8H2z'/>

Outlined result

<path fill='none' stroke='#2563eb' stroke-width='1.5' d='M2 2h8v8H2z'/>

Frequently Asked Questions

Can I set stroke width?

Yes, configurable stroke-width values apply to converted shape outlines.

What happens to existing strokes when converting fills?

Fills are reassigned as strokes (`stroke = fill; fill = 'none'`) and stroke-width is applied.

Is this useful for creating vector wireframes and icon outlines?

Yes, it turns solid flat icons into lightweight outlined vector wireframes.

Related Vector Utilities

View all 39 tools
SVG to ReactConvert

Generate a production-ready React component.

SVG to SolidConvert

Convert SVG to a SolidJS component.

SVG to VueConvert

Convert SVG to a Vue SFC component.

SVG to SvelteConvert

Convert SVG to a Svelte component.