ComfyUI Node

SVG Group Layout

The debug view that saves you from a vectorizing blind trust

By TJ16th·Created 11 months ago·Updated 11 months ago· 3
SVG Group Layout
    • image
    • meta
    ◄svg_string—►
    ◄canvas_width1024►
    ◄canvas_height1024►
    ◄background▾►
    ◄background_color#00000000►
    ◄group_positions_json[]►
    ◄auto_layouttrue►
    ◄tile_cols4►
    ◄tile_spacing16►
    ◄show_all_backgroundfalse►
    ◄background_opacity0.15►
    ◄background_stroke_color#888888►
    ◄override_fill_color►
    ◄override_stroke_color►
    ◄show_grid_linestrue►
    ◄grid_line_color#CCCCCC►
    ◄grid_line_width1►
    ◄show_labelstrue►
    ◄label_color#000000►
    ◄label_size12►
    ◄show_control_pointsfalse►
    ◄control_point_size3►
    ◄control_point_color#00AEEF►

    Vectorizing line art blind is how you end up with an SVG where a stray contour is ruining everything and you have no way to find it. SVG Group Layout is the pack's answer: it takes your SVG and tiles every path or group onto a single canvas - one per cell, labeled - so you can see each extracted element in isolation, check the IDs, and figure out what you're actually working with before you start styling or reordering.

    Auto-layout: the debug view

    With auto_layout on (the default) and no manual placements, the node tiles everything into a grid. From the source, it tiles top-level <g> groups if your SVG has them, or individual paths if it's flat. The knobs that matter:

    • tile_cols (default 4) and tile_spacing (default 16) - grid geometry.
    • show_labels (default on) and label_size/label_color - draw each element's ID under its tile. This is the killer feature: path0, path3, [id*=hair] all become visible things you can identify at a glance. The README's own debugging tip is "enable show_labels to see path IDs."
    • show_grid_lines (default on) - separators between cells.
    • show_all_background + background_opacity (default 0.15) + background_stroke_color - draws all paths faintly behind the grid, so you can see how each element relates to the whole composition while still examining it alone. Genuinely nice for spotting which path is the background.
    • override_fill_color / override_stroke_color - force a uniform color across every tile so the geometry reads clearly instead of a color soup. Useful since vectorized fills are usually black.

    Manual placement: a real layout tool

    The same node does more than debug. group_positions_json takes an array of placement rules and becomes a mini design tool:

    [
      {"selector": "#path0", "x": 100, "y": 100, "scale": 1.5, "stroke": "#FF0000FF", "fill": "none", "stroke_width": 2.0},
      {"selector": "#path1", "x": 400, "y": 100, "fill": "#00FF00FF", "opacity": 0.8}
    ]
    

    Each rule supports x, y, scale, rotate, stroke, stroke_width, fill, opacity - so you can compose an XY plot of your paths, recolor per tile, and export it as a raster via the image output. That's the "visualization" half of the pack's pitch, and it's more useful than it sounds: stylized posters, layering proofs, tile sheets of all your extracted shapes.

    Outputs: image (the rendered composite, IMAGE) and meta (layout statistics JSON - tile positions, sizes, that kind of thing).

    Install

    Standard pack install, nothing exotic:

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

    or ComfyUI Manager → search TJ_ComfyUI_Lineart2Vector. Dependencies are the stock ComfyUI stack plus scipy/scikit-image - no models, no keys. Like the rest of the pack it renders via the same Pillow path renderer, so the same "basic paths only" caveat applies: complex SVG features won't show up in tiles.

    Where people get burned

    The number-one confusion is mixing the two modes: auto_layout and a non-empty group_positions_json. Non-empty placements win and the grid silently disappears. If you filled in the JSON for one rule and the whole layout looks wrong, that's why. Second: labels are only as useful as your IDs - if you skipped renumber_ids in SVG Auto Reorder, your labels are whatever the vectorizer produced, so run the reorder first. And if a tile looks empty, remember the Pillow renderer limitation - the path may be valid but use a syntax this renderer doesn't draw.

    CategoryTJ_Vector

    Inputs (23)

    NameTypeDefaultDescription
    svg_stringSTRING—
    canvas_widthINT102416–8192—
    canvas_heightINT102416–8192—
    backgroundCOMBO4 options: transparent, white, black, custom
    background_colorSTRING#00000000—
    group_positions_jsonoptSTRING[]Array of {selector, x, y, scale?, rotate?, stroke?, stroke_width?, fill?, opacity?}
    auto_layoutoptBOOLEANtrue—
    tile_colsoptINT41–32—
    tile_spacingoptINT160–512—
    show_all_backgroundoptBOOLEANfalseShow all paths in background at low opacity
    background_opacityoptFLOAT0.150–1—
    background_stroke_coloroptSTRING#888888—
    override_fill_coloroptSTRINGOverride all fill colors (empty = use original)
    override_stroke_coloroptSTRINGOverride all stroke colors (empty = use original)
    show_grid_linesoptBOOLEANtrue—
    grid_line_coloroptSTRING#CCCCCC—
    grid_line_widthoptINT11–10—
    show_labelsoptBOOLEANtrue—
    label_coloroptSTRING#000000—
    label_sizeoptINT126–48—
    show_control_pointsoptBOOLEANfalse—
    control_point_sizeoptINT31–20—
    control_point_coloroptSTRING#00AEEF—

    Outputs (2)

    NameTypeDescription
    imageIMAGE—
    metaSTRING—