SVG viewBox explained: the four numbers and scaling
The SVG viewBox sets which part of the drawing is shown and lets it scale. What min-x, min-y, width and height mean, with examples and fixes for cropping.
Published
The viewBox attribute tells an SVG which rectangle of its drawing to show. It holds four numbers, viewBox="min-x min-y width height", and that rectangle is stretched to fill whatever size the SVG is given on the page. It is the reason an SVG can be scaled: without a viewBox, making the image bigger or smaller only shows more or less of the drawing.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="teal"/>
</svg>Here the drawing is 100 units wide and 100 tall, and it is shown in a square of 200 pixels. Every unit is drawn as 2 pixels, so the circle, 40 units in radius, appears 80 pixels in radius.
The four numbers
| Number | Meaning |
|---|---|
min-x | The x coordinate at the left edge of what is shown |
min-y | The y coordinate at the top edge of what is shown |
width | How many units wide the visible rectangle is |
height | How many units tall it is |
The numbers are separated by spaces or commas and have no units. They are in “user units”, the same coordinates the shapes inside use. The x axis runs to the right and the y axis runs down. Width and height must not be negative, and if either is zero nothing is drawn.
viewBox against width and height
The two do different jobs, and the difference is the usual source of confusion.
widthandheighton the<svg>set the viewport: the size of the window on the page, in pixels or real units such asmm.viewBoxsets which part of the drawing fills that window.
Change width and height and the picture is drawn larger or smaller. Change the viewBox and you see a different part of the drawing, at a different zoom.
| Code | Result |
|---|---|
width="100" height="100" viewBox="0 0 100 100" | One unit is one pixel |
width="300" height="300" viewBox="0 0 100 100" | The same drawing, three times larger |
width="100" height="100" viewBox="0 0 50 50" | The top-left quarter of a 100-unit drawing, at twice the size |
width="100" height="100" viewBox="25 25 50 50" | The middle of the drawing, at twice the size |
width="100" height="100" viewBox="-50 -50 100 100" | Point 0,0 sits in the centre of the window |
So a smaller viewBox zooms in, a larger one zooms out, and changing min-x and min-y slides the view sideways or up and down. Negative values are allowed for min-x and min-y. A viewBox starting at -50 -50 is a handy way to draw around a centre point.
An SVG without a viewBox
With no viewBox, one user unit is one pixel and the origin is the top-left corner. The drawing has a fixed size. Setting a smaller width does not shrink it: it crops it. Setting a larger one adds empty space.
This is why an inline icon that “will not resize with CSS” nearly always lacks a viewBox. The fix is to add one that matches the original size. If the file says width="24" height="24" and has no viewBox, add viewBox="0 0 24 24", and it then scales to any size you set.
Making an SVG scale to its container
Give the SVG a viewBox and let CSS decide the size:
<svg viewBox="0 0 400 300" style="width: 100%; height: auto">
...
</svg>The viewBox also gives the image its proportions, here 4 to 3, so the browser can work out the height from the width. An inline SVG that has a viewBox and no width or height at all fills the width of its container. With neither a size nor a viewBox, browsers fall back to 300 by 150 pixels.
When the shapes do not match: preserveAspectRatio
If the viewBox and the viewport have different proportions, the preserveAspectRatio attribute decides what happens.
| Value | Effect |
|---|---|
xMidYMid meet (the default) | Scale evenly until the whole viewBox fits, and centre it. Empty bands appear on two sides |
xMidYMid slice | Scale evenly until the viewport is covered, and crop what overflows |
xMinYMin meet | Fit as above, but push the drawing to the top-left |
none | Stretch the viewBox to the viewport, distorting the drawing |
The first part chooses the alignment, with Min, Mid or Max for each axis. The second chooses meet (fit inside) or slice (cover). They behave like object-fit: contain and object-fit: cover for photographs.
Real sizes for cutting and printing
Units on width and height combine with the viewBox to give a true scale:
<svg xmlns="http://www.w3.org/2000/svg" width="150mm" height="100mm" viewBox="0 0 150 100">
...
</svg>The viewBox is 150 units wide and the image is 150 mm wide, so one unit is exactly one millimetre. Most cutting, laser and plotter software then imports the file at its intended size. Files that give only unitless numbers are the ones that arrive too big or too small, as What is an SVG file explains.
Finding the right viewBox
A good viewBox fits the artwork closely. To measure the artwork, open the page with the SVG in a browser and run this in the console:
document.querySelector('svg').getBBox()It returns the x, y, width and height of everything inside, which are the four viewBox numbers. The box does not include the thickness of strokes, so add a little room on each side if the outlines are thick. In Inkscape, Edit, Resize Page to Selection does a similar job from the menu, and counts the strokes. The crop SVG page measures the drawing as it is drawn, strokes included, and writes the viewBox for you.
To see the viewBox a file already has, open it in the SVG viewer, which lists it beside the size.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| The image is cropped | The viewBox is smaller than the artwork, or there is no viewBox and the size was reduced | Widen the viewBox to cover the artwork, or add one |
| Empty space around the image | The viewBox is larger than the artwork, or its proportions differ from the viewport | Tighten the viewBox to the artwork |
| It will not resize with CSS | No viewBox | Add viewBox="0 0 W H" using the original width and height |
| It is stretched | preserveAspectRatio="none" | Remove the attribute |
| The attribute is ignored | Written as viewbox in an .svg file or in script | Use a capital B: viewBox |
| Console error about viewBox | Fewer than four numbers, or a negative width or height | Give four numbers, the last two positive |
| Lines look thicker or thinner than expected | Stroke widths are in user units and scale with the viewBox | Adjust stroke-width: see fill and stroke |
Questions
Can the viewBox be set with CSS? No. It is an attribute, not a CSS property. Change it in the markup, or with setAttribute('viewBox', '0 0 50 50') in JavaScript.
Does the viewBox have to start at 0 0? No. Editors often export a viewBox with other starting values, and the file is perfectly valid. The shapes simply use coordinates that begin there.
Where else is viewBox used? On <symbol>, <marker>, <pattern> and <view> elements, where it works the same way: it maps a rectangle of coordinates onto the space the element is given.
How do I move or resize one shape, not the whole view? With the transform attribute, covered in SVG transform.