SVG Element Styler

There's more than one way to style an SVG element, and SVG Element Styler lets you pick your poison: slap a style="..." straight onto the element, tag it with a class, or inject a full <style> stylesheet into the document. It's the node for when SVG Attribute Manipulation's single-attribute approach isn't enough and you want real CSS semantics.

The three style methods

• inline_style - appends your style_properties (default fill: red; stroke: black; stroke-width: 2;) to each matching element's existing style attribute. Blunt, visible, and hard to override later - but it wins every specificity battle.
• class_style - adds class_name to matched elements, and if you supply css_rules, it also adds or updates a <style> block defining that class. This is the "proper" approach: clean separation of markup and presentation.
• add_stylesheet - doesn't touch the elements at all; just injects your css_rules as a <style> block into the SVG head. Use it to add rules that target things you haven't selected yet, like #special { opacity: 0.5; }.

The selector (tag name like path, or #id / .class forms - this node supports a bit more selector syntax than some of its siblings) and target_index (-1 = all) control scope, same as the other element nodes.

How it works

It parses the SVG as XML, finds matching elements, and either edits their style/class attributes or inserts/updates a <style> element (placed after <defs> if one exists, else at the top of the document). Styles are merged onto existing ones rather than wiped, so running it twice accumulates rules - which is usually what you want, but worth remembering when you're debugging "why is it red AND blue."

Output is a single STRING: the styled 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". Needs lxml.

Where people get burned

Pick one method and stay consistent. Mixing inline_style (which wins) with class_style (which can be overridden) on the same elements produces genuinely confusing results - an inline rule you can't see in your stylesheet and can't easily remove. If you're going class-based, commit to it.

Second, note the stylesheet positioning: the <style> block is injected after <defs> or at the document top, which is valid - but if your SVG uses presentation attributes (fill directly on elements), those lose to any CSS rule, which can surprise people expecting attributes to win. For a converted SVG full of fill="..." attributes, inline_style or attribute manipulation is often the more predictable route than trying to out-CSS the existing markup.