浏览器内的免费工具
图片矢量化：把 PNG 或 JPG 转成 SVG
放入一张 PNG 或 JPG，这个位图转矢量图的工具就在本页把它描摹成 SVG——任何文件都不会被上传。它先把画面归并为若干纯色，再沿着每种颜色每一块区域的边界走一遍，每种颜色写成一条路径。标志、线稿、图表或扫描的图示需要的正是这个。照片不在适用范围内，下面的内容会直说原因。
正在渲染示例…
内置示例：一张只剩 PNG 的柱状图
多边形，每种颜色一条路径。没有画东西的地方会露出棋盘格。
把 PNG、JPG、WebP、GIF 或 BMP 拖到这里
文件由你的浏览器解码，并在本页完成描摹。它从不上传，所以除了你自己机器放得下多少，没有别的大小限制。
颜色够覆盖数据系列，容差收紧让坐标轴保持笔直，保留背景。
更大的图片在描摹前会被缩到这个尺寸，这正是页面保持流畅的原因。之后 SVG 与分辨率无关，所以把处理尺寸调大买到的是边界精度，不是输出尺寸——代价是点数变多。
图片会用中位切分归并成这么多种纯色，每一种成为一条路径。两种颜色得到剪影；图表一般八种就够。
丢点时轮廓可以离像素边界多远。为 0 时得到完整的阶梯；到 1 px 时直边干净，曲线仍然平滑。
小于这个值的区域和孔洞会被丢掉——JPEG 块状伪影、扫描仪灰尘和零星的单个像素。 在当前设置下丢掉了 123 块区域。
#fcfcfa5 个环，450 个点#0072b24 个环，156 个点#d55e002 个环，12 个点#3341552 个环，466 个点#009e732 个环，240 个点
纯色描摹的实际效果
扫描的线稿
两种颜色，去掉白色背景，最小区域面积调到足以丢掉纸张颗粒。扫描件的每一笔边上都有成千上万个接近灰色的像素；只有归并成两种纯色，这一笔才会变成一个形状。
只剩 PNG 的图表
来到这里最常见的原因：图在幻灯片或旧论文里，画图的脚本已经找不到了。八种颜色足够覆盖数据系列和坐标轴，容差收紧可以让轴线保持笔直。
两种颜色对八种颜色
颜色越多并不越好。两种颜色时标志是干净的剪影；八种颜色时柔和的明暗变成四条看得见的色带，因为纯色描摹无法表现渐变，只会把它做成色调分离。
矢量图为什么能任意放大
同一个角放大八倍。位图除了自己的像素网格再拿不出别的；SVG 会按打印机或期刊要求的任意尺寸重新画出这条边。
真正镂空的孔洞
外边界和它里面的孔被描摹成两条绕向相反的环，路径写成 fill-rule evenodd。字母 O 的中间、圆环或者环形图的中心因此是空的，而不是被填满。
照片会变成什么样
放在这里是因为所有人都会问。照片里没有纯色区域可找，于是描摹只能自己造出来：成千上万个斑块、好几兆的文件，以及一张在任何尺寸下都比原图更难看的图。
怎样把图片转成矢量图
整个转换都在这个页面里完成。没有排队、没有账号、没有上传这一步，唯一的限制是你自己的浏览器能解码什么。
- 把 PNG、JPG、WebP、GIF 或 BMP 拖到方框里，或者选一个文件。浏览器会解码它并画到画布上，按你选的处理尺寸重采样，使最长边正好放得下。
- 设定颜色数量。这是最关键的一步：图片会被归并成这么多种纯色，每一种在 SVG 里成为一条路径。
- 把简化容差往上调，直到轮廓不再像阶梯。大多数图形在 1 像素左右合适；0 会保留像素级的精确边界。
- 把最小区域面积往上调，直到噪点消失。否则扫描仪的灰尘、JPEG 的块状伪影和零星的单个像素都会各自变成一个小多边形。
- 如果你希望图形叠在背后的内容上、而不是压在一个白色矩形上，就打开去除白色背景。扫描纸张那种偏灰的白也算白。
- 看一下点数。它是文件有多重的老实指标；当这个数字与你看到的细节量相称时，就可以下载 SVG 了。
描摹究竟做了什么
值得说清楚，因为“矢量化”这个词用得很松，而结果好不好取决于它实际做了什么。四个步骤，全部在你的浏览器里完成。
- 用中位切分做色彩量化。像素先进入一个 32,768 格的颜色直方图，然后反复切分，直到盒子数量等于你要的颜色数，每个盒子成为调色板里的一种颜色——盒内像素的真实均值。下一次切分选的是像素数乘以颜色跨度最大的那个盒子，而不是单看像素数最多的，这样扫描件上大片接近白色的纸就不会把整个调色板吞掉。
- 每种颜色生成一张二值掩膜，然后做边界跟踪。跟踪沿着已填充像素与空邻居之间的缝隙走，得到区域精确的、与坐标轴对齐的轮廓，而不是向内偏半个像素的等值线。两块只在角上相接的区域会得出两个形状，而不是一个被掐细的 8 字。
- 孔洞会被描摹成绕向相反的独立环，每条路径都写上 fill-rule evenodd，所以孔是真的空的。字母 O 的内部保持通透。
- 按你设定的容差用 Ramer-Douglas-Peucker 做简化。输出里的每一个点都曾经落在像素边界上——没有任何插值。
- 输出是多边形。这个工具不做贝塞尔曲线拟合，所以描摹出的圆是一个多边的多边形，而不是圆弧。容差合适时，屏幕上和印刷品上都看不出差别，但在编辑器里打开这个 SVG，你会看到一段段直线——在你向别人承诺曲线之前，应该先知道这一点。
什么适合矢量化，什么不适合
位图转矢量图的描摹，找的是单一颜色的区域。哪些图片能用，全都由这一句话推出来。
- 效果好：标志和文字标、钢笔线稿、扫描的图示和插图、流程图、地图、绘图软件的截图、柱状图和折线图、图标、印章、带剖面线的技术图。它们都是边界明确的纯色区域。
- 要小心：带抗锯齿的截图和文字。每条边缘上的过渡像素会被分配到最接近的纯色，可能留下一圈细细的光晕。颜色多了，光晕会自成一层；颜色少了，光晕会被吸收。小号文字描摹后仍然清楚，但它是轮廓，不是可编辑的文字。
- 不适合：照片。照片是连续色调——没有纯色区域可找——所以描摹只能自己造，结果是一张色调分离的斑块图，有成千上万个区域，文件还比原来的 JPG 更大。没有任何设置能解决，因为问题在图片本身，不在参数。
- 不适合：渐变、柔和阴影、模糊、发光和半透明叠加。每一种都会变成看得见的色带。如果原图有渐变，老实的办法只有两个：用两种颜色描摹，然后自己在编辑器里重新加渐变；或者去找原始文件。
- 本来就是矢量：如果这张图出自绘图库、CAD 或绘图软件，先去找原始的 SVG、PDF 或 EPS。描摹矢量文件导出的 PNG 总会丢东西——精确坐标、分组、以及作为文字的文字。
四个控制项，各自牺牲了什么
这里每一个控制项都是用一样东西换另一样。知道它往哪个方向付代价，比瞎试快得多。
- 颜色，2 到 16。太少，图里本来不同的部分会并成一个形状。太多，每条边缘上的抗锯齿都会自成一层，路径数成倍增加，却看不出任何差别。数一数图里你真能叫得出名字的纯色，就从那个数量开始。
- 简化容差，单位是像素。为 0 时轮廓严格贴着像素网格，放大看就是阶梯。往上调会把阶梯并成直线段，再往上调就开始削掉真实细节的拐角。最细的部分最先消失，所以某一笔不见了，原因就在这里。
- 最小区域面积，单位是平方像素。小于这个阈值的区域和孔洞会被丢掉。扫描件一般需要 20 以上，干净的导出几乎不需要。孔只可能比包着它的区域更小，所以把这个值调高，绝不会让某个孔孤零零留在一个已被丢掉的形状里。
- 去除白色背景。颜色接近白色的层会被丢掉，而不是画出来。想把线稿叠在有颜色的幻灯片上时很有用；如果白色本身是画面的一部分，比如眼白，或者图示里本该不透明的空隙，就不要开。
- 处理尺寸。调大意味着边界是在更多像素上量出来的，描摹更忠实，点也更多。它不改变 SVG 能画多大——矢量图没有分辨率——所以调大它是为了精度，不是为了输出尺寸。
下载之后
SVG 是一个装满坐标的文本文件，这正是它比一张更大的 PNG 更值得拥有的原因。
- 可以无限放大。同一个文件既能印在 90 毫米宽的期刊栏里，也能印成 A0 海报，不会出现马赛克，也不需要重采样——出版社要矢量图通常就是为了这个。
- 每种颜色就是一条路径，所以在 Illustrator、Inkscape、Affinity 或 Figma 里给某一层换颜色只要点一下。层按面积从大到小写入，所以背景在文件最前面。
- 它可以当几何图形来编辑。你可以删掉一块区域、拖动一个点，或者把两个形状合并。不能做的是改文字，因为描摹出来的字是轮廓——如果标注需要改，就重新标注原图，而不是改描摹结果。
- 它可以直接嵌入。LaTeX 用 svg 包或者转成 PDF 后都能用，PowerPoint 和 Word 会把它作为形状导入，浏览器则内联渲染，不需要额外请求。
- 可以做差异比较和版本管理。因为它是文本，同一张图的两次描摹可以逐行对比，二进制的 PNG 做不到。
常见问题
这个图片转 SVG 的工具免费吗？
免费，而且没有什么需要注册。描摹在你的浏览器里运行，不消耗积分，没有水印，转多少张都不限。有没有账号，这个页面都一样。
怎么把 PNG 转成 SVG？
把 PNG 拖到本页的方框里，设定你想要的纯色数量，把简化容差调到轮廓看起来干净，把最小区域面积调到噪点消失，然后下载 SVG。标志或线稿通常是两到四种颜色、容差 1 像素左右；图表则是八种颜色、容差更紧一些。
我的图片会被上传到服务器吗？
不会。浏览器解码文件、画到画布上，本页的描摹代码读取这些像素。没有任何网络请求携带你的图片——这也意味着页面加载完成后离线也能用，机密或尚未发表的图稿不会离开你的机器。
它能把照片矢量化吗？
没有实用价值，与其让你自己试出来，不如直说。描摹靠的是找出单一纯色的区域，而照片没有这种区域——色调是连续变化的。你得到的会是一张色调分离的斑块图：成千上万个细碎区域、往往比原 JPG 还大的文件，以及在任何尺寸下都更难看的图。如果你需要把照片变成线稿，那是插画的活，不是格式转换的活。
它会拟合曲线，还是输出多边形？
多边形。轮廓是从真实的像素边界生成、再用 Ramer-Douglas-Peucker 抽稀的，所以 SVG 里每个点都曾落在那条边界上，没有任何东西被插值成圆弧。容差在 1 像素左右时，描摹出的圆看起来是平滑的，但它是一个多边的多边形，编辑器里显示的是一段段直线，而不是贝塞尔控制柄。
我描摹出的 SVG 为什么是锯齿状的？
要么容差是 0 或接近 0，像素阶梯被原样保留；要么处理尺寸相对细节太小。先把容差调到 1 像素左右——阶梯就会并成直线段。如果图形很精细，也把处理尺寸调大，让边界在被简化之前是在更多像素上量出来的。
怎样得到透明背景，而不是一个白色矩形？
打开去除白色背景。量化后颜色接近白色的层会被丢掉而不是画出来，所以原来是纸的地方 SVG 没有填充，背后的内容会透出来。扫描纸张那种偏灰的白按白色处理。如果白色是画面的一部分，就别开。
位图和矢量图有什么区别？
位图——PNG、JPG、GIF、WebP——是一张固定的像素网格，放大只能让像素变大。矢量图——SVG、EPS、PDF 图形——把形状存成坐标，按要求的任意尺寸重新画出来，这就是出版社和印厂要它的原因。位图转矢量图，意思是从像素里把形状找回来，而这只在像素构成界限明确的纯色区域时才做得到。
