Nodes/ComfyUI_SVG-Suite/Create SVG Style
ComfyUI Node

Create SVG Style

Turn a style you like into a reusable preset, right from the node graph

By MushroomFleet·Created about a year ago·Updated 5 months ago· 9
Create SVG Style
    • STRING
    ◄svg_string—►
    â—„style_namemy_custom_styleâ–º
    â—„descriptionCustom style created from SVGâ–º
    â—„authorComfyUI Userâ–º
    â—„selectors_to_includepath,circle,rectâ–º
    â—„extract_defstrueâ–º
    â—„extract_colors_onlyfalseâ–º

    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 (.json gets 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.

    Category💎TOSVG/Styler

    Inputs (7)

    NameTypeDefaultDescription
    svg_stringSTRING—
    style_nameSTRINGmy_custom_style—
    descriptionSTRINGCustom style created from SVG—
    authorSTRINGComfyUI User—
    selectors_to_includeoptSTRINGpath,circle,rectComma-separated list of selectors to include
    extract_defsoptBOOLEANtrue—
    extract_colors_onlyoptBOOLEANfalse—

    Outputs (1)

    NameTypeDescription
    STRINGSTRING—