How to Change the Color of an SVG File (and Why It Sometimes Won't)

There are three real ways to change the color of an SVG file, and all of them are free. Upload it to an online SVG color changer and click the swatch you want to replace. Open it in a vector app like Inkscape, select the shape, and pick a new fill. Or open the file in a text editor and swap the hex code, because an SVG is just text. Recoloring a vector is also lossless: you're rewriting an instruction, not repainting pixels, so nothing blurs or degrades.

Which method to pick depends on what's inside your file. And when an SVG refuses to change color, what's inside the file is almost always the reason, not the tool you're using. This guide covers the three methods first, then the diagnosis: the six common reasons a recolor doesn't take, including the one no color tool can fix.

Where an SVG keeps its colors

An SVG file is a list of shapes written as text. Each shape carries its own paint: a fill for the inside, and sometimes a stroke for the outline. There is no single "image color" you can swap in one place. A design that reads as one color on screen may be a single tidy path, or it may be forty separate paths that all happen to share the same fill.

That's the whole game. Every recoloring method below is just a different way of finding shapes and rewriting their fill or stroke. It's also why results vary so much between files: the fewer, cleaner the shapes, the easier the recolor.

Pick your method

Method 1: an online SVG color changer

1. Open a free SVG color tool in your browser and upload the file (good ones also accept pasted SVG code).
2. The tool lists the colors it finds. The useful ones group identical fills, so "the blue" is one swatch even if it covers dozens of shapes.
3. Click a swatch, pick the replacement, and watch the preview.
4. Download the result and open it once in a browser tab to confirm.

This is the right method for most people, most of the time. Two things to check before you trust a tool with real work: whether it also lists stroke colors, and how it handles gradients. If a tool shows fewer colors than you can see on screen, part of the file is a gradient or an embedded image, and a plain swatch swap won't reach it.

Method 2: a vector design app

Inkscape is free and does everything this job needs; Illustrator and Figma work the same way.

1. Open the SVG and click the part you want to change. If the whole design selects as one block, it's grouped: double-click to enter the group, or ungroup it.
2. Change the fill in the Fill & Stroke panel (Inkscape) or the fill swatch (Illustrator, Figma).
3. When one visual color is split across many shapes, don't click them one by one. Right-click a shape and use Select Same → Fill Color in Inkscape, or Select → Same → Fill Color in Illustrator. Every shape sharing that fill is now selected, and one change recolors them all.
4. Export or save as plain SVG.

A design app is also where you'd go beyond color, like moving shapes or reworking curves. For that bigger toolbox, see our guide to editing an SVG.

Method 3: a text editor

Because an SVG is text, any editor works: Notepad, TextEdit, VS Code.

1. Open the .svg file and search for fill=.
2. Change the value, for example fill="#1e3a5f" to fill="#c2410c", and save.
3. Refresh the file in a browser tab to check the result.

Three caveats. Colors can be written as names (fill="black") as well as hex. Outlines live in stroke=, not fill=. And many exported files don't put the color on the shape at all: they use classes, with the actual hex sitting in a <style> block near the top (.st0{fill:#1e3a5f;}). Edit the hex in the style block and every shape with that class follows.

This method shines for one-color icons, where a single find-and-replace does the job, and for batch work across a folder. For a forty-color illustration, it's the slow way.

If your SVG lives on a website

Can you change an SVG's color with CSS? Only when the SVG markup is inline in the HTML. Then fill works like any CSS property, and setting the file's fills to currentColor lets the icon inherit the text color around it. But an SVG loaded through an <img> tag is sealed: the page's CSS cannot reach inside it, which is exactly why so many people report that the icon "stays black no matter what."

If you can't inline the file, you're back to the file-editing methods above: change the color inside the SVG itself and reload it.

Why your SVG won't change color

This is the part the tutorials skip, and it's where most recolors actually fail. Work down the table.

Two of these deserve a closer look.

The background-box surprise

Some SVGs carry a full-size background rectangle you can't see against a white page. Recolor "everything" and the box shows up as a colored block behind your design; some apps also select it when you click. It's a normal shape, so select it and delete it, or give it the color you actually want. If the box turns up white in other software, that's a related but different problem, covered in our guide to keeping a transparent background.

The SVG that isn't a vector

The stubborn case looks like this: no shape is selectable, every fill edit does nothing, and when you zoom in, the edges pixelate. Open the file in a text editor and instead of <path> elements you'll find one <image> tag holding a wall of base64 text. That's a raster picture wrapped in an .svg shell. Converters that don't actually trace produce these, and no color tool can help, because there are no shapes to repaint. Filters that "colorize" it just tint the pixels, usually badly. The two files look identical on screen, but in the code the difference is obvious:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

The fix is to go back to the picture itself, ideally the original PNG or JPG, and convert it into a real vector with real paths. Our guide to SVGs that still look pixelated digs into how these fakes happen and how to spot one before you rely on it. Once actual shapes exist, every method in this guide starts working.

Recoloring a cut file: every color is a layer

A Cricut or Silhouette treats each color in your SVG as a layer, and each layer means another pass, another sheet of material, and more weeding. So recoloring a cut file is really layer planning: giving two elements the same fill merges them into one cut, and splitting a color creates a new layer.

That makes one editing move unusually valuable for crafters: merging near-duplicate colors. Traced artwork often carries three almost-identical blues that add layers without adding anything you can see. Collapse them into one and the file cuts faster and weeds far more easily. If you're building multi-layer designs deliberately, our layered SVG guide covers the full workflow, and the Cricut SVG page covers preparing artwork for cutting machines end to end.

What this looks like with PerfectVector

One honest limitation first: PerfectVector doesn't edit SVG files you already have. It converts images (PNG, JPG, WebP) into SVGs. But a surprising amount of "how do I recolor this SVG" pain traces back to that conversion step: the file that fights you is usually a messy trace, or not a real vector at all.

So when the SVG came from an image, or you still have the original picture, the cleanest recolor happens at the source. Convert the image to an SVG that's built to be edited: clean paths, a low node count, and each color kept as its own editable shape. Then use the built-in color editor before you download, to swap any color or merge similar ones, by color rather than by hunting paths. You get the palette you want and a simpler file in the same move, and your first conversions are free, no credit card required.

What a recolor can't do

• Gradients aren't one swatch. A gradient is a ramp between color stops. You can edit the stops, but a plain "replace this color" pass may only move part of the ramp, which is why gradient art looks odd after a naive swap.
• Screen colors aren't print colors. SVG stores RGB values, which are screen colors. If a print job needs an exact brand or foil color, the color spec happens in the print workflow; recoloring the SVG gets you close on screen, and the print shop's color management does the rest.
• Recoloring doesn't clean geometry. New fills won't merge slivers, close gaps, or reduce nodes. A messy trace with new colors is still a messy trace.

Before you save

• Open the recolored file fresh in a browser tab and compare it against the original.
• Check outlines: did strokes change along with fills where they should?
• Look for a stray background rectangle you may have accidentally recolored.
• For cut files, count the layers after merging colors; fewer is almost always better.
• Keep an untouched copy of the original file.

FAQ

How do I change the color of an SVG file without Illustrator or Photoshop? Use a free online SVG color changer (upload, click a swatch, download), or Inkscape, a free desktop vector editor. For a one-color icon, opening the file in any text editor and changing the hex value after fill= also works. None of these cost anything.

Why does my SVG stay black no matter what I try? If it's on a website, CSS can't restyle an SVG loaded through an img tag; inline it or edit the file. If it's in an editor, check for a group in the way, a stroke doing the coloring, or colors defined in a style block. If nothing selects and zooming shows pixels, the file is a raster wrapped in an .svg and has no shapes to recolor.

Can you recolor an SVG in Canva? Partly. Canva can import an SVG and recolor its parts, and its app marketplace has SVG recolor add-ons. Getting an SVG back out is the catch: SVG export is a paid feature, and complex files don't always survive the round trip cleanly. For a quick recolor-and-download, a dedicated SVG color tool or Inkscape is more direct.

Can one SVG file use more than one color? Yes. Every shape in the file carries its own fill and stroke, so an SVG can hold as many colors as it has shapes, plus gradients. That's also why recoloring multi-color art means changing several fills, not one global setting.

How do I change SVG colors for a Cricut project? You can recolor layers inside Cricut Design Space, but it recolors per layer, not per shape. To restructure which parts share a color, and so which parts cut together, edit the SVG before uploading: merge colors you want on one layer, and give a separate fill to anything that should cut separately.

Does changing an SVG's color reduce quality? No. A vector's color is an instruction in text, so changing it rewrites the instruction without touching the geometry. Unlike editing a PNG, you can recolor an SVG as many times as you like with zero quality loss.

Recoloring an SVG is quick once the file cooperates: pick the method that fits what you're holding, and diagnose before you fight your tools. And if the file itself is the problem, skip the fight. Convert the original image into a clean, editable SVG and choose your colors while it's still easy.