You set an SVG icon to 48 pixels wide, and half of it disappears. Or you make it bigger, and it stays tiny in the corner of its box. Both problems almost always come down to one attribute: viewBox.
The four numbers
A viewBox is always four numbers:
<svg viewBox="0 0 24 24">- x: where the visible area starts, from the left.
- y: where it starts, from the top.
- width of the visible area.
- height of the visible area.
Think of it as a camera pointed at the drawing. The first two numbers say where the camera points. The last two say how much it sees. Whatever the camera sees is then stretched to fill the space the SVG takes up on the page.
The numbers aren’t pixels. They’re the drawing’s own units, so a 24 × 24 icon can be shown at 16 pixels or 400 pixels and stay sharp.
viewBox vs width and height
These two do different jobs, and mixing them up causes most SVG sizing problems.
| Attribute | What it controls | Example |
|---|---|---|
width / height | How big the SVG is on the page | width="48" |
viewBox | Which part of the drawing fills that space | viewBox="0 0 24 24" |
With both set, the 24-unit drawing is scaled up to fill 48 pixels. With only a viewBox, the SVG fills whatever width you give it in CSS. That’s usually what you want for icons and logos.
Why your SVG gets cut off or won’t resize
It has no viewBox
An SVG with width="100" height="100" and no viewBox has a fixed size. Make it smaller in CSS and you see a crop of the corner. Make it bigger and you get the same drawing with empty space around it.
The fix is to add a viewBox that matches the original size, then remove the fixed width and height:
<!-- before -->
<svg width="100" height="100">
<!-- after -->
<svg viewBox="0 0 100 100">The viewBox is the wrong size
If the viewBox is smaller than the drawing, the edges get cut off. If it’s larger, the drawing looks shrunk, with padding you can’t remove in CSS. This often happens when an icon is exported from a design tool with its artboard, not its artwork.
The shapes don’t match
If the viewBox is square but the space on the page is wide, the drawing can’t fill both directions. You’ll see empty space on the sides. That’s not a bug. It’s the next setting doing its job.
preserveAspectRatio: fit, fill or stretch
When the viewBox and the space on the page are different shapes, this attribute decides what happens.
| Value | What you see |
|---|---|
xMidYMid meet (the default) | The whole drawing fits, centred, with empty space on two sides |
xMidYMid slice | The drawing fills the space, and the overflow is cropped |
none | The drawing stretches to fill exactly, and gets distorted |
For icons and logos, keep the default. Use slice for a background pattern that should always cover its box. Use none almost never.
A quick checklist
- Does the
<svg>tag have a viewBox? If not, add one. - Does the viewBox match the artwork, not an oversized artboard?
- Remove fixed
widthandheightif you want CSS to set the size. - Check it at a few sizes, small and large, before you ship it.
Fix one now
The SVG viewBox fixer checks your file for all of the problems above, explains what it found, and fixes them in one click. It then shows the result at three sizes, so you can see it scale before you download it. Your files stay on your device. To look inside an SVG first, open it in the SVG viewer.