How do I convert SVG fill to stroke?

Click Fill to stroke. Each filled shape gets fill="none" and stroke set to the old fill. If stroke-width is missing, it is set to 2 so the outline is visible.

Is this the same as Convert SVG Stroke to Path?

No. Stroke to path expands the outline into a filled evenodd path (two contours). Fill to stroke only changes paint: one path, no new geometry.

How is Fill → stroke different from swapping fill and stroke?

Swap exchanges two existing paints. Fill to stroke is one-way and does not keep a fill, even if a stroke color was already there.

Will a gradient fill become a gradient stroke?

Yes. url(#…) fills are copied onto stroke. Convert Fill to currentColor if you need inheritance instead of an outline.

Convert SVG Fill to Stroke — Free Tool

FAQ

Quick answers

How do I convert SVG fill to stroke?: Click Fill to stroke. Each filled shape gets fill="none" and stroke set to the old fill. If stroke-width is missing, it is set to 2 so the outline is visible.
Is this the same as Convert SVG Stroke to Path?: No. Stroke to path expands the outline into a filled evenodd path (two contours). Fill to stroke only changes paint: one path, no new geometry.
How is Fill → stroke different from swapping fill and stroke?: Swap exchanges two existing paints. Fill to stroke is one-way and does not keep a fill, even if a stroke color was already there.
Will a gradient fill become a gradient stroke?: Yes. url(#…) fills are copied onto stroke. Convert Fill to currentColor if you need inheritance instead of an outline.

Swap fill & stroke → Stroke width → Stroke linecap → Stroke linejoin →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Convert SVG Fill to Stroke

Live preview