Read the four values
In viewBox="0 0 160 96", min-x is 0, min-y is 0, the internal width is 160, and the internal height is 96.
svg viewBox
SVG viewBox attribute reference for responsive scaling
The SVG viewBox attribute defines the coordinate system that maps artwork into the rendered viewport. Use it to control min-x, min-y, width, height, and responsive scaling without rewriting every shape.
Separate viewBox from rendered size
The viewBox sets drawing coordinates. The width, height, or CSS size sets how large the SVG appears on the page.
Fix cropped or stretched graphics
Shapes outside the viewBox can be clipped, while a mismatched aspect ratio can stretch artwork unless preserveAspectRatio is set intentionally.
Scale responsively
Pair a correct viewBox with CSS width: 100%, max-width, height: auto, or aspect-ratio so icons, diagrams, and inline illustrations resize cleanly across layouts.
viewBox example
This SVG uses viewBox="0 0 160 96" to define a 160 by 96 internal coordinate system before CSS or width and height choose the rendered size.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 96" role="img"><title>Check badge</title><rect width="160" height="96" rx="14" fill="#0e7c66"/><path d="M39 55l18 18 64-64" fill="none" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>SVG viewBox Attribute - min-x, min-y, Width, Height FAQ
What do the four SVG viewBox numbers mean?
They are min-x, min-y, width, and height in the SVG coordinate system. For example, viewBox="0 0 160 96" starts at 0,0 and exposes a 160 by 96 drawing area.
Is viewBox the same as width and height?
No. viewBox controls internal coordinates. Width and height control the rendered viewport size.
Can CSS change SVG viewBox?
CSS can resize the SVG viewport, but the viewBox attribute is markup that defines internal coordinates. Edit the viewBox value in the SVG when you need to change cropping or coordinate space.
Why is my SVG cropped?
The viewBox may be too small, shifted away from the visible shapes, or using an aspect ratio that does not match the artwork.
When should I use preserveAspectRatio?
Use preserveAspectRatio when the rendered width and height do not match the viewBox ratio and you need explicit fit, crop, or alignment behavior.