How do I scale SVG stroke with the path?

Set Factor and click Scale stroke+path. Path data (and basic shapes) are scaled about the viewBox center, and stroke-width is multiplied by the same factor.

Why does Scale Path by Factor make the stroke look thicker?

That tool rewrites d only. stroke-width stays in user units, so a 2× path with the same width looks twice as heavy. This page scales the width too.

Does this bake a transform attribute?

No. Coordinates and stroke-width are rewritten in place, same idea as Scale Path without Transform, plus the stroke weight.

Are dashed strokes scaled?

Yes. stroke-dasharray and stroke-dashoffset lengths are multiplied so the dash rhythm stays in proportion with the new size.

Scale SVG Stroke With Path — Free Tool

FAQ

Quick answers

How do I scale SVG stroke with the path?: Set Factor and click Scale stroke+path. Path data (and basic shapes) are scaled about the viewBox center, and stroke-width is multiplied by the same factor.
Why does Scale Path by Factor make the stroke look thicker?: That tool rewrites d only. stroke-width stays in user units, so a 2× path with the same width looks twice as heavy. This page scales the width too.
Does this bake a transform attribute?: No. Coordinates and stroke-width are rewritten in place, same idea as Scale Path without Transform, plus the stroke weight.
Are dashed strokes scaled?: Yes. stroke-dasharray and stroke-dashoffset lengths are multiplied so the dash rhythm stays in proportion with the new size.

Scale path by factor → Stroke width → Scale path, no transform → Stroke to path →

Privacy Terms

Source

Factor

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Scale SVG Stroke With Path

Live preview