vectorizer图像矢量化实战：两个函数把PNG位图变成SVG，放大百倍依然清晰

【免费下载链接】vectorizerPotrace based multi-colored raster to vector tracer. Inputs PNG/JPG returns SVG项目地址: https://gitcode.com/gh_mirrors/ve/vectorizer

如果你手里只有一张 200×200 的 PNG 图标，敢不敢直接把它扔进 4K 海报里？答案大概率是模糊。vectorizer 正是为解决这类问题而生的开源图像矢量化工具，它基于 Potrace 算法，输入 PNG/JPG、返回 SVG，让位图无损升级为矢量图。本文不堆原理术语，只讲清楚两件事：它凭什么能多色描摹，以及你该怎么把它用起来。

一、先问一句：你的图片经得起放大吗

想象一个常见到不能再常见的场景：你给产品做了个 Logo，手机端看着挺好，放大到电视端广告位就糊成一片；印刷厂要求 300dpi，你翻遍素材库只有一张 72dpi 的源文件；为了适配不同设备，你得手动导出 6 个尺寸的图标，改一版就要重导一轮。

问题不在你的设计水平，而在于位图这种存储方式的先天缺陷——它把画面切成固定数量的像素格子，放大时只能靠软件"猜"着补点，猜出来的自然模糊。而矢量图记录的是线条和数学曲线，放大只是重新计算一次坐标，无论放大多少倍都是锐利的。vectorizer 的价值，就是把前者"翻译"成后者，而且不是那种只能出黑白剪影的翻译，它能保留多色层次。

二、像素世界与数学世界的分水岭

把位图想象成一幅用马赛克瓷砖拼出来的画，每块瓷砖一个颜色，离远了看像模像样，凑近了全是方块。矢量图则像乐高说明书上的线条图，只记录"从哪里画到到哪里"，本身没有尺寸概念。

Potrace 算法的思路很直接：先在图像里找出边缘像素，把连在一起的边缘追踪成闭合路径，再用贝塞尔曲线把折线路径拟合光滑。传统 Potrace 只能描单色，vectorizer 的做法是"先分层、再填色"——把图像按明暗拆成若干层分别描摹，最后把原图的真实颜色回填到对应区域，从而实现了多色矢量输出。理解了这条主线，后面所有参数都只是这条流水线上的旋钮。

三、认识 vectorizer：先"看"再"画"的两段式设计

这个库只暴露两个函数，设计得非常克制，思路类似"先问口味，再下厨"：

• inspectImage(image)负责"看"。它会读取图片的主色调、明度分布，判断是黑白图还是彩色图，然后返回一组推荐参数，比如{step: 1, colors: ['#000000']}或{step: 3, colors: [...]}。
• parseImage(image, step, colors)负责"画"。你把推荐参数（或自己调好的参数）喂给它，它完成描摹并把 SVG 写到磁盘。

这种两段式设计最大的好处是降低了门槛：新手完全不用理解算法，先跑一次inspectImage，把打印出来的参数原样丢给parseImage就能出图。想深入时，再手动改参数观察效果差异，学习曲线是平滑的。

四、三分钟上手：从克隆到第一张 SVG

环境要求只有一个：本机装好了 Node.js。然后克隆并安装依赖：

git clone https://gitcode.com/gh_mirrors/ve/vectorizer cd vectorizer npm install

把你要转换的图片命名为logo.png放进项目根目录，新建一个脚本run.mjs：

import { inspectImage, parseImage } from './index.js'; // 第一步：让工具自己分析图片，返回几组推荐参数 const options = await inspectImage('logo'); // 内部会自动读取 logo.png console.log(options); // 第二步：挑一组参数执行描摹，结果写入 logo.svg await parseImage('logo', 3, ['#243b6b', '#f08a2e', '#e8e8e8']);

两个容易踩的坑提前说：图片名不要带.png后缀，内部会自动拼接；图片必须放在当前工作目录。跑完之后，项目根目录会多出一个logo.svg，拖进浏览器或 Figma，试试把它拉大，边缘依然干净。

五、参数拆解：step 与 colors 到底在调什么

step是最值得花时间理解的参数，它控制描摹的精细度：

• step: 1单色模式。整张图只保留一个颜色，颜色取自colors数组的第一项。黑白 Logo、印章、签名这类图像，这个模式又快又干净。
• step: 2 及以上多色模式。step 每加一档，图像被拆分的明暗层就越多，色块细节和边缘层次越丰富，代价是 SVG 体积变大、耗时变长。

colors数组则是你给出的"主色清单"，描摹完成后各个区域的颜色会尽量贴近这些色值，相当于你提前把调色板交给工具。另外有个容易被忽略的细节：多色模式下，工具会给每个色块自动描一圈同色细边，目的是防止相邻色块拼接时漏出白色缝隙——如果你发现输出带着细描边，不是 bug，是防裂缝设计。

六、实战决策表：什么图配什么参数

与其背概念，不如直接对照你的场景选参数：

经验法则：想验证效果，同一张图分别用 step 1、2、3 各跑一遍，三份 SVG 放在一起对比，你会很快形成自己的判断标准，这比记任何参数表都管用。

七、探秘流水线：一张 SVG 是如何"炼"成的

调用一次parseImage，背后其实是一条四段流水线，源码都在项目根目录，值得翻一翻：

1. 分层描摹：potrace.posterize按 step 把图像拆层，输出带透明度的黑白 SVG 草稿；
2. 填充固化：getSolid把透明度和颜色叠加换算成实色填充，多色模式下补上同色描边；
3. 颜色回填：replaceColors用 nearest-color 库为每个描摹区域找到原图对应位置，再通过 quantize 聚类，生成最终贴近原图的调色板；
4. 收尾优化：SVGO 压缩冗余节点，最后一步把固定宽高改成viewBox，让 SVG 具备自适应缩放能力。

想看具体实现，索引如下：主入口 index.js，本地调试示例 index_local.js（里面带三个测试图片的调用写法），接口说明见 README.md。

八、写在最后：下一步三件事

理论讲得再多，不如亲手跑一遍。给你一份最小行动清单：

1. 克隆项目，放一张黑白图进去，先只调inspectImage看它返回什么推荐；
2. 用同一张彩色图分别跑 step 1、2、3，对比体积与细节的取舍；
3. 把产出的 SVG 用进你的网页或设计稿，体验一次无限缩放。

图像矢量化不是魔法，它不会把一张模糊的照片变成高清摄影，但它能把你手头的图标、Logo 和插画从"像素的牢笼"里解放出来。用 vectorizer 打通 PNG 到 SVG 这条路，你以后面对任何分辨率需求时，都能多一个从容的选项。

【免费下载链接】vectorizerPotrace based multi-colored raster to vector tracer. Inputs PNG/JPG returns SVG项目地址: https://gitcode.com/gh_mirrors/ve/vectorizer