Home/SVG width, height and viewBox: understand import size

SVG width, height and viewBox: understand import size

An SVG opens at the width and height written in it. When those are in pixels, or missing, each program converts with its own pixels per inch: 96 in Inkscape and 72 in Illustrator, so the same file can come in 0.75 or 1.33 times as big. Divide the size you see by the size you expected, then fix the file once with a size in millimeters.

A size in pixels depends on the pixels per inch: read at 96 instead of 72, a file comes in at three quarters of its size.

Read the ratio

Select the whole design after import and divide its width by the width you expected.

RatioCauseFix
0.75 or 1.33The size is in pixels, read at 72 instead of 96 per inch, or the other wayWrite the size in millimeters, or match the import setting
2.54 or 0.39Centimeters read as inches, or inches as centimetersCorrect the unit in the file
10 or 0.1Millimeters and centimeters mixed upCorrect the unit in the file
25.4 or 0.039Millimeters and inches mixed upCorrect the unit in the file
Anything elseA stray shape or the page around the artwork is part of the selectionSelect only the design, or crop the page

Width, height and viewBox

The width and height give the size; the viewBox gives the coordinates inside it. Our arch label says width="60mm" height="62mm" viewBox="0 0 60 62": 60 by 62 millimeters, with one unit per millimeter. Change the width and height to resize a file; changing the viewBox numbers instead crops or stretches the drawing.

What is inside an SVG →

Set the size in mm, cm or inches →

A worked example

A 76 × 42 mm label exported from Illustrator in pixels is written 215.4 × 119.1 px, Illustrator’s 72 per inch. Inkscape and LightBurn, at 96 per inch, open it 57 × 31.5 mm: a ratio of 0.75. Set it in our resize tool to 76 mm wide, and the copy says width="76mm"; every program then opens it at 76 × 42 mm. Units shown differently are not an error: 76 mm is 7.6 cm and about 2.99 in.

Resize the SVG →

Set it in your cutting software

  1. Select every piece of the design, and nothing else.
  2. Lock the proportions.
  3. Type the width you want; check the height follows.
  4. Save, close and open the file again to see that the size held.

SVG imported tiny or huge →

LightBurn’s 96 or 72 setting →

xTool’s auto-scale setting →

From the maker’s documentation and reference works: W3C: SVG coordinates, Inkscape: units in Inkscape, LightBurn: settings and preferences, Adobe: export high-quality SVG from Illustrator.