Vectorize 的作用是把栅格图像(raster image)转换成 SVG 矢量图。它提供三条路径,可按质量要求、是否需本地处理以及颜色数量来选择。
一、三条转换路径
- Recraft /vectorize(托管,质量最高) 输入为任意位图,输出为干净的 SVG,通常一个标志约 20–100 条路径,插画约 200–500 条路径。仅限商业版(Commercial tier only)。调用方式为代码:
const svg = await recraft.vectorize({ image: pngBuffer });
- vtracer(本地,多色多边形) 为 Rust 二进制,Node 包装器通过 npm install vtracer 安装。模式包括:polygon(推荐用于 logo)、spline(曲线更平滑)、pixel(块状)。颜色数量在上游通过矢量化的 K-means 量化控制。示例 pipeline:
pipeline: raster 1024² → BiRefNet matte (alpha the background) → K-means LAB 6-color palette → vtracer --mode polygon --filter-speckle 4 --color-precision 6 → SVGO (conservative preset)
- potrace(本地,1-bit) 经典 Stan Ford 矢量器,仅输出二值结果(无颜色)。最适合:图标包(单色)、字体排印工作、线稿。多色变通方法:把每种颜色分离成各自的 1-bit 图层,逐层矢量化,再用 SVG 的 <g> 堆叠。示例 pipeline:
pipeline: raster 1024² → BiRefNet matte → per-color mask (binary threshold per palette entry) → potrace per mask → <g> wrapper → combine into single SVG → SVGO
二、路径选择
预算充足、追求一次成功质量:Recraft vectorize。 多色 logo、需要本地处理:vtracer(polygon 模式)。 单色图标包:potrace。 写实插画转矢量:不建议——保持为 PNG/WebP。写实图像矢量化会产生有损噪点。
三、路径数量作为质量信号
矢量化后统计 <path> 元素数量: ≤40 条路径 → 干净、可用于生产的标志。 40–200 条路径 → 大致可接受;检查是否有重叠的碎片。
200 条路径 → 可能有问题。原因可能是输入有噪点(需重新生成)、颜色过多(需减少 K-means 数量),或该主体不适合矢量化(应保持为栅格图)。
四、SVGO 配置
使用保守式预设——保留:viewBox、IDs、classes。移除:metadata、编辑器注释、隐藏元素。配置如下:
{ multipass: true, plugins: [ { name: 'preset-default', params: { overrides: { removeViewBox: false, cleanupIds: { minify: false } } } }, 'removeDimensions', // prefer viewBox-only 'sortAttrs', 'removeScriptElement' // security ] }
不要启用带默认 floatPrecision 的 convertPathData——它会压塌细小的笔画。
五、校验
SVG 能被 @resvg/resvg-js 解析且无错误。 <path> 数量对 logo ≤ 200,对插画 ≤ 500。 不含 <image> 标签(防止把栅格塞进 SVG)。 不含 <script> 标签。 存在 viewBox。 以 1024 × 1024 栅格化后应与源位图视觉一致(SSIM > 0.95)。
六、输出结构
vector/ ├── mark.svg # primary vectorization ├── mark.svg.orig # pre-SVGO original (for debugging) └── meta.json # paths_count, colors_used, svgo_savings_bytes
以上介绍基于所给资料,未提及的功能、收费细节、平台支持范围与具体效果均暂未提供。