How to make a layered SVG for a cutting machine

A layered SVG is a cut file in which each colour is a separate set of shapes. Each set is cut from its own sheet of vinyl or card, and the pieces are stacked to build the picture. To make one, give every part of the design one flat colour for each material, join the shapes of each colour into pieces that hold together, put each colour in its own group, and save. The cutting program then sorts the file into layers by colour.

What a layer is in an SVG

The SVG format has no layer element. What drawing programs call layers are saved as groups, <g> elements, each holding the shapes of one layer. This complete file has three:

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 100 100">
  <g id="base" fill="#1c1b19">
    <circle cx="50" cy="50" r="48"/>
  </g>
  <g id="middle" fill="#ffd166">
    <circle cx="50" cy="50" r="40"/>
  </g>
  <g id="top" fill="#e4572e">
    <circle cx="50" cy="50" r="18"/>
  </g>
</svg>

One unit is one millimetre here, so the file describes a dark disc 96 mm across, a yellow disc of 80 mm to lie on it, and a red disc of 36 mm for the top. Shapes later in the file are drawn over earlier ones, so the order of the groups is the order of the stack, bottom first.

For cutting software the groups matter less than the colours. Cricut Design Space makes a layer of each path in an uploaded SVG and sorts the layers onto mats by colour. The working rule is simple: one colour, one path, one sheet of material. SVG g and use explains groups in the code.

Two kinds of layered design

Stacked colour. Two or more colours of vinyl, iron-on or card laid directly on each other to make a flat, multi-colour picture. This guide is about these. The layered SVG files in the library are of this kind.

Layered paper art. Several sheets of card, each cut with part of a scene and held apart with spacers so the picture has depth. The file is built the same way, but the design rules are different: see how to make layered paper art, or build a scene in the shadow box maker.

Plan the layers first

Decide how the colours will meet before drawing anything.

	Overlapping layers	Fitted layers
How it is built	Each lower layer is a full shape that runs on underneath the layers above	Each colour exists only where it will be seen, like pieces of a jigsaw
Lining up	Forgiving: a small slip is hidden	Exact: a slip shows as a gap
Thickness	Builds up with every layer	One sheet thick
Suits	Card, and vinyl in a few layers	Iron-on with many colours, where thickness matters

Then check four things:

Few colours. Every colour is another sheet to cut, weed and line up.
Every layer holds together. The parts of one colour that touch should be joined into single pieces. Loose parts are fine in vinyl, where transfer tape carries them, and troublesome in card.
A base to build on. A bottom layer in the outline of the whole design gives every other layer something to sit on and makes lining up easier.
Nothing too fine. Thin slivers tear or lift. Judge the design at the size it will be cut.

Build it in Inkscape

Inkscape is free. Other vector editors have the same commands under other names.

Draw or trace the design, and give each part the fill colour of its layer. With a part selected, click a colour in the palette at the bottom of the window.
Join each colour. Select the overlapping shapes of one colour and choose Path, Union. They become one outline, so the blade does not cut through the overlaps.
Run lower layers under upper ones, for overlapping layers. Select a shape in the upper layer and duplicate it with Ctrl+D, which puts a copy exactly on top. Give the copy the lower layer’s colour, select it with the lower layer’s shape, and choose Path, Union. The lower layer now extends beneath the upper one.
Or cut them to fit, for fitted layers. Duplicate the upper shape, select the copy together with the lower shape, and choose Path, Difference. The upper shape’s outline is cut out of the lower one.
Convert lettering. Select any text and choose Path, Object to Path, so the letters are shapes and need no font.
Make each colour one path. Select everything of one colour and choose Path, Combine, or Path, Union if the shapes overlap. Design Space makes a layer of each path, so this gives one layer for each colour. Check the stacking order: Object, Raise and Lower move a path up and down the stack.
Save. Use File, Save As and choose Plain SVG, which leaves out information only Inkscape uses.

If each layer should be a file of its own, Inkscape’s Save As list also offers “Layers as Separate SVG”, which writes one SVG for each Inkscape layer into a single archive. It works on layers made from Inkscape’s Layer menu, not on plain groups.

Start from a picture

A PNG or JPG with flat colours can be traced straight into layers. In the image to SVG converter, choose to trace as Colours and set the number of colours to the number the artwork really has, between two and twelve. The result has one path for each colour, largest area first, and the layers overlap so that no gaps show between neighbouring colours. The commonest colour, usually the background, is written as a plain rectangle beneath the rest: delete it if the background should not be cut.

This suits logos, clip art and drawings in a few solid colours. A photograph traces into hundreds of ragged patches and does not make a usable layered file.

Use it in Cricut Design Space

Upload the SVG. It arrives on the canvas as one grouped image.
Look at the Layers panel. Each path in the file appears as a layer; if each colour was combined into one path, that is one layer for each colour.
Change any layer’s colour to match the material it will be cut from. Layers given the same colour are placed on the same mat, and the Color Sync panel merges two colours by dragging one layer onto another.
Keep the pieces of a layer in position with Attach, if their spacing matters.
Make the project. Design Space prepares one mat for each colour.

Design Space reports unsupported items, and may change or drop them, in files with gradients, clipping paths, editable text or pictures in them. Uploading an SVG to Cricut Design Space has the full list and the steps.

Lining the layers up

The base layer does most of the work: each layer is laid inside the outline of the one below. For designs without a common outline, add a small square at the same spot on every layer as a registration mark. Cut it with each layer, stack the squares exactly, then remove them.

Common problems

What you see	Cause	Fix
The whole design arrives as one layer	All the shapes were combined into one path	Keep one path for each colour, each with its own fill
There are more layers than expected	Colours that look alike but differ slightly	Make them identical in the file, or merge them with Color Sync
Gaps show between colours	Fitted layers with nothing beneath	Let the lower layer run under the upper one
The blade cuts through overlapping parts	Shapes of one colour were not joined	Path, Union
Small parts are lost or shift	They are loose pieces of the layer	Join them to the layer, or add a base layer
The layers do not line up	No shared outline or mark	Add a base layer or registration squares
Design Space reports unsupported items	Gradients, text, clipping paths or pictures	Flat colours and shapes only

Questions

Do SVG files have layers? They have groups, which editors show as layers. Cutting software mostly sorts by colour instead.

How many layers should a design have? As few as the picture needs. Each one is a separate sheet to cut and place.

Can one layer be cut on its own? Yes. In the cutting program, hide or delete the other layers, or save each layer as its own file.