SVG viewBox fixer
Find out why an SVG won’t scale, and fix it — with a live test at three sizes.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your file never leaves your browser during processing
How it works
To fix an SVG that will not scale, drop it onto this page — the viewBox, width, height, and preserveAspectRatio are checked, the specific problem is explained, and the corrected file is rendered at three container sizes so you can confirm it now resizes.
Almost every "my SVG won’t scale" problem comes down to one confusion between two attributes that sound alike. The width and height attributes say how large the drawing is on the page. The viewBox says which part of the drawing’s own coordinate space is visible, and it is the only one of the two that makes the file scalable — it is the mapping between internal coordinates and whatever box the SVG is given.
So an SVG with width and height but no viewBox has no scalable coordinate space at all. Set a different size in CSS and the browser has no instruction for remapping the drawing into it, so the artwork gets clipped instead of resized. That is the first thing this tool checks, and the fix is to derive a viewBox from the size already in the file.
The second common case is the opposite: a file with a perfectly good viewBox that still refuses to shrink inside a flex or grid container, because its width and height attributes keep asserting an intrinsic size. Removing them hands sizing to CSS. This is only safe once a viewBox exists, so the tool refuses to do one without the other and says so rather than producing a broken file.
It also catches a mismatch between the viewBox aspect ratio and the width/height ratio, which shows up as unexplained padding around an icon; a preserveAspectRatio of none, which stretches circles into ellipses; and a missing xmlns, which is harmless inline in HTML but stops the file rendering entirely as a standalone .svg, in an img tag, or as a CSS background.
The three boxes at the bottom render the corrected file at 48, 96, and 180 pixels. If the drawing fills all three, it scales.
FAQ
What does viewBox actually do?
It defines the coordinate space the drawing lives in — min-x, min-y, width, height — and maps that space onto whatever size the SVG is displayed at. It is what makes an SVG resolution-independent; width and height only set a default rendered size.
Why won’t my SVG resize with CSS?
Usually because it has no viewBox, so there is nothing to map its coordinates onto the new size. Sometimes because its width and height attributes are asserting an intrinsic size that your CSS is not overriding. This tool identifies which case you are in.
Is it safe to delete width and height?
Yes, as long as a viewBox is present — the SVG then fills its container and CSS controls the size. Without a viewBox it is not safe, and the tool will not do it.
My icon has extra space around it. Why?
Most often the viewBox is larger than the artwork inside it, or its aspect ratio does not match the width and height, so the drawing is letterboxed within the box. The mismatch is flagged in the diagnosis; a viewBox tightened to the artwork has to be set in a design tool.
Does my file leave the browser?
No. Diagnosis and fixes are all local. The network monitor beneath the tool watches for outbound requests during processing.