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.
Free preview · 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.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Replace a Color in Photoshop (4 Methods, and Why the Edges Go Wrong)
Replace Color, Hue/Saturation on a targeted range, Color Range plus a fill layer, and Selective Color — which to use when, and why a recolored logo keeps a halo of the old color along its edges.
How to Replace a Color in Figma (Selection Colors, Styles, and the Raster Dead End)
Swapping one specific color across a Figma file — the Selection colors panel, color styles, and find-and-replace plugins — plus an honest account of why it is impossible on a placed image.
How to Replace a Color in Canva (What's Possible on Elements, and What Isn't on Uploads)
Canva can swap colors on vector elements one swatch at a time. On an uploaded photo or PNG there is no per-color control at all — here is the full picture, including the Duotone approximation and its limits.
Recolor your SVG now
Upload a vector, change the colours, download a vector.