SVG Auto Reorder (Smart)

SVG draws in document order: whatever appears last in the file renders on top. When Centerline to SVG spits out paths, they come back in the order the contour finder happened to walk the mask - which is to say, arbitrary. For line art that's mostly strokes with no fill it barely matters. The moment you have filled shapes - a solid shadow, a pupil, a background block - arbitrary order means your "background" can end up drawn on top of your "foreground." SVG Auto Reorder fixes the ordering for you.

The four sort modes

The sort_mode input is the whole node:

• area_desc - big paths first, small paths last. The idea: large areas are usually backgrounds and big structural shapes, small paths are details that belong on top. This is the default thinking for filled art.
• area_asc - small first, large last. The reverse; pick it if your "background" is actually a tiny accent.
• proximity - groups nearby paths together with nearest-neighbor clustering, so paths that sit near each other in the image stay near each other in the file. Good for grouped SVG output where each cluster reads as a region.
• area_then_proximity - the default. Sorts into size tiers (area_tiers, default 3), then within each tier applies proximity clustering. Best of both: big-to-small overall, but locally coherent.

Each path gets its bounding-area and centroid computed from the path data, and the sort uses those. Two more options: reverse flips the final order, and renumber_ids (default on) renames every path to path0, path1, … after sorting.

Why renumbering matters more than it sounds

Path IDs are how the other editing nodes find things. SVG Style Editor (Simple) selects by index, SVG Reorder and SVG Visibility select by selector like #path0 or [id*=hair]. If your IDs are whatever the vectorizer generated, you can't write those rules. Run this node with renumber_ids on and suddenly #path3 is a stable handle you can style - the README's own tip is to auto-reorder + renumber before doing any index-based editing. It's the recommended warm-up for everything downstream.

Outputs: svg (reordered SVG string - feed to any editor, saver, or layout node) and meta (JSON with per-path stats: area, position, new order - useful for figuring out which index is which).

Install

Standard pack install, no downloads beyond the code:

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

or ComfyUI Manager → search TJ_ComfyUI_Lineart2Vector. Dependencies: mostly stock ComfyUI stuff (numpy, opencv, scipy, scikit-image), so a fresh clone usually just works.

Where people get burned

area_desc is not a magic "backgrounds go under" button - it's a heuristic, and small filled shapes that should be under big linework will still end up on top. If your filled art is layered in a way size can't capture, that's what SVG Reorder (manual priority rules) is for. Also: auto-reorder reorders within whatever grouping your SVG already has, so if you have <g> groups with their own internal order, check whether you want to flatten first. And don't forget reverse exists - half the "why is this wrong" complaints are solved by flipping it. When in doubt, wire svg into SVG To Image or SVG Group Layout and look.