SVG Color Editor
Recolor any SVG swatch by swatch, with a live preview.
No SVG loaded
Paste SVG markup or drop a .svg file on the left. Its colours appear here as editable swatches, with filters and export alongside.
In the preview, All jumps to a colour's swatch and Spot isolates just the place you click. Ctrl + scroll to zoom, drag to pan. Filters bake into the downloaded SVG, so everything stays in your browser.
Common questions
Is my SVG uploaded to a server?
No. The file is read, recolored, and previewed entirely in your browser, so your artwork never leaves your device.
How are the colors detected?
The tool scans every color-bearing value in the markup: fill, stroke, and gradient stops (stop-color, flood-color, lighting-color, and color), in both attribute form like fill="#f00" and CSS form like fill:#f00 inside a style attribute or a <style> block.
Why do #f00, red, and rgb(255,0,0) show as one swatch?
They all describe the same color, so the tool normalizes each value to a single #rrggbb key and groups them. Editing that one swatch recolors every matching place at once, whatever notation each used.
Can I edit a gradient or a currentColor icon?
Individual gradient stops appear as swatches and are editable. A gradient reference like fill="url(#id)" points at the gradient rather than a fixed color, so it is not listed. Values set to currentColor or none are skipped too, since they have no fixed color to pick.
What happens to transparency when I change a color?
Only the colors you actually edit are rewritten, and they become a solid hex. Colors you leave alone keep their original text exactly, including any rgba or 8-digit hex alpha.
How do I get the result back out?
Copy the edited markup straight from the code panel, or download it as a .svg file. Both reflect your color edits, and the code panel stays fully editable if you want to tweak the markup by hand.