SVG guide
How to Fix an Oversized SVG ViewBox
An oversized viewBox makes the browser reserve coordinate space that the artwork does not use. The graphic then appears too small, off-center, or surrounded by unexplained padding even when CSS margins are zero.
Read all four viewBox numbers
In viewBox="-50 -20 500 300", the first two values define the coordinate origin and the last two define the visible width and height. They are not left, top, right, and bottom coordinates.
Use bounds, not guesswork
Find the minimum painted x and y and the maximum painted x and y. New width is maxX minus minX; new height is maxY minus minY. Rendered measurement is useful because it can include strokes and supported effects.
<!-- Artwork renders from -12 to 88 on x, and 6 to 66 on y -->
<svg viewBox="-100 -100 400 400">…</svg>
<!-- Bounds plus 2 units of padding -->
<svg viewBox="-14 4 104 64" width="104" height="64">…</svg>Understand width and height
The viewBox defines internal coordinates. Root width and height provide intrinsic display dimensions. Updating all three can make a downloaded file behave more predictably, while CSS can still override its displayed size.
Be cautious with unusual units
Files without a valid viewBox may rely on width and height values such as percentages or physical units. Automated tools may need to infer a coordinate system, so inspect the result when the source does not use plain numeric or pixel sizing.
Apply this to your file
When you are ready to work on the asset, use FreeProTool to tighten the SVG viewBox.
Related SVG guides
Remove empty SVG margins by tightening the viewBox around rendered content while preserving real white shapes and vector elements.
Crop an SVG by changing its viewBox instead of rasterizing it, while accounting for strokes, effects, embedded images, and export size.