Nodes/ComfyUI_SVG-Suite/SVG Color Replacer
ComfyUI Node

SVG Color Replacer

Swap a dozen colors at once with one mapping string

By MushroomFleet·Created about a year ago·Updated 5 months ago· 9
SVG Color Replacer
    • STRING
    ◄svg_string—►
    â—„color_mapping#FF0000:#0000FFâ–º
    â—„apply_to_fill_attributetrueâ–º
    â—„apply_to_style_attributetrueâ–º

    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) - touches fill="...".
    • apply_to_style_attribute (default true) - touches colors inside style="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:

    1. Run SVG Color Extractor to see exactly which hex colors are in your file.
    2. Build the mapping string from what you found.
    3. 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.

    Category💎TOSVG/Advanced

    Inputs (4)

    NameTypeDefaultDescription
    svg_stringSTRING—
    color_mappingSTRING#FF0000:#0000FF—
    apply_to_fill_attributeoptBOOLEANtrue—
    apply_to_style_attributeoptBOOLEANtrue—

    Outputs (1)

    NameTypeDescription
    STRINGSTRING—