ComfyUI Node

SVG Styler

Apply a saved look to any SVG with a dropdown and one slider

By MushroomFleet·Created about a year ago·Updated 5 months ago· 9
SVG Styler
    • STRING
    ◄svg_string—►
    â—„style_presetmy_custom_style.jsonâ–º
    â—„style_strength1.0â–º
    â—„exclude_selectorsâ–º
    â—„apply_only_toâ–º

    SVG Styler is the payoff for the whole style-preset system in svg-suite. You pick a look from a dropdown, drag a strength slider, and your SVG gets restyled. If you've ever wanted "make this icon match my brand" to be a single node instead of an hour of attribute wrangling, this is it. It's the node that turns the pack's styles folder into something you actually use.

    How it works

    The node reads JSON style presets from the pack's styles folder (the dropdown is populated by scanning that directory - the shipped presets are colorful_flat, minimalist, neon_glow, watercolor, blueprint, and a my_custom_style). Each preset encodes style rules: selector → properties, colors, gradients, the works. Applying it parses your SVG as XML, finds matching elements, and rewrites their styling according to the preset.

    The style_strength slider (0 to 1, default 1) is the clever part: at 1.0 you get the full preset look, and dialing it down blends the preset's colors toward the original ones. That's how you get "a hint of neon" instead of "full rave." For color-heavy presets this is genuinely useful; for structural styling like stroke widths, strength mostly just fades toward doing nothing.

    Two scope controls let you aim the style: exclude_selectors (comma-separated, e.g. #bg,circle - leave the background and all circles alone) and apply_only_to (apply only to these selectors). Use them. Applying a full preset to an SVG that has a background layer is how you end up recoloring things you meant to keep.

    Output is a single STRING - the restyled SVG.

    Install

    Pack standard:

    cd ComfyUI/custom_nodes
    git clone https://github.com/MushroomFleet/svg-suite
    pip install -r requirements.txt
    

    Restart ComfyUI, or via Manager under "svg-suite". No special dependencies beyond the pack.

    Where people get burned

    New presets (from SVG Create Style) don't appear in the dropdown until you reload the workflow - the node enumerates styles at construction time. Same for presets you hand-drop into the styles folder.

    Second: presets are tag-based (rules for path, circle, rect…), so an SVG with unusual elements or everything in <g> groups may barely change. If you apply a preset and the output looks identical, that's the first thing to check - the preset's selectors didn't match your element tags. And remember SVG Create Style saves its presets from real SVGs, so the round-trip (create from a file you like, apply to the next one) is the workflow that actually delivers consistent brand styling.

    Category💎TOSVG/Styler

    Inputs (5)

    NameTypeDefaultDescription
    svg_stringSTRING—
    style_presetCOMBOmy_custom_style.json6 options: my_custom_style.json, colorful_flat.json, minimalist.json, neon_glow.json, watercolor.json, blueprint.json
    style_strengthFLOAT1.00–1—
    exclude_selectorsoptSTRINGComma-separated list of selectors to exclude (e.g., '#bg,circle')
    apply_only_tooptSTRINGComma-separated list of selectors to exclusively apply style to

    Outputs (1)

    NameTypeDescription
    STRINGSTRING—