SVG ViewBox Fixer
Fix missing or broken viewBox attributes automatically, calculated from your SVG's actual rendered content.
viewBox status
How it works
- 1
Paste or upload your SVG
Paste SVG code directly into the box, or click Upload SVG to load a file from your device.
- 2
Check the current status
The status panel shows whether a viewBox is already present, and what its current value is.
- 3
Click Fix viewBox
The tool measures your SVG's actual rendered content and calculates a corrected viewBox from it.
- 4
Review the updated code
The code panel updates automatically with the new viewBox applied, and the preview reflects the change.
- 5
Copy or download the result
Use Copy Code or Download SVG once you are happy with the fix.
About the SVG ViewBox Fixer
A missing or incorrect viewBox is one of the most common reasons an SVG looks correct in one place and broken in another: stretched, cropped, or rendered at the wrong size. This tool detects the problem and calculates a corrected viewBox using the SVG's actual rendered geometry, via the same getBBox measurement browsers use internally, rather than guessing based on the file's width and height attributes alone.
What the viewBox attribute actually does
Per the SVG 1.1 specification, viewBox defines the coordinate system a viewer uses to map the SVG's internal content onto its rendered size, in the form min-x min-y width height. Without it, an SVG has no defined coordinate mapping to scale by, so it tends to render at a fixed pixel size instead of scaling responsively inside a container, which is the root cause behind most icon and logo scaling issues.
Why this happens so often with exported SVGs
Design tools like Figma and Illustrator sometimes export SVGs with width and height attributes but no viewBox, or with a viewBox that no longer matches the actual artwork after edits, extra padding, or a path that shifted outside the original bounds. A mismatch between a stated size and a graphic's real geometry is easy to miss visually until the SVG is dropped into a different sized container and the scaling breaks.
How this tool calculates a correct viewBox
Rather than reusing the width and height attributes, which can themselves be wrong or missing, this tool briefly renders your SVG off screen and calls the browser's native getBBox method on it, the same geometry calculation the rendering engine itself uses. That returns the actual bounding box of the visible content, paths, shapes, and all, which this tool then applies as a new viewBox, with a small padding margin so strokes sitting at the very edge are not clipped.
Runs entirely in your browser
The measurement and the fix both happen client side using your browser's own SVG rendering engine, nothing you paste or upload is sent to a server. Before applying a fix in production, our SVG Viewer & Validator is a good next step to confirm the rest of the file is well formed and free of other issues.
Fine tuning the result
A calculated viewBox reflects exactly what is currently in the file, so if you want extra breathing room around an icon, or want to intentionally crop part of the artwork, open the result in our SVG Code Editor to adjust the numbers directly while watching the live preview update.
Frequently asked questions
Why does my SVG look different sizes in different places?
This usually happens when the viewBox attribute is missing or does not match the SVG's actual dimensions, which affects how it scales in different containers.
How does this tool calculate the correct viewBox?
It renders your SVG off screen and uses the browser's native getBBox method to measure the actual bounding box of the visible content, then applies that as the new viewBox with a small padding margin.
Will this tool change how my SVG looks?
No, adding or correcting a viewBox changes how the SVG scales inside a container, not the artwork itself. The shapes and paths inside the file are not modified.
What if my SVG already has a viewBox?
The status panel shows the current value. If it looks incorrect, clicking Fix viewBox recalculates it based on the SVG's actual content and replaces the existing value.
Is my SVG uploaded to a server?
No. The measurement and fix both run entirely in your browser using its native SVG rendering engine. Nothing is uploaded or stored.
Why is a small padding added around the calculated viewBox?
Without padding, strokes sitting exactly at the edge of the content can appear clipped. A small margin, proportional to the artwork's size, prevents that.
What if the tool says it cannot measure my SVG?
This usually means the SVG has no visible content, or the markup is invalid. Check the file in our SVG Viewer & Validator first to confirm it is well formed.