Inside an SVG
Open an SVG in a text editor and you see its instructions. Our arch label file is three short lines: its size, one outline and the outline’s color. Here is what each part says.
| Part | What it says |
|---|---|
| width="60mm" height="62mm" | Open me 60 mm wide and 62 mm tall |
| viewBox="0 0 60 62" | The drawing’s coordinates run 0 to 60 across and 0 to 62 down, so one unit is one millimeter |
| M0 62 | Start at the bottom-left corner |
| V30 | Go straight up to 30 mm from the top |
| C0 -10 60 -10 60 30 | Curve over the top to the other side |
| V62 Z | Go down to the bottom and close the outline |
| fill="#ad4b31" | Fill it rust red; each color can be cut from its own material |
Outlines versus pixels
| SVG | PNG or JPG | |
|---|---|---|
| Stores | Points, curves and colors | A grid of colored pixels |
| Enlarged | Stays sharp | Turns blocky |
| Cutting | The outlines are the cut lines | Trace it first, or print it and cut around it |
| Size | Written in the file | Depends on the pixels per inch the software assumes |
The canvas and the artwork
The width and height give the size of the canvas; the viewBox gives the coordinates inside it. The artwork can fill the canvas or sit in part of it, with a margin around it. A file sized in pixels, or with no width and height, leaves the real size to the program that opens it: the usual reason an SVG imports tiny or huge.
A worked example
Our arch label is the file above: one outline in one color, 60 × 62 mm. Design Space and LightBurn open it at 60 × 62 mm, because the size is written in millimeters; in any program, select it and check it reads 60 mm wide. Our layered drawings work the same way, with one outline per color, so each color can be cut from its own sheet.
When an SVG is not what it seems
An SVG can also hold things a machine cannot cut: a photo pasted inside it, a pattern or gradient fill, live text that needs a font, or shapes clipped by a mask. Design Space refuses an upload that contains them. The extension alone does not tell you, so check the file.
From the maker’s documentation and reference works: W3C: SVG coordinates, MDN: displaying SVG, Cricut: image upload instructions, Cricut: unsupported image items.