SVG Styler
Apply a saved look to any SVG with a dropdown and one slider
- STRING
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.
Inputs (5)
| Name | Type | Default | Description |
|---|---|---|---|
| svg_string | STRING | — | |
| style_preset | COMBO | my_custom_style.json | 6 options: my_custom_style.json, colorful_flat.json, minimalist.json, neon_glow.json, watercolor.json, blueprint.json |
| style_strength | FLOAT | 1.00–1 | — |
| exclude_selectorsopt | STRING | Comma-separated list of selectors to exclude (e.g., '#bg,circle') | |
| apply_only_toopt | STRING | Comma-separated list of selectors to exclusively apply style to |
Outputs (1)
| Name | Type | Description |
|---|---|---|
| STRING | STRING | — |