ComfyUI SVG Visual Normalize & Margin Node

This ComfyUI custom node processes SVG (Scalable Vector Graphics) images to ensure the artwork consistently fills its canvas, is visually centered, and optionally has a margin applied. It's designed to provide more accurate results for complex vector graphics, such as those generated by vector tracing tools, where simple geometric bounding boxes may not align with perceived visual extents.

Overview

The primary function of this node is to standardize the framing of SVG artwork. It achieves this by:

1. Visual Bounds Detection: Instead of relying solely on raw path coordinates, the node renders the SVG to a temporary raster image. It then analyzes this image to determine the actual visual bounding box of the artwork.
2. Scaling to Fill: Based on this visual bounding box, the artwork is scaled (maintaining aspect ratio) to fill the target canvas area.
3. Visual Centering: The scaled artwork is then centered within the canvas.
4. Margin Application: An optional margin can be applied by shrinking the filled and centered artwork.
5. Canvas Resizing: The final SVG canvas dimensions can be explicitly set.

This method aims to provide a more visually intuitive normalization than purely geometric approaches, which can be less reliable for intricate or irregularly shaped vector graphics.

Features & Inputs

• svg_string: (String) The input SVG code.
• margin_percent: (Float) The desired margin around the artwork, as a percentage of the canvas dimension (e.g., 0.05 for a 5% margin on all sides). Applied after filling and centering. Default: 0.00.
• visual_bbox_padding_percent: (Float) Percentage to expand the detected visual bounding box. This acts as a safety margin to prevent minor clipping if the visual bounds detection is very tight to the artwork. Default: 0.00.
• center_offset_x_percent: (Float) Manually adjust horizontal centering. Percentage of the available content width. Positive values shift right, negative values shift left. Default: 0.0.
• center_offset_y_percent: (Float) Manually adjust vertical centering. Percentage of the available content height. Positive values shift down, negative values shift up. Default: 0.0.
• output_width / output_height: (Integer) Desired pixel dimensions for the output SVG canvas. If one is 0, the other is calculated to maintain the original canvas aspect ratio. If both are 0, original canvas dimensions are used.
• render_scale_for_bbox: (Float, Advanced) Scale factor for the temporary internal rendering used for visual bounds detection. Higher values may increase accuracy for very detailed SVGs but will also increase processing time. Default: 1.0.

Installation

1. Download/Clone:

   • Place the Python file for this node (e.g., svg_visual_normalize_node.py) into your ComfyUI/custom_nodes/ directory.
   • If placing in a subdirectory (e.g., ComfyUI/custom_nodes/my_svg_suite/), ensure the subdirectory is a Python package by including an __init__.py file that exports NODE_CLASS_MAPPINGS and NODE_DISPLAY_NAME_MAPPINGS from your node file(s).

2. Install Python Dependencies: Activate your ComfyUI Python environment and install the required packages:

   pip install -r requirements.txt
   

   The requirements.txt file should contain:

   lxml>=4.5.0
   svg.path>=6.0
   CairoSVG>=2.5.0
   Pillow>=9.0.0
   

3. Install System Dependencies (for CairoSVG): CairoSVG requires the Cairo C library.

   • Debian/Ubuntu Linux:

     sudo apt-get update
     sudo apt-get install libcairo2-dev libgdk-pixbuf2.0-dev python3-dev
     

   • Fedora/RedHat Linux:

     sudo dnf install cairo-devel gdk-pixbuf2-devel python3-devel
     

   • macOS (using Homebrew):

     brew install cairo libffi pkg-config
     

   • Windows: Users may need to install a GTK+ bundle or follow specific instructions from the CairoSVG installation documentation.

4. Restart ComfyUI. The node will appear as "SVG Visual Normalize & Margin" in the menu.

Usage Workflow

The primary goal is to get your artwork unclipped, filling the canvas appropriately, and visually centered, before applying a final margin.

1. Initial Setup:
   • Set margin_percent = 0.0.
   • Set center_offset_x_percent = 0.0.
   • Set center_offset_y_percent = 0.0.
2. Eliminate Clipping:
   • Start visual_bbox_padding_percent at 0.0 or a very small value (e.g., 0.005 which is 0.5%).
   • If any part of your artwork is clipped, gradually increase visual_bbox_padding_percent until all clipping is resolved. This ensures the node is "seeing" the full extent of your artwork.
3. Visual Centering:
   • With clipping resolved, the node will have centered the detected visual bounding box.
   • If the artwork still doesn't look perfectly centered to your eye, use center_offset_x_percent and center_offset_y_percent to make fine manual adjustments. For example, if the image appears too far to the left, use a small positive center_offset_x_percent.
4. Apply Final Margin:
   • Once the artwork is unclipped and visually centered, set your desired margin_percent (e.g., 0.05 for a 5% margin). This will shrink the processed artwork to create the border.
5. Set Output Dimensions (Optional):
   • Specify output_width and output_height if needed.

Limitations

• Performance: The SVG rendering step for visual bounds detection is more resource-intensive than purely geometric calculations. Processing time will depend on SVG complexity and the render_scale_for_bbox setting.
• Dependencies: This node requires external Python libraries (CairoSVG, Pillow, lxml, svg.path) and system-level Cairo libraries.

License

This project is licensed under the MIT License.

---