SVG Definitions Manager

Gradients are where most DIY SVG editing goes to die. You can recolor a fill with a string replace, but a linear gradient needs a <defs> block, a gradient element, proper stops, and an element that references it by url(#id) - miss any link in the chain and you get a black shape or a broken reference. SVG Definitions Manager does the whole chain for you. It's the node that makes "give this SVG a proper gradient" a one-node operation instead of a trip into markup surgery.

What it can build

The operation dropdown covers the defs you actually use:

• add_linear_gradient / add_radial_gradient - create a gradient with a def_id (e.g. gradient1) and stops.
• add_pattern - a tileable pattern from pattern_content, with pattern_width / pattern_height.
• add_filter - SVG filters via filter_elements (default a Gaussian blur).
• add_mask - from mask_content (default a full white rect - a no-op mask until you edit it).
• add_clip_path - from clip_path_content (default a circle).
• remove_def - delete a def by def_id.

The gradient stops format is the one string you'll actually type: 0%:#ff0000;50%:#00ff00;100%:#0000ff - position and color, semicolon-separated. For linear gradients you also get gradient_x1/y1/x2/y2 (percentages like 0% → 100%), and for radial, gradient_cx/cy/r.

The part beginners miss

Adding the def is only half the job - an SVG def is dead weight until something references it. This node creates the def with your def_id, but you still need to point an element at it. Either run SVG Attribute Manipulation to set fill="url(#gradient1)" on your target elements, or SVG Element Manipulator if you need to add elements that use the reference. Doing add_linear_gradient and wondering why nothing changed is the single most common misstep with this node.

Output is a single STRING: the SVG with the def injected into its <defs> block.

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". The pack's XML nodes lean on lxml, which is in the requirements - if lxml failed to install, this node will error instead of returning output, so check that one specifically.

Where people get burned

Besides the reference half of the job: remove_def removes by ID, so a typo in def_id silently deletes nothing. And duplicate IDs - if you add a gradient with an ID that already exists, you'll have two defs fighting and the browser will only honor one (usually the first). Pick unique def_ids or remove the old def first.

Also note the geometry defaults. A radial gradient with r=50% centered at 50%, 50% covers a typical shape fine, but the clip path and mask defaults are fixed shapes in absolute coordinates - a 100×100 circle clip won't do what you want on a 512×512 canvas. Edit clip_path_content and mask_content to match your art, not the defaults.