Resizing an SVG means changing the width and height attributes on the root <svg> element. If the SVG has a viewBox, you usually leave it unchanged. The shapes and paths inside the file do not change at all.
That is the short version. The reason it gets confusing is that SVG has two separate concepts involved: the size the file says it is, and the coordinate space its artwork was drawn in. They are related but not the same thing, and knowing the difference helps you resize with the result you actually want.
Width and height: the display size
The width and height attributes on the root <svg> element tell a browser how much space to give the image by default. They are a rendering hint, not the fixed dimensions of the artwork:
<svg width="400" height="300" viewBox="0 0 400 300">
<!-- artwork here -->
</svg>If you change width to 800 and height to 600, the image renders twice as large on screen. The artwork inside scales to fill that space. Nothing about the coordinates of the shapes inside changed.
ViewBox: the coordinate space
The viewBox attribute defines the internal coordinate system the artwork was drawn in. Its four values are min-x min-y width height:
viewBox="0 0 400 300"This means the artwork occupies a space 400 units wide and 300 units tall, starting at the top-left corner. When you set the outer width and height, the browser maps those internal units to pixels automatically.
For a straight resize where you want the same artwork at a different display size, you only need to change the outer width and height. The viewBox stays the same, and the browser scales the artwork to match.
When to also change viewBox
Changing the viewBox values without touching width and height is a different operation: it changes what portion of the coordinate space is visible, which crops or zooms the artwork rather than scales it. For a standard resize, leave viewBox alone.
What happens when an SVG has no viewBox
Some SVGs are exported without a viewBox. They have width and height but no coordinate system defined:
<svg width="400" height="300">
<!-- artwork here -->
</svg>Without a viewBox, scaling the file can produce unexpected results depending on how the SVG is embedded. The reliable fix is to add a viewBox that matches the current width and height, which establishes the coordinate space explicitly before any resize:
<svg width="400" height="300" viewBox="0 0 400 300">SVG Lab's resize tool adds this viewBox automatically when it is missing, so the output file behaves predictably regardless of where you embed it.
Aspect ratio
If you change width and height independently without preserving the ratio between them, the artwork distorts. SVG Lab's resize tool includes an aspect ratio lock: when it is on, changing the width recalculates the height automatically to keep proportions intact, and vice versa.
The lock is off by default so you can set exact pixel dimensions. If you are scaling an existing design up or down without distorting it, turning the lock on saves the manual calculation.
What the resize tool does
SVG Lab's resize tool edits only the root <svg> element's width, height, and viewBox attributes. It does not touch any paths, shapes, groups, or styles inside the file. The artwork is identical before and after; only the size metadata changes.
Paste SVG markup directly or upload a file, set the new dimensions, toggle the aspect ratio lock as needed, then download the result. The tool runs entirely in the browser with no server upload.
FAQ
Does resizing an SVG reduce quality?
No. SVG is a vector format. Changing the width and height attributes does not rasterize the file or discard any information. The paths stay as paths.
What if my SVG looks squished after resizing?
You probably changed width and height independently without maintaining the aspect ratio. Enable the aspect ratio lock to keep proportions, or calculate the matching dimension manually before editing.
Does resizing change the file size?
Barely. The tool only changes a few attribute values on the root element, so the file size stays nearly the same. Resizing is not a way to reduce SVG file weight.
What about SVG files with no viewBox?
SVG Lab adds a viewBox automatically when one is missing, using the file's existing width and height values to define the coordinate space. This happens before the resize, so the output is well-formed regardless of the input.
Do the paths inside the SVG change?
No. The resize operation only touches the root <svg> element's attributes. Everything inside, including paths, shapes, groups, and styles, is unchanged.