PIP SVG Recorder
Design a text style in ComfyUI and ship it as a reusable SVG
- 背景颜色
- 填充颜色
- 填充渐变颜色1
- 填充渐变颜色2
- 描边颜色
- 描边渐变颜色1
- 描边渐变颜色2
- 阴影颜色
- 内阴影颜色
- 外发光颜色
- 预览图
- 信息
Every style in the PIP_ArtisticWords pack is an SVG file. That's the entire architecture: drop an SVG in, restart, and it shows up in the style dropdowns of the text nodes. So how do you make your own style without hand-editing XML? PIP SVG Recorder. It renders styled text to a preview image, and if you switch it to save mode, it writes a ready-to-use SVG template straight into the pack's SVG/ folder. Design loop, closed.
What it does
Give it some text, a font, a size, and as many effect parameters as you can stand, and it returns:
- 预览图 (
IMAGE) - your text rendered with the current effect settings on a (default transparent) background. - 信息 (
STRING) - a text dump of every applied setting, so you can see what you actually built.
The one input that changes its behavior entirely: 操作模式. In 测试模式 (test mode) it only previews. In 保存模式 (save mode) it also writes SVG/<文件名称>.svg (default filename my_style) and - after a ComfyUI restart - that style appears in the Generator and Preview nodes' style lists.
The inputs that matter
Required: 文本内容 (the sample text), 字体名称 (the five bundled fonts), 字体大小 (8–500, default 72), 操作模式, 文件名称, and 预览宽度/预览高度 (128–2048, default 512).
Then the optional effects, all in Chinese labels:
- 启用填充 / 填充类型 - fill as 纯色 (solid), 渐变 (gradient), or 无填充 (none). Gradients take two colors plus a direction (8 options, 从左到右 through 右上到左下).
- 启用描边 - outline with width (0–50), opacity, color, and its own gradient option.
- 启用阴影 - drop shadow with color, opacity, X/Y offset, and blur (0–100).
- 启用内阴影 - inner shadow (off by default) with the same controls plus its own offsets.
- 启用外发光 - outer glow (off by default) with color, opacity, blur, and intensity.
- 背景颜色 / 背景透明度 - only for the preview, so you can see a light or dark style against something.
How it works
The node builds a style dict from all those options, renders the preview through the same TextRenderer / EffectsProcessor pipeline the other nodes use, and in save mode hands the dict to an SVG generator that writes a properly structured SVG - <defs> with gradient/filter definitions, <path> with the fill and stroke references - matching what the README documents for hand-authored styles. It's the same format designers export from Sketch after converting text to outlines, so the two paths converge.
Installing it
Part of the PIP_ArtisticWords pack, one-time install:
cd ComfyUI/custom_nodes
git clone https://github.com/chenpipi0807/PIP_ArtisticWords.git
cd PIP_ArtisticWords
pip install -r requirements.txt
Or search "PIP Artistic Words" in ComfyUI Manager and restart. Dependencies are Pillow, numpy, opencv-python, and webcolors - nothing else.
Gotchas
- Saved styles need a restart to appear. The dropdowns are populated at startup, so a freshly saved SVG won't show until you reload ComfyUI. Slightly annoying, fully intentional.
- Save mode overwrites silently. A filename that already exists in
SVG/gets clobbered with no warning. Give styles unique names (the defaultmy_stylewill collide on the second save). - Only the saved SVG matters, not the preview. If the rendered preview and the later Generator output differ slightly, that's the same effect pipeline, so they should match - but the SVG is the source of truth.
- Chinese UI, again. All labels are Chinese (操作模式, 文件名称, 启用填充…). The 测试/保存 mode toggle is the one you must find, so bookmark this page if your ComfyUI doesn't translate them.
- Font licensing applies to anything you design here - the bundled 方正风雅宋 is a commercial font, and the README's warning covers it.
Inputs (42)
| Name | Type | Default | Description |
|---|---|---|---|
| 文本内容 | STRING | 艺术字 | — |
| 字体名称 | COMBO | Knewave-Regular | 5 options: Knewave-Regular, Lobster-Regular, PermanentMarker-Regular, Yesteryear-Regular, 方正风雅宋 |
| 字体大小 | INT | 728–500 | — |
| 操作模式 | COMBO | 测试模式 | 2 options: 测试模式, 保存模式 |
| 文件名称 | STRING | my_style | — |
| 预览宽度 | INT | 512128–2048 | — |
| 预览高度 | INT | 512128–2048 | — |
| 背景颜色opt | COLOR | #FFFFFF | — |
| 背景透明度opt | FLOAT | 0.00–1 | — |
| 启用填充opt | BOOLEAN | true | — |
| 填充类型opt | COMBO | 渐变 | 3 options: 纯色, 渐变, 无填充 |
| 填充颜色opt | COLOR | #4096FF | — |
| 填充渐变类型opt | COMBO | 线性渐变 | 1 options: 线性渐变 |
| 填充渐变方向opt | COMBO | 从上到下 | 8 options: 从左到右, 从右到左, 从上到下, 从下到上, 左上到右下, 右下到左上, +2 |
| 填充渐变颜色1opt | COLOR | #EE2883 | — |
| 填充渐变颜色2opt | COLOR | #FFDC7D | — |
| 启用描边opt | BOOLEAN | true | — |
| 描边宽度opt | INT | 50–50 | — |
| 描边透明度opt | FLOAT | 1.00–1 | — |
| 描边类型opt | COMBO | 渐变 | 2 options: 纯色, 渐变 |
| 描边颜色opt | COLOR | #000000 | — |
| 描边渐变类型opt | COMBO | 线性渐变 | 1 options: 线性渐变 |
| 描边渐变方向opt | COMBO | 从左到右 | 8 options: 从左到右, 从右到左, 从上到下, 从下到上, 左上到右下, 右下到左上, +2 |
| 描边渐变颜色1opt | COLOR | #EE2883 | — |
| 描边渐变颜色2opt | COLOR | #FFDC7D | — |
| 启用阴影opt | BOOLEAN | true | — |
| 阴影颜色opt | COLOR | #000000 | — |
| 阴影透明度opt | FLOAT | 0.60–1 | — |
| 阴影X偏移opt | INT | 5-100–100 | — |
| 阴影Y偏移opt | INT | 5-100–100 | — |
| 阴影模糊opt | INT | 100–100 | — |
| 启用内阴影opt | BOOLEAN | false | — |
| 内阴影颜色opt | COLOR | #9900FF | — |
| 内阴影透明度opt | FLOAT | 0.70–1 | — |
| 内阴影X偏移opt | INT | 2-50–50 | — |
| 内阴影Y偏移opt | INT | 2-50–50 | — |
| 内阴影模糊opt | INT | 20–50 | — |
| 启用外发光opt | BOOLEAN | false | — |
| 外发光颜色opt | COLOR | #00FF00 | — |
| 外发光透明度opt | FLOAT | 0.80–1 | — |
| 外发光模糊opt | INT | 100–20 | — |
| 外发光强度opt | FLOAT | 1.00–1 | — |
Outputs (2)
| Name | Type | Description |
|---|---|---|
| 预览图 | IMAGE | — |
| 信息 | STRING | — |