SVG Color Replacer
Swap a dozen colors at once with one mapping string
- STRING
This is the node you use the day after you finish your SVG and realize the client's brand colors are completely different from what you designed with. SVG Color Replacer swaps any number of colors in one pass, using a single mapping string, and it's the node svg-suite's own README builds its color workflow around: extract colors first, then map them.
The mapping format
Everything hangs on color_mapping. The format is comma-separated source:target pairs:
#FF0000:#0000FF,#00FF00:#FFFF00
That reads "replace every #FF0000 with #0000FF, and every #00FF00 with #FFFF00." You can chain as many pairs as you need - that's the whole batch-processing story in one field. It's a plain text swap, not a filter, so it's fast, deterministic, and doesn't care how many elements use a color.
Two toggles decide where the swap happens:
- apply_to_fill_attribute (default
true) - touchesfill="...". - apply_to_style_attribute (default
true) - touches colors insidestyle="fill: ...".
Leave both on and you cover the two places SVG colors normally live. If your SVG is styled via CSS classes in a <style> block, though, neither will catch it - that's the classic blind spot, and it's worth knowing before you blame the node.
How it works
It parses the mapping into a dict, then replaces each source color with its target throughout the SVG markup. It's a string-level operation, so there's no geometry recalculated and no risk of touching paths - only the color text changes. If the mapping can't be parsed, the node prints an error to the console and returns your SVG unchanged, which is the silent-failure pattern this pack uses a lot.
Output is a single STRING: the recolored SVG.
The workflow that works
The README's suggested pipeline is genuinely the right one:
- Run
SVG Color Extractorto see exactly which hex colors are in your file. - Build the mapping string from what you found.
- Feed it here and preview.
Using the extractor's output to build the mapping is the difference between a two-minute task and a 20-minute guessing game - traced SVGs almost never contain the colors you think they do.
Install
Standard pack install:
cd ComfyUI/custom_nodes
git clone https://github.com/MushroomFleet/svg-suite
pip install -r requirements.txt
Restart ComfyUI, or search "svg-suite" in ComfyUI Manager. No extra dependencies beyond the pack.
Gotchas
Formatting is strict: hex colors with #, pairs separated by :, pairs separated by ,. A stray space or a missing # and the pair quietly won't match - there's no warning for a source color that doesn't exist in the file. And remember it's exact-match only; for "this red and its 10 near-relatives" you want SVG Color Manipulation with its color_tolerance. For a clean, explicit, multi-color rebrand, this is the one.
Inputs (4)
| Name | Type | Default | Description |
|---|---|---|---|
| svg_string | STRING | — | |
| color_mapping | STRING | #FF0000:#0000FF | — |
| apply_to_fill_attributeopt | BOOLEAN | true | — |
| apply_to_style_attributeopt | BOOLEAN | true | — |
Outputs (1)
| Name | Type | Description |
|---|---|---|
| STRING | STRING | — |