SVG Attribute Manipulation

Sometimes you don't need a fancy SVG editor - you just need to reach into every <path> and set opacity to 0.5, or add a class to all the circles so you can style them later. That's exactly the niche SVG Attribute Manipulation fills. It's the Swiss-army find-and-replace for SVG markup, and it saves you the old ritual of copy-pasting your SVG into a text editor, doing a global search, and pasting it back.

How it works

The node takes your SVG string and an operation, then applies it to every element matching an element_selector (a plain tag name like path, circle, or rect - not a full CSS selector). Operations available:

• add_attribute / modify_attribute - set an attribute to a value. Defaults are opacity → 0.5, which is the classic "fade everything matching" move.
• remove_attribute - delete an attribute entirely (handy for stripping junk like data-* or stray transforms).
• add_class / remove_class - add or strip a class name from matching elements.
• add_style / remove_style - inject or delete a CSS property inside the element's style attribute.

Under the hood it works on the raw string with regex against the element's opening tag - it's not a full XML parse. That makes it fast and tolerant of messy SVGs, but it also means it matches literally what you ask for: fill in fill="red" is a different thing from fill inside a style string, and the node knows which one you mean because the operation tells it.

The inputs that matter

• element_selector - which elements to touch. Defaults to path.
• match_index - -1 means "all matching elements." Set it to a specific index (0, 1, 2…) to hit just the Nth match. This is the input that makes the node usable when you have ten circles and only want the second one.
• Then the operation-specific pair: attribute_name + attribute_value, class_name, or style_property + style_value, depending on what you're doing.

Output is a single STRING: the modified SVG, ready to chain into the next svg-suite string node or straight to a save node.

Install

Same as every svg-suite node:

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

Restart ComfyUI, or grab it via ComfyUI Manager by searching "svg-suite". This node is pure string processing - no heavy dependencies involved, so it'll work even if the tracing stack didn't install.

Where people get burned

The selector is a tag name, not a selector language. Typing .myclass or #id won't work - you get nothing matched and, because the node returns the SVG silently, you may not notice until the output looks wrong. If you need real selector power, reach for SVG Element Selector or SVG Element Styler in the same pack instead.

Second thing: modifying an attribute that has been written as a shorthand or via CSS (a <style> block in the <defs>) won't change anything, because the node only edits attributes and style attributes on the element itself. For full stylesheet surgery you want the Styler nodes. For a quick "make all paths half-opacity" move, this node is the one.