SVG viewBox Explained

Introduction

The viewBox attribute connects an SVG's internal coordinate system to the space where the browser renders it. Many scaling bugs happen because width, height, and viewBox are treated as interchangeable. They are not.

width and height describe the viewport size. viewBox describes which internal coordinates should be visible inside that viewport.

Read the four numbers

<svg viewBox="0 0 200 100" width="400" height="200">
  <rect x="0" y="0" width="200" height="100" fill="tomato" />
</svg>

The values are min-x, min-y, viewBox-width, and viewBox-height. This example exposes a 200 by 100 coordinate region and renders it into a 400 by 200 viewport. The aspect ratios match, so the artwork scales evenly by a factor of two.

What changes do

Responsive sizing

A common responsive pattern keeps the viewBox and lets CSS control width.

<svg
  viewBox="0 0 200 100"
  width="200"
  height="100"
  style="width: 100%; height: auto"
  aria-hidden="true"
>
  <!-- artwork -->
</svg>

The attributes provide an intrinsic ratio and fallback dimensions. CSS allows the graphic to shrink or grow with its container without changing the internal coordinates.

Cropping whitespace

Large empty margins often come from a viewBox that is much larger than the artwork bounds. Tightening it can improve alignment, but visible bounds are not always the full required bounds. Strokes extend around paths, filters can draw outside geometry, and animation may move elements beyond the initial shape.

Before changing a viewBox, inspect strokes, filters, masks, and motion across every intended state.

Common mistakes

Copying path bounds directly

Path geometry does not automatically include stroke width, markers, shadows, or filtered pixels. A mathematically tight box can clip visible output.

Setting both CSS dimensions without preserving ratio

Forcing unrelated width and height values can stretch the viewport. Use height: auto, aspect-ratio, or a deliberate preserveAspectRatio strategy.

Removing width and height everywhere

A viewBox makes scaling possible but does not always reserve layout space by itself. Explicit dimensions or CSS aspect ratio help prevent layout movement.

Optimizing away the viewBox

A smaller file is not useful if the graphic no longer scales. Treat viewBox as functional data.

Practical workflow

1. 1
   Record the current viewBox, width, height, and visible output.
2. 2
   Identify whether the problem is viewport sizing, internal coordinates, or empty margins.
3. 3
   Inspect strokes, filters, masks, and animation outside basic path bounds.
4. 4
   Change one viewBox value at a time and compare the result.
5. 5
   Test square, wide, and narrow containers.
6. 6
   Confirm intrinsic dimensions and layout stability.
7. 7
   Preserve the reviewed values during optimization and component conversion.

Best practices

• -Keep a correct viewBox on responsive SVG.
• -Preserve the intended aspect ratio unless distortion is deliberate.
• -Reserve layout space with dimensions or CSS.
• -Include stroke and filter overflow when cropping.
• -Test at small and large rendered sizes.
• -Store the original export before editing coordinates.

FAQ

Is viewBox required?

SVG can render without it, but a viewBox is the normal foundation for responsive scaling and a stable internal coordinate system.

Can viewBox contain decimals or negative values?

Yes. Negative origins and decimal dimensions are valid when they describe the required coordinate region.

What does `preserveAspectRatio="none"` do?

It allows non-uniform scaling to fill the viewport, which can distort the graphic. Use it only when stretching is intentional.

Why is a stroke clipped after tightening the viewBox?

Strokes extend beyond the underlying path. Add enough coordinate space for half the stroke width and any markers or filters.

See the W3C SVG coordinate systems specification for the normative model.