SVG Style Editor

A freshly vectorized SVG is all black on all the time. SVG Style Editor is the full-power way to fix that: you give it JSON rules that select paths the way CSS selects DOM elements, and it rewrites their stroke, fill, width, and opacity. If you've ever wanted to say "everything with 'hair' in its id turns red" and have it actually happen, this is the node.

The selector language

The style_rules_json input takes an array of rule objects - {selector, stroke?, fill?, stroke_width?, opacity?} - where selector supports the pack's standard selector engine:

• #path0 - match by ID
• .hair - match by class
• [id*=eye] - match any element whose id contains "eye" (attribute-contains)

So you can style one path, a named group, or a whole family of elements at once. The README's example is the shape of it:

[
  {"selector": "#hair", "stroke": "#000000", "fill": "#FFFF00"},
  {"selector": ".shadow", "opacity": 0.5},
  {"selector": "[id*=eye]", "stroke": "#FF0000"}
]

Three rules, three different targeting strategies, all in one node. Each rule only overrides the fields it mentions - leave fill out and the fill stays as-is.

Outputs: svg (the restyled SVG string - feed to a saver or SVG To Image) and meta (JSON recording which rules matched how many elements; the "did anything actually change" check).

The full-power version

There are two style editors in this pack for a reason. SVG Style Editor (Simple) targets paths by index with flat inputs - path_indices: "0,2-5,10" plus a single stroke color. It's fast and great for coloring specific numbered paths, but it has exactly one selection syntax. This node is the general one: selectors instead of indexes, JSON rules instead of flat fields, multiple rules per run. Use the Simple one when you know the path numbers and just want to recolor a few; use this one when you're styling by semantic names, applying several changes at once, or building rules you can reuse across many SVGs. If you've been through SVG Auto Reorder with renumber_ids on, both work - but selectors survive reordering in a way raw indexes don't, because #path0 means #path0 no matter where it sits in the file.

Install

The whole pack installs together - nothing separate for this node:

cd ComfyUI/custom_nodes
git clone https://github.com/TJ16th/TJ_ComfyUI_Lineart2Vector.git
# restart ComfyUI

or ComfyUI Manager → search TJ_ComfyUI_Lineart2Vector. No models, no API keys, no heavy downloads - it's pure XML manipulation (Python's ElementTree), so the pack's requirements.txt (numpy, opencv, scipy, scikit-image, Pillow) is mostly irrelevant to this node's own runtime. It just needs the pack installed.

Where people get burned

The meta output is your friend - if a rule matched zero elements, it shows up there, and the usual cause is a selector typo or a mismatch with the actual IDs (check with SVG Group Layout's labels). Second trap: selector matching operates on the SVG's current IDs, so if you styled by index last run and then reordered, your selectors may now point at different paths - re-run auto-reorder with renumbering and re-check labels after any reorder. And the tooltip's field list is the contract: stroke, fill, stroke_width, opacity are what you can change. Trying to set a stroke-dasharray or a gradient in a rule won't work - the node writes only the fields it understands.