viewBox

ViewBox is an attribute of the SVG element that defines the internal coordinate system for its content and how that content is projected onto the element’s viewport. It enables SVG graphics to scale cleanly to any size by remapping a defined user-space rectangle to the actual rendered area.

Syntax and meaning: The value consists of four numbers: min-x, min-y, width, height. These define a rectangle in the current user coordinate system. min-x and min-y specify the top-left corner of that rectangle; width and height specify its size. The content inside the SVG is laid out using the same coordinates; the browser then scales and translates that content to fit the viewport.

Scaling behavior: The viewBox works together with the width and height of the SVG element to determine the final size. When the aspect ratios differ, the preserveAspectRatio attribute controls alignment and whether the content is scaled uniformly or stretched. The default preserveAspectRatio is meet and xMidYMid, which scales the content to fit while preserving aspect ratio.

Usage: Apply viewBox on the outer SVG element. This often goes hand in hand with responsive layouts, where width and height are controlled by CSS or markup. Example: <svg width="200" height="100" viewBox="0 0 400 200"> ... </svg> In this case, the internal coordinates range from 0 to 400 in x and 0 to 200 in y, and the graphic will scale to 200 by 100 CSS pixels.

Notes: Without a viewBox, the user coordinates map directly to the pixel size, and scaling is less flexible. The viewBox is also useful for panning or cropping by redefining the rectangle.