SVG size and units: width, height, mm, px and DPI
An SVG's size comes from the width and height on its root element, in px, mm or inches. How units and the viewBox set the scale, and why files open too big.
Published
The size of an SVG is set by the width and height attributes on its root <svg> element. They can be plain numbers, which count as pixels, or carry a unit such as mm or in. The viewBox then says how many of the drawing’s own units fit into that size. An SVG has no DPI: it is made of shapes, so it can be drawn at any size, and a resolution only comes into it when the file is turned into pixels.
<svg xmlns="http://www.w3.org/2000/svg" width="150mm" height="100mm" viewBox="0 0 300 200">
<rect x="10" y="10" width="280" height="180" fill="teal"/>
</svg>This file is 150 mm wide and 100 mm tall. Its drawing is 300 units by 200, so two units make one millimetre, and the rectangle is 140 mm by 90 mm.
Units
| Unit | Meaning | In pixels |
|---|---|---|
none, or px | Pixel, as CSS defines it | 1 |
in | Inch | 96 |
mm | Millimetre | About 3.78 |
cm | Centimetre | About 37.8 |
pt | Point, 1/72 of an inch | About 1.33 |
pc | Pica, 12 points | 16 |
The ratios are fixed by the CSS standard, which SVG follows: 96 pixels to the inch, and 25.4 mm to the inch. A width of 384 and a width of 4in are therefore the same size to a browser. These “pixels” are a unit of length, not the dots of a particular screen.
Units belong on the root element. The shapes inside are best left as plain numbers in the viewBox’s coordinates.
What the file says about its size
Programs call this the SVG’s intrinsic size: the size and shape it claims before anything else resizes it.
| The root element has | The file’s own size | What follows |
|---|---|---|
width, height and viewBox | A definite size and proportions | It opens at that size and scales cleanly. The best case |
viewBox only | Proportions, but no size | On a web page it fills the width available. Other software picks a size |
width and height only | A definite size | It cannot be scaled cleanly: resizing crops or stretches it |
| None of them | Nothing | Browsers fall back to the default size of 300 by 150 pixels |
Percentages, as in width="100%", are not a size in this sense. They tell a web page to fill the space on offer, and give the file no size of its own.
The SVG viewer reports the size of any file in pixels and says whether it came from the width and height, from the viewBox, or from the browser default.
Width, height and the viewBox together
width and height are the size of the frame. The viewBox is the part of the drawing shown in it. Dividing one by the other gives the scale.
| Root element | Scale |
|---|---|
width="100mm" height="100mm" viewBox="0 0 100 100" | 1 unit is 1 mm |
width="4in" height="4in" viewBox="0 0 384 384" | 1 unit is 1 pixel, 96 to the inch |
width="200" height="200" viewBox="0 0 100 100" | 1 unit is 2 pixels |
Keep the two in the same proportion. If they differ, the drawing is fitted inside the frame and empty bands appear on two sides. SVG viewBox explained covers the four numbers and the fitting rules.
How to change the size of an SVG
In the file. Edit width and height on the root element and leave the viewBox as it is. To make the example above 300 mm wide, write width="300mm" height="200mm". Nothing else changes: every shape scales with the frame.
If the file has no viewBox, add one first, using the old width and height in pixels as its last two numbers. If they carry units, convert them first: millimetres times 3.78, inches times 96. Otherwise a new size only crops the drawing or adds empty space:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">becomes
<svg xmlns="http://www.w3.org/2000/svg" width="150mm" height="100mm" viewBox="0 0 300 200">These are opening tags only. The rest of the file stays as it was.
On a web page. CSS sets the displayed size and overrides the attributes: width: 100%; height: auto makes an SVG with a viewBox fill its container and keep its proportions.
In a vector editor. Set the document’s size and units in the document settings, which in Inkscape are under File, Document Properties.
In a cutting program. Type the width wanted after importing. In Cricut Design Space, keep the lock beside the size boxes closed so the height follows.
SVG and DPI
DPI means dots per inch, and an SVG has no dots. Two questions hide behind the phrase.
How many pixels for a print? When an SVG is converted to PNG or JPG, the pixel size is chosen at that moment: inches multiplied by DPI. A design to print 4 inches wide at 300 DPI needs 1,200 pixels across. SVG to PNG draws the file at the pixel size asked for, up to 12,000 pixels a side, so nothing is lost by exporting large. DPI vs PPI explains the terms.
How long is one unit? A unitless number has to be turned into a real length by the program that opens the file, and programs have not always agreed.
| Program | Units to the inch |
|---|---|
| Browsers, following the CSS standard, and Inkscape from version 0.92 | 96 |
| Inkscape before 0.92 | 90 |
| Adobe Illustrator | 72 |
Why an SVG opens at the wrong size
A file saved with unitless sizes by one program and opened in another is rescaled by the ratio of the two numbers above.
| Symptom | Likely cause |
|---|---|
| A third too large | Made at 96 units to the inch, read at 72 |
| A quarter too small | Made at 72, read at 96 |
| About 6 per cent too small, or 7 per cent too large | An old Inkscape file at 90 read at 96, or the reverse |
| Far too large or too small | The file has a viewBox but no width and height, and the program has chosen a size |
The proportions are always right, so one correction fixes everything: set the width after opening, with the proportions locked. To stop it happening, save with real units on width and height, as in the first example. Most cutting, laser and plotter software then opens the file at the intended size.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| The image is cropped after resizing | No viewBox | Add viewBox="0 0 W H" from the old size in pixels, then resize |
| Empty bands beside or above the drawing | width and height are not in the viewBox’s proportions | Make the ratios equal |
| The image is 300 by 150 on a web page | No width, height or viewBox | Add a viewBox, then set a width |
| It imports at the wrong size in another program | Unitless sizes | Use mm or in on the root element |
| Lines look thicker or thinner after resizing | Stroke widths scale with the drawing | Change stroke-width to suit |
| An exported PNG is blurred | Too few pixels were exported | Export again at the pixel size needed |
Questions
What is the default size of an SVG? There is none in the format. A browser gives an SVG with no size and no viewBox a box of 300 by 150 pixels.
How many pixels is a millimetre? About 3.78, at 96 pixels to the inch. A 100 mm file reports as about 378 pixels.
Does a bigger SVG make a bigger file? No. The size in kilobytes depends on how many shapes and points the file holds, not on its width and height.
What size should an SVG be for a cutting machine? Any size. It can be scaled without loss after it is opened, which uploading an SVG to Cricut Design Space shows for that program.