Create SVG Style
Turn a style you like into a reusable preset, right from the node graph
- STRING
You spent an hour getting a logo to look exactly right - fills, strokes, opacity, the works. The next time you need that look, SVG Create Style means you don't rebuild it from scratch: it scans your finished SVG, pulls out the styling, and saves it as a JSON preset that SVG Styler can apply to any other SVG later. It's the "make this a reusable template" node, and it's the piece that makes the Styler family in this pack actually pay off.
How it works
The node parses your SVG, finds elements matching selectors_to_include (default path,circle,rect - a comma-separated tag list), and groups them by tag. It then extracts the attributes that make up the look: fill, stroke, stroke-width, opacity, plus geometry attributes like d, cx, cy, r, and transform - unless extract_colors_only is on, in which case only the color attributes get captured. Rules are only kept when at least half of the matching elements share the attribute, so you get the consistent style rather than one element's oddball value.
extract_defs (default true) decides whether <defs> content - gradients, filters, masks - gets carried into the preset too, which you almost always want for a look that leans on a gradient.
The preset is saved as a JSON file into the pack's styles folder under style_name (plus description and author metadata). And here's the kicker: the styles folder is scanned at node construction, so any new preset you create shows up in SVG Styler's and SVG Styles Manager's dropdowns after you reload the workflow. Refresh the node or reload, and your new style is selectable like any of the shipped ones.
Inputs and output
- style_name - the filename the preset saves as (
.jsongets appended). - selectors_to_include - which element tags to learn from.
- extract_defs / extract_colors_only - scope control.
- description / author - metadata for your own sanity.
Output is a single STRING - a confirmation of what was saved (you're not getting the SVG back out of this one; the file on disk is the product).
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 extra dependencies.
Where people get burned
The reload thing gets everyone. You create a style, switch to SVG Styler, and your new preset isn't in the dropdown - because the node enumerated styles when the workflow loaded. Reload, and it's there.
Second, "style" here means attributes on elements. If your look lives in a <style> block or depends on filters with very specific parameters, extraction may flatten it to something close-but-not-identical. And since it's sampling common attributes, sparse or inconsistent SVG output can produce a preset that's missing the attribute you cared about most. The fix: extract from a clean, consistent source SVG, and eyeball the saved JSON once to confirm it captured the intent.
Inputs (7)
| Name | Type | Default | Description |
|---|---|---|---|
| svg_string | STRING | — | |
| style_name | STRING | my_custom_style | — |
| description | STRING | Custom style created from SVG | — |
| author | STRING | ComfyUI User | — |
| selectors_to_includeopt | STRING | path,circle,rect | Comma-separated list of selectors to include |
| extract_defsopt | BOOLEAN | true | — |
| extract_colors_onlyopt | BOOLEAN | false | — |
Outputs (1)
| Name | Type | Description |
|---|---|---|
| STRING | STRING | — |