How do I change SVG stroke width?

Enter a Width in user units (the same units as the viewBox) and click Set stroke width. Every element that already has a stroke is updated. Fill-only shapes are left alone.

Does this change stroke color?

No. Use Change SVG Stroke Color to pick a hue. This page only writes stroke-width, including inside style attributes.

Why didn’t a filled icon get an outline?

There was no stroke to resize. Convert SVG Fill to Stroke first if you need an outline, then set the width here.

Is stroke-width the same as converting stroke to a path?

No. Width stays a stroke attribute. Stroke to path bakes the thickness into filled geometry so the outline survives as fill.

Change SVG Stroke Width — Free Tool

FAQ

Quick answers

How do I change SVG stroke width?: Enter a Width in user units (the same units as the viewBox) and click Set stroke width. Every element that already has a stroke is updated. Fill-only shapes are left alone.
Does this change stroke color?: No. Use Change SVG Stroke Color to pick a hue. This page only writes stroke-width, including inside style attributes.
Why didn’t a filled icon get an outline?: There was no stroke to resize. Convert SVG Fill to Stroke first if you need an outline, then set the width here.
Is stroke-width the same as converting stroke to a path?: No. Width stays a stroke attribute. Stroke to path bakes the thickness into filled geometry so the outline survives as fill.

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

Privacy Terms

Source

Width

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Change SVG Stroke Width

Live preview