How is the SVG viewBox calculated?

The tool measures the combined bounding box of drawable elements, then writes min-x min-y width height with no extra padding.

Where do I see the calculated values?

After you click Calculate viewBox, the status line shows the applied viewBox string and the Source panel updates.

Yes. Paste markup here — measurement runs in the browser with no desktop app.

No. Root width and height are removed after the calculated viewBox is applied.

FAQ

Quick answers

How is the SVG viewBox calculated?: The tool measures the combined bounding box of drawable elements, then writes min-x min-y width height with no extra padding.
Where do I see the calculated values?: After you click Calculate viewBox, the status line shows the applied viewBox string and the Source panel updates.
Can I calculate viewBox without Illustrator?: Yes. Paste markup here — measurement runs in the browser with no desktop app.
Does calculation keep width and height attributes?: No. Root width and height are removed after the calculated viewBox is applied.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B