AnyToSVG

关于

没有繁琐向导的矢量化工具

AnyToSVG把位图转成SVG,用的算法和知名在线服务属于同一类,但它们运行在你的浏览器里,不用你动任何设置就先给你看结果,也从不要求你登录。

缘起

我为什么做它

来自AnyToSVG和IconEditor.org开发者的一段话。

我做了将近三十年软件,其中出乎意料多的时间,花在一件琐碎无聊的小事上:把别人的Logo变成可以缩放的格式。客户发来一张PNG,印刷厂要的是SVG,而我常用的在线转换工具迎接我的,是上传排队、模型选择、三套候选调色板、画质面板、颜色分组面板,等预览终于看着对了,又冒出一个登录表单和一个积分计数器。

奇怪的是,真正的描摹既不慢,也不神秘。核心算法Potrace从2003年起就公开了,描摹一张Logo大小的位图只要几毫秒。四步向导的存在,并不是因为数学上需要,而是因为图片必须传到服务器、在那里处理,结果还要计量收费。

现代浏览器改变了这一点。Potrace可以编译成WebAssembly,在你自己的电脑上以原生速度运行,围绕它的颜色分析只是普通的JavaScript。所以AnyToSVG在本地完成全部工作:图片一拖进来就被分析,选好合理的设置,逐个颜色描摹,SVG就出现在原图旁边。什么都不上传,什么都不计数,每个滑块都能即时重新描摹,因为根本没有网络往返。

理念和我的Windows图标编辑器IconEditor.org一样:把人们经常要做的事情拿出来,留下真正好的部分,去掉所有只是为了让你订阅才存在的东西。

已载入Logo的AnyToSVG页面:左侧是设置,中间是对比预览,下方是结果和下载面板
拖入一个Logo之后的转换器:识别出六种颜色,十分之一秒完成描摹,随时可以下载。

工作原理

拖入一张图片后发生了什么

1 · 分析

通过图片的颜色直方图,判断它是纯色块图稿、线稿,还是类似照片的图;它实际包含多少种不同的颜色;以及黑白阈值应该设在哪里(大津法)。

2 · 先渐变,后颜色

颜色平滑变化的区域会用线性或径向模型拟合,变成一个带真正SVG渐变的图形。其余像素再做量化:主要颜色成为调色板,随后补上面积小但颜色特别的区域,并清理区域之间由抗锯齿产生的光晕。

3 · 图层

填充从面积最大的颜色开始往上叠,每个图形向上层相邻图形下方多铺一个像素,所以相邻图形之间没有发丝般的缝隙,这是商业服务里称为“重叠”的做法的轻量版。小于“去除杂点”尺寸的碎片会并入周围的图形,而不是直接丢掉。

4 · 描摹

每个图层是一张黑白蒙版,由Potrace(编译为WebAssembly)转成平滑的贝塞尔路径。曲线平滑、去除杂点和曲线优化都是Potrace的标准参数,这里做成两个滑块和一组预设。

5 · 组装SVG

Potrace的坐标被换算回原图像素网格,每种填充一条<path>,可以是纯色,也可以是<defs>里的<linearGradient> / <radialGradient>,除此之外什么都没有:没有变换、分组或元数据。被隐藏的颜色和外围背景会被直接省略。

6 · 一切都不离开浏览器

以上所有步骤都在你电脑上的Web Worker里运行。唯一的例外是浏览器打不开的格式(TIFF、PSD、HEIC、PDF):这类文件会在我们的服务器内存里转成PNG,并立即丢弃。

放大到太阳光晕的对比视图:分隔线左侧是位图,右侧是径向SVG渐变
第2步的实际效果。太阳光晕和周围的天空被识别为一整块平滑区域,写成了一个径向渐变;分隔线把PNG(左)和SVG(右)分开。
结果面板:6.7 KB,15个图形,11个填充,其中6个渐变
这样做的好处。气球示例只用纯色描摹,是13种颜色、56 KB;开启渐变识别后,是11个填充、15个图形、6.7 KB。

有意做得小

致谢与局限

描摹引擎是Peter Selinger开发的Potrace,通过esm-potrace-wasm构建版本,依据GPL许可使用,其许可证与脚本一同提供。颜色分析、分层和SVG组装是AnyToSVG自己的JavaScript,未经压缩直接提供。本站不会从其他域名加载任何第三方脚本、字体或跟踪器。

说实话的局限:图片最长边最多按2048像素描摹,所以6000像素的扫描件会先被缩小。照片会被海报化,这就是描摹的特性。平滑的明暗会被识别并写成真正的SVG渐变(线性或径向),但沿着复杂形状变化的明暗,仍然会被简化为几种纯色。不支持线稿的中心线描摹(给绘图仪用的单线路径),图形始终是填充轮廓。

一览

要点速览

价格
免费
账号
不需要
输入
PNG · JPG · GIF · WebP · BMP · SVG · TIFF · PSD · HEIC · PDF
输出
SVG · PNG(1倍 / 2倍 / 4倍)· 剪贴板
颜色
2 – 32 种,或黑白
大小上限
20 MB · 按 ≤ 2048 px 描摹
存储
服务器上不保存

有问题、发现了bug或有好想法?

请写信到[email protected],或者直接把一张图片拖进转换器,亲自试试。

打开转换器