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.
Changing viewBox is not the same as resizing
Changing the viewBox values without touching width and height 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">
Aspect ratio
If you change width and height independently without preserving the ratio between them, the artwork distorts. When using a resize tool with an aspect ratio lock, changing width recalculates height automatically to keep proportions intact. Without the lock, you are responsible for keeping the math consistent.
What the resize operation actually touches
A correct SVG resize edits only the root <svg> element's width, height, and viewBox attributes. It does not touch paths, shapes, groups, or styles inside the file. The artwork is identical before and after; only the size metadata changes.
This is also why resizing an SVG does not degrade it. SVG is a vector format. No rasterization happens, no information is discarded, and the file size stays nearly the same. Resizing an SVG is not a way to reduce file weight; it is purely a metadata edit.
Quick answers
Does resizing an SVG reduce quality?
No. SVG is a vector format. Changing the attributes does not rasterize the file or discard any information.
What if my SVG looks squished after resizing?
You probably changed width and height independently without maintaining the aspect ratio. Keep the ratio consistent, or use a tool with an aspect ratio lock.
What about SVG files with no viewBox?
Add a viewBox first, using the file's existing width and height values as the coordinate range. This makes the file behave predictably when you then change the display dimensions.
Do the paths inside the SVG change?
No. The resize only touches the root <svg> element's attributes. Everything inside is unchanged.
