Change the Colors in an SVG
Upload an SVG, pick a new colour, and download a real vector file. The fill and stroke attributes are rewritten inside the artwork, so nothing is rasterized and nothing gets blurry.
Describe the edit — the AI assistant does it on the canvas.
2 free credits · No signup · ~10 seconds
A True Vector Edit, Not a Screenshot of One
The paths are edited, not painted over
Most browser tools that claim to recolour an SVG draw it onto a canvas, change the pixels, and hand you back a bitmap wearing an .svg extension. This one parses the markup and rewrites the fill and stroke values on the paths themselves. What you download is the same vector artwork with different colour values in it — still editable, still infinitely scalable.
Still scales to any size
Because the geometry is untouched, the recoloured file behaves exactly like the original everywhere it mattered: crisp on a retina display, crisp on a billboard, and still small enough to inline in your CSS. A rasterized "SVG" fails all three the moment anyone zooms in.
One colour or every colour
Set the whole mark to a single brand colour, or read out the individual paints the file declares and remap them one at a time. Gradient stops are picked up as well, so a logo built from a gradient does not have to be flattened before you can change it.
When you get a PNG instead, and why
Vector output survives a straight recolour. It cannot survive effects that have no vector equivalent — a duotone map, a drop shadow, a background removal, a sticker outline. Apply one of those and the result is honestly returned as a PNG rather than an SVG that quietly contains a bitmap. The tool tells you which one you are getting before you download.
Nothing is uploaded
The markup is parsed and rewritten in your own browser. An unreleased client logo never leaves your machine, and the whole edit works offline once the page has loaded.
Getting a clean SVG out
Keep the recolor plain if you need vector out
A colour change alone preserves the vector. Adding padding, a background tile or an effect forces a raster export, because there is no faithful vector equivalent to produce.
An SVG containing a photo is still a photo
Some exports embed a bitmap inside the SVG wrapper. Those have no paths to recolour, so they behave like the raster file they actually are.
Check the format label before you download
The export names the format you are about to get. If it says PNG and you wanted SVG, remove the effect you added and the vector path becomes available again.
Keep the original
Recolouring is not destructive here, but working forward from the source file each time beats re-editing an already-recoloured copy.
Real Vector Recolor vs a Rasterized "SVG"
Vector recolor
Paths edited in place
- Fill and stroke values rewritten in the markup
- Scales to any size, still crisp
- Typically a few KB
- Still editable in Figma or Illustrator
Web logos, developer handoff, print and signage
Effects with no vector equivalent, such as duotone
Rasterized output
A bitmap in an .svg wrapper
- Pixels drawn onto a canvas, then wrapped
- Blurs the moment anyone zooms in
- Often far larger than the original
- Cannot be restyled with CSS
Nothing, really — a PNG would be more honest
Any use where the file gets scaled or handed to a developer
How to change the colors in an SVG
Upload your SVG
Drag the file in or click to browse. It is parsed in your browser and drawn on the left so you can compare as you work.
Pick your color
Choose a single colour for the whole mark, or open the individual colours the file declares and remap them one by one. The preview updates as you go.
Download the SVG
Export the recoloured vector. Check the format label first — a plain recolour returns an SVG, while added effects return a PNG.
Where recolouring an SVG beats re-exporting it
A dark-mode logo
Produce a white vector version of your mark for a dark interface without touching the original file.
Developer handoff
Ship an SVG a developer can inline and restyle in CSS, rather than a PNG they will ask you to re-export twice.
Print and signage
Print shops and sign makers ask for vector files. A recoloured SVG stays acceptable; a rasterized one gets rejected.
Brand colour updates
Roll a new palette through an existing icon set without redrawing anything.
Icon set consistency
Force icons collected from several sources into one shared colour while keeping them vector.
Used by designers, indie devs & students at
What people use it for
The jobs the editor was built around — and what it does differently on each one.
Colourways you can revisit
Every edit is a layer, not a bake. When the brand shifts, reopen the file and change the colour rather than rebuilding the variant from the original.
Cutouts with awkward edges
AI background removal that keeps hair, foliage and soft shadows instead of stamping a hard outline around them. The output is a transparent PNG, ready to place.
No export, edit, re-import loop
The Framer plugin runs on the canvas you are already working in, so a recolour or a cutout does not mean a round trip through a second application.
Ten options in the time one used to take
Recolour once and step through the alternatives, so a client review can look at the whole range instead of the one version there was time to make.
Brand colours matched exactly
Pick a colour straight off an existing asset and get the hex, rather than eyeballing it against a screenshot and hoping it is close enough.
Free to preview, priced per export
Previewing is unlimited and costs nothing. A credit is spent only when you download a full-resolution file, so exploring an idea is never the expensive part.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Make a Vector Logo (and When You Actually Need One)
What vector really means, the three honest routes from where you are now, when auto-tracing works, and how to check the result is genuinely vector.
SVG vs PNG for Logos: Which File Do You Actually Need?
What SVG and PNG really are, where each one wins, why your developer keeps asking for the SVG, and the three files that cover almost every request.
How to Get Your Website Ready for Google WebMCP
A step-by-step guide to exposing WebMCP tools on your site — the imperative and declarative APIs, how to test them, and the real security downsides.
Recolor your SVG now
Upload a vector, change the colours, download a vector.