How do I swap SVG fill and stroke?

Click Swap fill & stroke. On each shape that already has both paints set, fill becomes the old stroke and stroke becomes the old fill. stroke-width does not change.

How is swap different from Convert SVG Fill to Stroke?

Fill → stroke is one-way: fill is cleared and the old fill is used as a stroke. Swap needs both paints and exchanges them, so a dark outline can become the fill.

Does swap outline the stroke into a filled path?

No. Geometry stays a single path or shape. Convert SVG Stroke to Path builds a filled outline from stroke-width.

What if fill or stroke lives in a style attribute?

The tool reads style="fill:…;stroke:…" as well as presentation attributes and writes the swapped pair back to the same place.

Swap SVG Fill and Stroke — Free Tool

FAQ

Quick answers

How do I swap SVG fill and stroke?: Click Swap fill & stroke. On each shape that already has both paints set, fill becomes the old stroke and stroke becomes the old fill. stroke-width does not change.
How is swap different from Convert SVG Fill to Stroke?: Fill → stroke is one-way: fill is cleared and the old fill is used as a stroke. Swap needs both paints and exchanges them, so a dark outline can become the fill.
Does swap outline the stroke into a filled path?: No. Geometry stays a single path or shape. Convert SVG Stroke to Path builds a filled outline from stroke-width.
What if fill or stroke lives in a style attribute?: The tool reads style="fill:…;stroke:…" as well as presentation attributes and writes the swapped pair back to the same place.

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

Swap SVG Fill and Stroke

Live preview