The SVG viewBox, Explained Once and For All

viewBox="0 0 24 24" – four numbers that govern how every SVG scales, crops, and responds. They’re also the most misunderstood attribute in the format. One mental model fixes that permanently: the viewBox is a camera.

The camera model

An SVG’s shapes live in an infinite coordinate plane – the world. The viewBox is a rectangular camera aimed at that world:

viewBox="minX minY width height"

• minX minY – where the camera’s top-left corner sits
• width height – how much world the camera sees

Whatever the camera frames gets scaled to fit the SVG’s display size (its width/height attributes or CSS). Three consequences fall out immediately:

1. Scaling is free. Display size changes just re-map the same camera view – the world never changes. (Why resizing is lossless.)
2. Cropping is reframing. A tighter viewBox = zoomed-in camera. Nothing is deleted – shapes outside the frame still exist, just unphotographed. (The cropping guide.)
3. Coordinates are unit-less. A 0 0 24 24 viewBox displayed at 480px makes each world-unit 20 screen pixels. Design in whatever grid is comfortable; display at whatever size is needed.

Worked examples

Take artwork drawn within 0 0 100 100:

viewBox	What the camera sees
0 0 100 100	Everything – the standard full view
25 25 50 50	The center quarter, zoomed 2×
0 0 200 200	Everything, half-size, in the top-left (zoomed out)
-10 -10 120 120	Everything plus a 10-unit margin

Paste any SVG into a live editor and play with these – two minutes of fiddling cements the model better than any diagram.

Aspect ratio: the squash rule

The camera’s frame shape (viewBox width:height) and the screen’s shape (display width:height) can disagree – square camera, wide screen. By default SVG letterboxes: scales uniformly to fit and centers, controlled by preserveAspectRatio (default xMidYMid meet). Set preserveAspectRatio="none" and it stretches to fill instead – the source of every “my SVG is squashed” report, and occasionally exactly what you want (full-bleed wave dividers use it deliberately).

The responsive pattern

The viewBox is what makes SVGs responsive. The canonical web form:

<svg viewBox="0 0 24 24">…</svg>   <!-- no width/height -->

With the camera defined and no fixed display size, CSS controls everything – width: 100%, width: 2rem – and the graphic fills any container perfectly. Fixed width/height attributes override this flexibility; that’s why design-tool exports (which include them) often need the attributes deleted for fluid layouts.

The viewBox bug table

• “My SVG won’t scale” → it has width/height but no viewBox. The camera is undefined; the browser can’t map coordinates. Add viewBox="0 0 [w] [h]" matching the natural size.
• “It renders as empty space” → artwork drawn at coordinates outside the viewBox. Camera’s aimed at empty world. Inspect path coordinates vs the box (rendering issues).
• “It’s squashed” → ratio mismatch + preserveAspectRatio="none" somewhere. Match the ratios.
• “Huge empty margins” → viewBox much bigger than the artwork. Tighten the frame (crop workflow).
• “Optimizer broke my responsive icon” → an aggressive tool stripped the viewBox. Restore it; use conservative optimization.

Four numbers, one camera, every scaling behavior in the format. Next layer down: how the path element draws the world the camera photographs.