How do I outline an SVG with a stroke?

Set Width and click Add outline. Every filled shape keeps its fill and receives a stroke. If it had no stroke, one is added at #0f172a.

How is this different from Convert SVG Fill to Stroke?

Fill to stroke clears the fill and uses the old fill as the outline. This page keeps the fill and draws a stroke on top — a border, not a hollow icon.

Is outline-with-stroke the same as Convert SVG Stroke to Path?

No. Stroke to path expands the outline into filled geometry (two contours). Outline with stroke only writes stroke and stroke-width; the path data does not change.

Will an already-stroked shape lose its color?

No. An existing stroke color is kept. Only missing strokes get the default dark outline, and Width is applied.

Outline SVG With Stroke — Free Tool

FAQ

Quick answers

How do I outline an SVG with a stroke?: Set Width and click Add outline. Every filled shape keeps its fill and receives a stroke. If it had no stroke, one is added at #0f172a.
How is this different from Convert SVG Fill to Stroke?: Fill to stroke clears the fill and uses the old fill as the outline. This page keeps the fill and draws a stroke on top — a border, not a hollow icon.
Is outline-with-stroke the same as Convert SVG Stroke to Path?: No. Stroke to path expands the outline into filled geometry (two contours). Outline with stroke only writes stroke and stroke-width; the path data does not change.
Will an already-stroked shape lose its color?: No. An existing stroke color is kept. Only missing strokes get the default dark outline, and Width is applied.

Fill → stroke → Stroke to path → Stroke width → Swap fill & stroke →

Privacy Terms

Source

Width

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Outline SVG With Stroke

Live preview