SVG viewBox explained: coordinates, scaling, and aspect ratio

The four viewBox values

A viewBox contains four numbers: minimum x, minimum y, width, and height.

<svg viewBox="0 0 240 160" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

This example exposes a rectangle of the internal coordinate system that begins at 0,0, extends 240 units horizontally, and extends 160 units vertically. Those units are abstract: the browser maps them into the rendered width and height.

The third and fourth values must be positive. The first two can be negative, which is useful when artwork extends left of or above the coordinate origin.

Viewport size and viewBox are different

The viewport is the physical space assigned to the SVG by attributes or CSS. The viewBox is the internal region shown inside that space.

<svg width="480" height="320" viewBox="0 0 240 160">
  ...
</svg>

Here, each internal unit initially maps to two CSS pixels because both viewport dimensions are twice their matching viewBox dimensions. If CSS later renders the same SVG at 240 by 160 pixels, each unit maps to one pixel. The artwork keeps the same proportions because its geometry still uses the same internal coordinates.

For responsive graphics, a common pattern is to keep the viewBox, set the displayed width with CSS, and allow the height to follow the intrinsic aspect ratio.

Why unexpected whitespace appears

If the visible artwork occupies only a small part of the declared viewBox, the unused coordinate area appears as whitespace. For example, artwork from x 80 to 160 inside a 0-to-240 viewBox leaves substantial room on both sides.

To tighten the frame, calculate the artwork bounds and use those values as the new minimum x, minimum y, width, and height. Leave deliberate padding when strokes, shadows, filters, or animation may extend outside the geometric bounds. Cropping exactly to a path can clip half of a thick stroke.

Zoom and pan by changing the viewBox

A smaller viewBox displayed in the same viewport looks zoomed in because fewer internal units fill the same physical space:

<!-- Full scene -->
viewBox="0 0 240 160"

<!-- Zoom into the center -->
viewBox="60 40 120 80"

Changing the first two values pans the visible region. Changing the last two zooms it. This technique can create diagrams with focused views, animated camera moves, or icon sprites that expose one symbol region at a time.

How preserveAspectRatio controls the fit

When the viewport and viewBox have different aspect ratios, the browser needs a fitting rule. The default is xMidYMid meet: keep the artwork's proportions, show the entire viewBox, and center any leftover space.

• meet shows the whole viewBox and may add empty space, similar to letterboxing.
• slice fills the viewport and may crop part of the viewBox.
• none stretches each axis independently and can distort the artwork.
• xMin, xMid, and xMax choose horizontal alignment; YMin, YMid, and YMax choose vertical alignment.

<svg viewBox="0 0 240 160" preserveAspectRatio="xMidYMid meet">
  ...
</svg>

Use slice when filling the frame matters more than showing every edge. Use meet for logos, diagrams, and icons that must remain fully visible.

A practical viewBox debugging checklist

1. Confirm the viewBox contains exactly four finite numbers.
2. Check that its width and height are positive.
3. Compare the viewBox aspect ratio with the rendered viewport ratio.
4. Inspect whether artwork, strokes, or filters extend outside the visible region.
5. Look for transforms that move content away from the coordinates you expected.
6. Choose meet or slice intentionally when the ratios differ.

Paste the SVG into the free online SVG editor to inspect its source and canvas together. If the file still has excess markup after its framing is correct, continue with the guide to optimizing SVG for the web.