SVG viewBox explained: the four numbers that control scaling
The viewBox attribute is why SVG scales cleanly — and the missing piece behind most 'my SVG won't resize' bugs. Four numbers define the entire coordinate system.
The four numbers
viewBox='min-x min-y width height' defines a rectangle in the SVG's own coordinate system. Everything drawn inside that rectangle fills the element; everything outside it is clipped unless overflow allows more.
viewBox vs width and height
width and height set the on-screen canvas size; viewBox defines the coordinate space that gets mapped onto it. With a viewBox and no width, the SVG stretches to fill its container — that is the responsive behavior most people expect.
preserveAspectRatio in one paragraph
By default the browser scales the viewBox uniformly to fit (preserveAspectRatio='xMidYMid meet'), letterboxing when proportions differ. Setting none instead stretches the drawing, which distorts shapes but fills the box exactly.
Common mistakes
An SVG with width and height but no viewBox does not scale. Negative min-x or min-y silently crops content. And copying a viewBox that starts at 100 300 leaves whitespace the renderer faithfully preserves — reset it to the content's real bounds.
Debugging a broken viewBox
Outline the SVG element with a CSS border to see its real box, then compare against the viewBox numbers. If artwork is missing, coordinates fall outside the rectangle; if it is tiny, width and height disagree with the viewBox aspect.
viewBox and text
Text inside the viewBox scales with everything else, which is usually what you want for logos but not for UI labels. Keep text outside the scaled region, or set font sizes knowing they stretch with the box.