How to Change the Colors of an SVG

How colors work inside an SVG

An SVG is a text file that lists shapes and how to fill them. A color appears as a fill code, for example:

<g fill="#c8102e" data-layer="Ornament">…</g>

#c8102e is a hex color code: a deep Christmas red. Shapes that share a color are usually grouped together, and cutting software treats each group as a layer. So changing a color means changing that code. Every program below does exactly that behind the scenes, whatever buttons it shows you.

Our color files group each color into a named layer (for example Ornament, Cap and Shine), so each color is easy to find and change.

1. In our editor (fastest)

Every design page has an editor next to the preview:

1. Choose the Color style. You will see one color box per layer, each with its name and hex code.
2. Click a color box to pick a new color, or type a hex code into the box next to it.
3. Or click a palette such as Classic, Candy cane, Frosty or Nordic to recolor every layer at once.
4. For one color, click Make it one color, which switches to the single-piece Solid style.
5. Download in any format: SVG for cutting, PNG for printing, and more.

The preview updates as you go. If you change your mind, Undo steps back, and holding Original shows the design as it was.

2. In Cricut Design Space

1. Upload the color SVG and add it to the canvas.
2. In the Layers panel, click the colored square next to a layer.
3. Pick a new color or type a hex code.

In Design Space, color only decides what you see on screen and how the mats are grouped, while the real color comes from whatever vinyl or cardstock you load onto the mat. To send several layers to the same mat, use Color Sync to merge them into one color.

3. In Silhouette Studio

1. Open the SVG (Designer Edition and up) or the DXF (Basic Edition). See using SVG files in Silhouette Studio.
2. Select a shape or color group, open the Fill panel and choose a color. The Line panel changes the outline color separately.

4. In Canva

Upload the SVG and click it on your page. Color swatches appear in the top toolbar, and clicking one lets you pick a new color. Simple SVGs with a few flat colors, like ours, show one swatch per color. Full steps are in the Canva guide.

5. In Inkscape (free desktop editor)

1. Open the SVG in Inkscape.
2. Select a shape. To select every shape of the same color, choose Edit › Select Same › Fill Color.
3. Open Object › Fill and Stroke (Ctrl+Shift+F), and on the Fill tab pick a new color or type the hex code.
4. Save as Plain SVG for the cleanest file for cutting software.

6. In a text editor

Because SVG is text, you can open it in Notepad (Windows) or TextEdit (Mac, in plain-text mode), find a code such as #c8102e and replace it with another, for example #2f78b7, then save. It’s the quickest way to change one color everywhere at once, and it’s how web developers recolor icons. Keep a copy of the original first.

Christmas color combinations

These are the palettes in our editor, with hex codes you can paste into any app. The first color is the base layer; the others are details.

When you’re picking colors you’ll actually cut, start from your material rather than the screen. Choose the hex codes closest to the vinyl or cardstock you own, so the preview is honest.

Keep some contrast between layers too, because a light base under a dark top layer (or the reverse) is what makes the cut-outs readable from across the room.

Then check the design small. Thin details in a color close to the background disappear on a 2-inch tag, so hold Original in the editor to compare. To check white and pale designs, use the dark preview button.