Nodes/lf-nodes/Image to SVG
ComfyUI Node

Image to SVG

Turn a raster into a real SVG, right in the graph

By lucafoscili·Created 2 years ago·Updated 6 days ago· 35
Image to SVG
  • image
  • mask
  • advanced_config
  • ui_widget
  • svg
  • svg_list
  • image
  • image_list
  • palette
  • palette_list
presetmax_quality
render_modepreset
fill_color
stroke_color
background_color
stroke_width0.0
size_modepreset
viewbox

Sometimes the end product isn't a PNG. Logos, stickers, laser-cutting paths, web assets that need to scale to any size - those want a vector, and LF_ImageToSVG is the node that gets you there without leaving ComfyUI. It vectorizes a raster image into actual SVG path data using vtracer, the fast open-source bitmap-to-vector tracer, and hands you the SVG as a string plus a palette.

Let's be clear about what it is and isn't: this is tracing, not magic. It works brilliantly on flat, high-contrast artwork - logos, stickers, icons, illustration with clear color regions - and it produces a mess on photographic gradients, where every tiny color shift becomes another path. If your input looks like a poster, this will make it a clean scalable asset. If it looks like a photo, you're going to get a heavy, muddy SVG.

How it works

image goes in, and the trace quality comes from preset:

  • max_quality (default) - 8-color trace with heavy fidelity and slow speed. The right default for finished assets.
  • high_quality / balanced - the middle tiers, fewer colors, faster.
  • max_speed - for previews or batch work where you'll re-trace the winner later.
  • custom - unlocks advanced_config (a JSON blob mapping to the tracer's config fields) if you want to hand-tune num_colors, tolerances, and so on.

The optionals worth knowing: mask lets you bring an alpha mask (white keeps, black becomes transparent), so you can trace with transparency instead of a boxed background. render_mode switches between fill / stroke / both output, with fill_color, stroke_color, stroke_width as overrides. And size_mode controls whether the SVG is responsive (width/height 100%) or fixed (pixel dimensions), plus a viewbox override for hand-crafting the coordinate space.

Outputs

svg / svg_list - the generated SVG string(s), which you can write to disk with a file-save node. It also passes through image / image_list (the original), and palette / palette_list - the color set the trace used, handy if you want to re-save the palette or feed it to a color-count node.

Installing it

lf-nodes installs as a pack:

cd ComfyUI/custom_nodes
git clone https://github.com/lucafoscili/lf-nodes

restart ComfyUI, or ComfyUI Manager → "LF Nodes". This is one of the few nodes whose real dependency (vtracer plus svgwrite for SVG output) sits in the pack's requirements.txt - so the install covers it, but only for this pack.

Common issues

  • SVG is enormous / bloated - you traced a photographic image. Drop to max_speed or a lower-color preset, or reconsider whether tracing is the right tool.
  • Background rectangle instead of transparency - you forgot the mask, or left background_color set. Feed a mask to keep the canvas transparent.
  • Colors look off - the trace quantizes to the preset's color count. That's the palette doing its job; bump up a preset tier if the loss is unacceptable.
Category✨ LF Nodes/Image

Inputs (12)

NameTypeDefaultDescription
imageIMAGEInput image tensor to vectorize
presetCOMBOmax_qualityChoose a quality/speed profile. Max quality favours fidelity, max speed favours performance.
maskoptMASKOptional transparency mask (white/1 keeps pixels, black/0 becomes transparent). Broadcasts to all images if a single mask is provided.
advanced_configoptJSON[object Object]Optional overrides for preset values (keys map to SVGTraceConfig fields).
render_modeoptCOMBOpresetOverride preset stroke/fill behaviour.
fill_coloroptSTRINGOverride fill colour (hex or CSS). Leave blank to use preset colours.
stroke_coloroptSTRINGOverride stroke colour (hex or CSS). Leave blank to use preset colours.
background_coloroptSTRINGBackground colour for the SVG canvas. Leave blank for transparent.
stroke_widthoptFLOAT0.00–10Stroke width when stroke rendering is enabled. Leave at 0 to keep preset.
size_modeoptCOMBOpresetResponsive outputs use width/height 100%%, fixed uses pixel dimensions.
viewboxoptSTRINGOptional viewBox override in the format: 'minX minY width height' (e.g. '0 0 24 24'). Leave blank to keep the original image dimensions.
ui_widgetoptLF_COMPARE[object Object]

Outputs (6)

NameTypeDescription
svgSTRINGGenerated SVG string.
svg_listSTRINGList of generated SVG strings.
imageIMAGEOriginal image tensor.
image_listIMAGEList of original image tensors.
paletteSTRINGPalette used for the SVG.
palette_listSTRINGList of palettes used for the SVG.