What does an SVG viewBox do?
The four viewBox values describe a rectangle in SVG user space: minimum X, minimum Y, width and height. They are separate from the width and height of the viewport where that rectangle appears. A negative origin is valid; zero width or height disables SVG rendering, so this calculator requires positive dimensions.
Worked example: a wide SVG in a taller box
A viewBox of 0 0 200 100 in a 320 × 240 CSS-pixel viewport with xMidYMid meet has a scale of 1.6 on both axes. The image occupies 320 × 160 pixels, leaving 40 pixels above and below. The point (100, 50) maps to (160, 120). Switching to slice gives a scale of 2.4 and a horizontal translation of −80 pixels.
How to add SVG padding
Subtract left padding from the content minimum X and top padding from the minimum Y. Add left and right padding to the content width, then top and bottom padding to the height. For content bounds 0 0 200 100, padding 10 above/below and 20 left/right produces −20 −10 240 120. Use the actual visible bounds, rather than assuming the existing viewBox already follows the artwork.
Frequently asked questions
Does this automatically find the bounds of my artwork?
No. Enter known content bounds for padding. Stroke widths, filters, markers, clipping and transforms can change visible bounds; include those in your measurements. Pasted SVG artwork is never drawn or measured.
What is the difference between meet, slice and none?
Meet fits the whole viewBox inside the viewport and can leave empty space. Slice fills the viewport and can extend content outside it; this preview clips the overflow. None scales X and Y independently and can distort the artwork.
Are viewBox units the same as CSS pixels?
Not necessarily. The viewBox is in SVG user units. This calculator maps those units to an explicitly sized viewport in CSS pixels. Parent CSS, page position, nested viewports and additional transforms are outside this calculation.
Can I paste an SVG safely?
Only its root viewBox, width, height and preserveAspectRatio attributes are read. No supplied SVG markup is inserted into the page, displayed, executed or fetched. The preview uses a built-in diagram. This is not a full SVG validator or sanitizer.
Why are percentage, mm or em viewport values rejected?
Those values need surrounding layout, font or physical-unit context. Choose the final viewport width and height in CSS pixels instead. Root attribute import accepts positive unitless or px values only.
Does changing viewBox remove empty pixels from a file?
It changes the SVG coordinate window, not the original geometry or a raster image. Copy the new attributes into your source and test the actual artwork. Hidden geometry, filters and strokes may require different bounds.
Technical reference: W3C SVG 2 — computing a viewport’s transform.