Why is my SVG viewBox not working?

Common causes: the attribute is missing, the four numbers are invalid, or width/height alone drive sizing while viewBox is absent.

How do I fix a missing SVG viewBox?

Paste the file here and click Fix viewBox. The tool measures shapes and writes a valid viewBox automatically.

Yes. Zero or non-numeric sizes prevent predictable scaling. This tool replaces them with measured content bounds.

After repair, root width and height are removed so the new viewBox controls scaling cleanly.

FAQ

Quick answers

Why is my SVG viewBox not working?: Common causes: the attribute is missing, the four numbers are invalid, or width/height alone drive sizing while viewBox is absent.
How do I fix a missing SVG viewBox?: Paste the file here and click Fix viewBox. The tool measures shapes and writes a valid viewBox automatically.
Can invalid viewBox values break scaling?: Yes. Zero or non-numeric sizes prevent predictable scaling. This tool replaces them with measured content bounds.
Should I keep width and height if viewBox was missing?: After repair, root width and height are removed so the new viewBox controls scaling cleanly.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B