How do I fix an SVG viewBox online?

Paste your SVG, then click Fix viewBox. The tool measures the artwork, writes a matching viewBox, and removes root width and height.

What makes an SVG viewBox “broken”?

A viewBox is broken when it does not match the drawn content — for example content sits outside the box, or the box is far larger than the graphic.

No. Coordinates in path and shape elements stay the same. Only the root viewBox is recalculated and size attributes are removed.

Root width/height can fight the viewBox in CSS layouts. Keeping viewBox alone usually scales more predictably.

FAQ

Quick answers

How do I fix an SVG viewBox online?: Paste your SVG, then click Fix viewBox. The tool measures the artwork, writes a matching viewBox, and removes root width and height.
What makes an SVG viewBox “broken”?: A viewBox is broken when it does not match the drawn content — for example content sits outside the box, or the box is far larger than the graphic.
Does fixing the viewBox change path data?: No. Coordinates in path and shape elements stay the same. Only the root viewBox is recalculated and size attributes are removed.
Why remove width and height when fixing viewBox?: Root width/height can fight the viewBox in CSS layouts. Keeping viewBox alone usually scales more predictably.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B