Recolor SVG
Remap SVG colors by exact match, on fill, stroke or both, in attributes and in inline style. Send one color to currentColor so the icon inherits color from its surrounding CSS.
Recolor SVG swaps matching fill and stroke colors, in both tag attributes and inline style, and writes the result with a -recolor suffix. Target picks fill, stroke or both; map lists comma separated from:to pairs, or point one color at currentColor to inherit from surrounding CSS. Matching is exact text, so red and #ff0000 count as different colors entirely.
Questions
How does the colour matching work?
By exact, case-insensitive text match against whatever the fill or stroke value already is, whether that sits in an attribute or inside an inline style declaration. #ff0000 and red and rgb(255,0,0) are three different strings to this tool even though a browser renders them the same colour.
What is toCurrentColor for?
It sends one specific colour value to currentColor, so an icon built that way inherits its colour from whatever CSS surrounds it on the page, rather than staying fixed to one hard-coded value.
What does target control?
Whether the swap applies to fill values, stroke values, or both; both is the default.
Why did none of my colours change?
Most likely the file spells the colour differently than the text you gave in map, since matching is exact text rather than colour equivalence. Running Optimize SVG first normalises a document to lowercase short hex, which is the easiest form to match against. If nothing at all changes, the tool refuses rather than returning your file unmodified.
What is the output file named?
Your file name with a -recolor suffix in place of the .svg extension.
Compare
| Tool | Runs on the CLI | Live as you type |
|---|---|---|
| Recolor SVG | Yes | Yes |
| Set SVG viewBox | Yes | Yes |
| Convert SVG text to paths | Yes | No |
| Inspect an SVG path | Yes | Yes |
| Validate SVG | Yes | Yes |