Drafting Tool

SVG `viewBox` Sandbox

An interactive, visual guide to mastering the deeply confusing SVG coordinate system.

The physical space the SVG occupies in the HTML document.

Width (px)

Height (px)

The internal coordinate system mapped to the outer SVG bounds.

min-x

min-y

width

height

How the viewBox fits when aspect ratios mismatch.

Align (x/y)

Meet or Slice

outer SVG bounds

inner viewBox bounds

<svg width="400" height="400" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  ...
</svg>