svg→fit

SVG viewBox fixer

Find out why an SVG won’t resize, and fix it — tested live at three sizes.

Using toolbook means you agree to our Terms and Privacy Policy.

or drag it here

SVG file

Data sent from your device
0 bytes sent

Your files stay on your device

How to use it

Drop an SVG that won’t resize here. It explains what’s wrong, fixes it, and shows the fixed file at three sizes so you can see it work.

Set a size in CSS and your SVG gets cut off, or refuses to shrink? Drop it onto the box above and you’ll get a plain explanation of what’s wrong and a fixed file to download.

The usual culprit is a missing viewBox — the bit that tells the SVG how to stretch to fit. Without it, the drawing can’t resize. The tool adds one for you.

The three test boxes at the bottom show the fixed file at small, medium, and large sizes. If the drawing fills all three, it’s fixed.

It also spots stretched circles, unexplained padding around icons, and files that won’t show up as an image at all.

FAQ

What does viewBox do?

It tells the SVG how to fit its drawing into whatever space it’s given. It’s what lets an SVG resize.

Why won’t my SVG resize with CSS?

Usually it has no viewBox, or its width and height are holding it at a fixed size. The tool tells you which.

Is it safe to delete width and height?

Yes, as long as there’s a viewBox. The tool won’t remove them otherwise.

Why is there extra space around my icon?

The viewBox is bigger than the drawing, or its shape doesn’t match. Tightening it needs a design app.

How it worksFor the curious

width and height set how large the drawing is by default. viewBox (min-x, min-y, width, height) defines the drawing’s coordinate space and maps it onto whatever box the SVG is given — only the viewBox makes it scalable.

With width and height but no viewBox, there is no mapping, so CSS sizing clips the artwork. The fix derives a viewBox from the existing size. Conversely, width and height can keep asserting an intrinsic size that stops an SVG shrinking in a flex or grid container; removing them hands sizing to CSS, which is only safe once a viewBox exists, so the tool never does one without the other.

It also flags a viewBox aspect ratio that disagrees with width/height (letterbox padding), preserveAspectRatio="none" (stretching), and a missing xmlns, which is harmless inline but stops a standalone .svg, img, or CSS background rendering at all.

The test boxes render the corrected file at 48, 96, and 180 pixels. A viewBox tightened to the artwork itself has to be set in a design tool.

Related tools