When should I change an SVG viewBox?

After moving or resizing artwork, an old viewBox (for example 0 0 24 24) may no longer match. Change it to the current bounds.

How do I change the viewBox without hand-editing numbers?

Paste the SVG and click Change viewBox. Measured bounds replace the previous viewBox automatically.

If layout depended on root width/height, prefer styling via CSS on the svg element. This tool removes those root size attributes on purpose.

Calculate emphasizes producing exact numbers from scratch. Change targets replacing an existing outdated viewBox after the art moved.

FAQ

Quick answers

When should I change an SVG viewBox?: After moving or resizing artwork, an old viewBox (for example 0 0 24 24) may no longer match. Change it to the current bounds.
How do I change the viewBox without hand-editing numbers?: Paste the SVG and click Change viewBox. Measured bounds replace the previous viewBox automatically.
Will changing viewBox break CSS that sized the icon?: If layout depended on root width/height, prefer styling via CSS on the svg element. This tool removes those root size attributes on purpose.
Is change different from calculate?: Calculate emphasizes producing exact numbers from scratch. Change targets replacing an existing outdated viewBox after the art moved.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B