Nodes/ComfyUI_SVG-Suite/SVG ViewBox Manager
ComfyUI Node

SVG ViewBox Manager

Fix the 'my SVG renders at the wrong size' problem for good

By MushroomFleet·Created about a year ago·Updated 5 months ago· 9
SVG ViewBox Manager
    • STRING
    ◄svg_string—►
    â—„operationset_viewboxâ–º
    â—„min_x0â–º
    â—„min_y0â–º
    â—„width100â–º
    â—„height100â–º
    â—„keep_aspect_ratiotrueâ–º
    â—„padding10â–º

    Every SVG user hits it eventually: the file renders fine in one tool and then comes up microscopic - or as a giant sliver in the corner - somewhere else. Nine times out of ten it's the viewBox being wrong, or missing entirely. SVG ViewBox Manager is the node that fixes that family of problems: set the viewBox explicitly, resize the canvas, or crop the viewBox tight around your actual content.

    Operations

    • set_viewbox - write min_x, min_y, width, height straight into the viewBox attribute. The manual fix.
    • set_dimensions - set the width / height attributes on the <svg> element itself. Different thing from viewBox: this controls the render size in absolute units.
    • auto_fit - make the viewBox match the declared dimensions. The "why is my icon 30000 units wide" fix - if the viewBox and the width/height disagree, auto_fit reconciles them.
    • crop_to_content - compute the bounds of everything actually drawn and set the viewBox to those bounds plus padding. This is the star feature: it trims invisible margins and dead space so your art fills the canvas edge to edge. The default padding of 10 keeps a little breathing room.
    • center_content - recenter the viewBox on the content. The rescue for "my shapes are way off to one side."

    How it works

    For crop_to_content and center_content the node has to figure out where your content actually is, and this is where the honest caveat lives: it inspects element attributes - x/y/width/height on rects, cx/cy/r on circles, endpoints on lines - and for paths it extracts coordinates from the path data with a simplified parse. The path parsing is acknowledged in the source as approximate: it treats path coordinates as a flat x,y stream, which works for typical M...L...Z paths but can misestimate bounds for paths with curves, arcs, or repeated subpaths. Good enough for most converted SVGs; not a true geometry engine.

    Output is a single STRING - the SVG with corrected viewBox/dimensions.

    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". Uses lxml from the requirements.

    Where people get burned

    Don't trust crop_to_content on complex art without a preview. On a file with lots of Bézier curves, the approximate path bounds can slice the viewBox too tight and clip the edges of your shapes. When that happens, bump padding up and check again - or use it on simpler, mostly-straight-line SVGs (which, conveniently, is what a lot of traced output is).

    And remember the distinction: viewBox (the coordinate system) vs width/height (render size) are different attributes, and the two interact - change one and the other suddenly matters. set_viewbox with a fixed width/height will letterbox or stretch your content; that's normal SVG behavior. If the result looks stretched, keep_aspect_ratio (default true) is what holds proportions in place.

    Category💎TOSVG/XMLParser

    Inputs (8)

    NameTypeDefaultDescription
    svg_stringSTRING—
    operationCOMBOset_viewbox5 options: set_viewbox, set_dimensions, auto_fit, crop_to_content, center_content
    min_xoptFLOAT0-10000–10000—
    min_yoptFLOAT0-10000–10000—
    widthoptFLOAT1001–10000—
    heightoptFLOAT1001–10000—
    keep_aspect_ratiooptBOOLEANtrue—
    paddingoptFLOAT100–100—

    Outputs (1)

    NameTypeDescription
    STRINGSTRING—