Home/Why an SVG imports at the wrong size: width, height and viewBox explained

Why an SVG imports at the wrong size, explained

Type the width, height and unit from your SVG and see the physical size it gives: in millimeters, or at 96 and at 72 pixels per inch when the file uses pixels. The viewBox and the 96 versus 72 difference, shown live.

Type what the file says. Open the SVG in a text editor, or use the checker, to read its first line.

The example is our 76 × 42 mm label exported in pixels: 76 mm at 96 pixels per inch is 287.2 px.

What you get

Read at 96 px per inchRead at 72 px per inch

Three numbers decide the size

width and height set the size of the drawing’s page. Followed by mm, cm or in, that is a physical size. Followed by px, or by nothing, it is a count of pixels, and a pixel only becomes a length when a program decides how many fit in an inch.

The SVG standard counts 96 pixels to the inch, and most programs follow it. Some read 72 to the inch, which makes the same file a third larger; a file made at 72 and read at 96 comes out a quarter smaller.

The viewBox is the drawing’s own grid: four numbers, the last two its width and height in drawing units. It scales the shapes to fit the page but never sets a physical size.

Test the program you cut from

Four test files, each a 100 mm (3.94 in) square with a 50 mm square in the middle for a short ruler, written four ways. Open each one in the program you cut from and read the size it gives the outer square; the page around it is 1 mm wider on every side, so measure the square, not the page. The outlines are drawn 0.3 mm wide, so a program that counts the line in a shape’s size reads the square as 100.3 mm.

The millimeter file should measure 100 mm wherever you open it. The 96 px file measures 100 mm in a program that counts 96 pixels to the inch and 133 mm in one that counts 72. The 72 px file is the reverse: 100 mm at 72 to the inch, 75 mm at 96. The last file has a viewBox but no width or height, so the size it opens at is the program’s own choice.

Once you know which reading your program uses, you know what any pixel-sized file will do in it.

100 mm square, written in millimeters (SVG) ↓

100 mm square at 96 pixels per inch (SVG) ↓

100 mm square at 72 pixels per inch (SVG) ↓

Square with no width or height (SVG) ↓

The fix

Write the size in millimeters, with a viewBox in the same proportions. Every file on this site is made that way, so a 76 × 42 mm label says width="76mm" height="42mm" viewBox="0 0 76 42".

Write the size into your file →

My file already imported at the wrong size →

From standards and reference works: W3C: SVG coordinates.