知识科普 · 阅读约7分钟
位图与矢量图：图片描摹能做到什么，做不到什么
位图是一格一格的彩色小点，矢量图是一份图形清单。描摹，就是根据小点去猜出图形，这对有些图效果出色，对另一些图则只能大致还原。原因在这里。
01 · 两种图片
点阵与图形
同一幅画面，两种完全不同的描述。
位图（也叫栅格图、点阵图），比如PNG、JPG、GIF、WebP、BMP、照片、截图，是一个由像素组成的矩形，每个像素是一种颜色。一个1000 × 1000的Logo就是一百万个数字。文件里没有圆，也没有字母，只有在那个尺寸下碰巧看起来像圆和字母的小点。放大之后，小点变大；渲染器可以在它们之间做模糊过渡，但它没法知道边缘本来应该在哪里。
矢量图，比如SVG、EPS、PDF、AI，保存的是图形本身：“圆心在(100, 100)、半径40、填充蓝色”，或者更一般地说，由直线和贝塞尔曲线组成的路径。它没有分辨率。一个矢量Logo在16像素的网站图标和10米长的横幅上显示得一模一样，而PNG格式下200 KB的Logo，存成SVG往往只要5 KB。
| 位图（PNG、JPG等） | 矢量图（SVG等） | |
|---|---|---|
| 组成 | 像素网格 | 线条、曲线和填充 |
| 放大后 | 变模糊或出现马赛克 | 任何尺寸都清晰 |
| 最适合 | 照片、纹理、截图 | Logo、图标、文字、示意图、切割文件 |
| 编辑方式 | 逐像素修改 | 移动一个点、更改一种填充 |
| 文件大小 | 随分辨率增大 | 随复杂度增大 |
想比较具体的两种格式？PNG和SVG的区别讲了文件大小、浏览器兼容性，以及什么时候该选哪一个。
02 · 描摹的原理
从像素变回图形
描摹（矢量化）就是把这个过程倒过来。AnyToSVG分五步完成，全部在你的电脑上：
- 找出平滑明暗的区域。与周围所有像素只有细微差别的像素会被归为一个区域；每个较大的区域都用线性或径向颜色模型去拟合，如果模型解释得好，这个区域就变成一个带SVG渐变填充的图形。
- 把剩下的像素按颜色归类。主要颜色构成2到32种的调色板，每个像素归到最接近的那一种。抗锯齿产生的边缘像素是混合色，会被清理，避免它们自成一条细细的颜色。
- 为每种填充做一张蒙版，也就是一张表示“这种颜色（或渐变）在哪里”的黑白图。
- 用Potrace描摹每张蒙版：它沿着每个色块的边界走一圈，判断哪些拐角是真正的拐角，再给其余部分拟合平滑的贝塞尔曲线。
- 从面积最大的开始，把路径叠成一个SVG，每种填充一条
<path>。
注意这个算法从不做的事：它不会认出字母“A”，也不会认出一张脸。它看到的是色块、边界和平滑的颜色过渡。所以它对一类图片表现出色，对另一类则只是勉强可用。
03 · 过渡色
明暗去了哪里：变成渐变，而不是色带
多数描摹工具跳过的一步，也是它们的天空会出现条纹的原因。
先把图片简化成纯色的描摹工具，已经丢掉了所有柔和的过渡。天空、球体上的高光、气球条纹上的明暗，都会变成由两级、四级或八级纯色组成的台阶，台阶之间是生硬的边缘；你允许的颜色越多，色带就越多，文件也越大。
AnyToSVG在颜色量化之前多做了一步。与四周邻居都只有细微差别的像素，会被归为平滑区域（抗锯齿的边缘相当于墙，所以区域不会泄漏到相邻的图形里）。每个较大的区域再用颜色模型去拟合：线性模型（一个变化方向，以及沿着它的若干色标）或径向模型（一个中心，以及按距离排布的色标）。如果模型与像素吻合得很好，整个区域就被描摹成一个图形，填充真正的<linearGradient>或<radialGradient>。绕着曲线弯曲的明暗，任何单个一维渐变都跟不上，所以会被拆成几块，每块有自己的渐变，拆分的接缝选在相邻模型一致的地方。
仍然会变成色带的有：沿着复杂形状变化的明暗、多个重叠的柔和阴影，以及照片的纹理。这些区域通不过模型检验，会退回到纯色，由颜色数滑块接管。
04 · 描摹效果出色
由纯色图形组成的图片
- Logo和文字标志：最典型的情形。几种颜色、边缘锐利，SVG几乎就是原稿。
- 实心填充的图标和剪贴画。
- 线稿、草图、签名、印章用黑白模式：一条路径，几KB。
- 文字设计和书法：曲线很平滑，只有特别小的字可能会糊在一起。
- 用于刻字机和激光切割机的剪影、模板和切割文件。
- 纯色的地图、示意图、流程图（文字会变成图形，而不是可编辑的字体）。
05 · 描摹只能大致还原
由色调组成的图片
- 照片会变成海报：8–32种纯色，色块之间是生硬的边缘。作为插画或丝网印刷分色很出彩，拿来“放大”则毫无用处。
- 复杂的明暗，比如多个重叠的柔和阴影，或绕着精细形状的渐变，只能部分还原：符合线性或径向渐变（或其中几块）的部分会变成渐变，其余变成纯色色带。天空、高光、有明暗的条纹和球体都能完整呈现，如上图所示。
- 压缩得很厉害的JPG带有方块噪点，描摹工具会忠实地把它们描出轮廓。先降噪加上调大杂点尺寸会有帮助，换一张更好的原图帮助更大。
- 很小的图片（小于200 px）像素太少，不足以确定一条曲线；拐角会被磨圆，细节会糊在一起。
- 需要编辑的文字：字母会是完美的图形，但不是字体。请在你的编辑软件里重新输入，把描摹结果当作参考。
06 · 描摹还是重画？
一条简单的判断规则
描摹是复制已有的东西，重画是做出应该有的东西。
位图是对一个本来就是纯色块的设计的忠实呈现时，选择描摹，你是在找回一份曾经存在的矢量文件。十秒钟，搞定。
原图有些粗糙时，选择先描摹，再整理，比如网站上300像素的Logo、扫描的签名、拍下来的草图。描摹给你90%，矢量编辑软件给你剩下的：删掉一个多余的图形、拉直一条线、对齐一个拐角。
位图是那个东西的照片，而不是那个东西本身时，选择重画，比如店招上的Logo、灯光下的名片、刺绣徽章。这样的像素里含有透视、光照和纹理，任何描摹工具都不该把它们复现出来，描摹结果最好只用来垫在你自己的绘图下面当底稿。
这三种情况下，预览都会在你下载之前告诉你属于哪一种，这也正是有预览的意义。
边读边试
转换器免费，无需注册，大约一秒就能把SVG和原图并排对比给你看。