Free browser tool

Fix the SVG viewBox and see the change as you type.

The viewBox is four numbers: min-x, min-y, width and height. It defines the window onto the drawing, and it is why an SVG is cut off, tiny, or floating in empty space. Drop a file to see its viewBox, then edit it live.

No file handy? Have a PNG or JPG? Convert it to SVG first

Runs in your browser. Nothing is uploaded and no credits are used.

Details

What the numbers mean

01

min-x and min-y

Where the window starts in the drawing's own units. Negative values are fine. Move them to shift the artwork inside the frame without touching any path.

02

width and height

How much of the drawing the window shows. Larger values zoom out and add space; smaller values zoom in and crop. Their ratio sets the aspect of every export.

03

One-click fixes

Crop to content computes a tight viewBox from the visible shapes. Margin adds or removes 6% per click. Fit to expands the frame to 1:1, 4:5, 3:2 or 16:9.

Limits

What this tool cannot do

  • A missing viewBox is derived from width and height; a file with neither is treated as 300 by 150, the SVG default.
  • preserveAspectRatio is left as it was; use the Canvas panel to change the frame ratio instead.

FAQ

Frequently asked questions

Why is my SVG cut off?

The viewBox width or height is smaller than the drawing, or min-x and min-y start inside it. Press Crop to content to compute a viewBox that shows everything.

What is the difference between viewBox and width/height?

width and height are the size the SVG is displayed at; the viewBox is the region of the drawing shown in that size. Changing the viewBox rescales the drawing, changing width and height only resizes the box.

Can I type the viewBox directly?

Yes. The Canvas panel has X, Y, W and H fields. Type values and press Apply; the canvas updates immediately and Undo restores the previous frame.