SVG Color Editor

How it works

The file is scanned for colour in the three places it can live — presentation attributes, inline style attributes and <style> blocks — and every distinct value becomes a swatch with an occurrence count. Replacing a swatch rewrites that exact value everywhere it appears, whichever of the three forms it takes. Matching is case-insensitive but notation-exact: #FFF and #ffffff are listed separately because they are different strings in the file, even though they paint the same colour.

When to use it

Rebranding an icon or illustration without opening a vector editor — work down the swatch list swapping each palette entry in turn. Normalising a file where the same grey somehow appears in five spellings. And the one-click case: converting every fill to currentColor before an icon becomes a component, so it follows the text colour of whatever contains it — hover, focus and dark mode included. The colour guide covers why that works and when it won't.

Common problems

• "Nothing matched." The colour is written in a different notation than you typed — rgb(), a named colour, short hex. Pick from the swatch list rather than typing a value from memory; the list is what is actually in the file.
• Two swatches look identical. They are the same colour in two notations, or an upper- and lowercase pair. Replace both, or use "replace all" to collapse everything to one target value.
• The icon still doesn't change on your page. If the file already paints with currentColor, its rendered colour comes from your page's CSS, not from the file — the file was never the problem.
• currentColor flattened a two-tone icon. Converting everything to one inherited colour is exactly what the button does. For icons that need an accent, keep the second tone on a CSS custom property — the pattern is in the guide.