关于
没有繁琐向导的矢量化工具
AnyToSVG把位图转成SVG,用的算法和知名在线服务属于同一类,但它们运行在你的浏览器里,不用你动任何设置就先给你看结果,也从不要求你登录。
缘起
我为什么做它
来自AnyToSVG和IconEditor.org开发者的一段话。
我做了将近三十年软件,其中出乎意料多的时间,花在一件琐碎无聊的小事上:把别人的Logo变成可以缩放的格式。客户发来一张PNG,印刷厂要的是SVG,而我常用的在线转换工具迎接我的,是上传排队、模型选择、三套候选调色板、画质面板、颜色分组面板,等预览终于看着对了,又冒出一个登录表单和一个积分计数器。
奇怪的是,真正的描摹既不慢,也不神秘。核心算法Potrace从2003年起就公开了,描摹一张Logo大小的位图只要几毫秒。四步向导的存在,并不是因为数学上需要,而是因为图片必须传到服务器、在那里处理,结果还要计量收费。
现代浏览器改变了这一点。Potrace可以编译成WebAssembly,在你自己的电脑上以原生速度运行,围绕它的颜色分析只是普通的JavaScript。所以AnyToSVG在本地完成全部工作:图片一拖进来就被分析,选好合理的设置,逐个颜色描摹,SVG就出现在原图旁边。什么都不上传,什么都不计数,每个滑块都能即时重新描摹,因为根本没有网络往返。
理念和我的Windows图标编辑器IconEditor.org一样:把人们经常要做的事情拿出来,留下真正好的部分,去掉所有只是为了让你订阅才存在的东西。

工作原理
拖入一张图片后发生了什么
1 · 分析
通过图片的颜色直方图,判断它是纯色块图稿、线稿,还是类似照片的图;它实际包含多少种不同的颜色;以及黑白阈值应该设在哪里(大津法)。
2 · 先渐变,后颜色
颜色平滑变化的区域会用线性或径向模型拟合,变成一个带真正SVG渐变的图形。其余像素再做量化:主要颜色成为调色板,随后补上面积小但颜色特别的区域,并清理区域之间由抗锯齿产生的光晕。
3 · 图层
填充从面积最大的颜色开始往上叠,每个图形向上层相邻图形下方多铺一个像素,所以相邻图形之间没有发丝般的缝隙,这是商业服务里称为“重叠”的做法的轻量版。小于“去除杂点”尺寸的碎片会并入周围的图形,而不是直接丢掉。
4 · 描摹
每个图层是一张黑白蒙版,由Potrace(编译为WebAssembly)转成平滑的贝塞尔路径。曲线平滑、去除杂点和曲线优化都是Potrace的标准参数,这里做成两个滑块和一组预设。
5 · 组装SVG
Potrace的坐标被换算回原图像素网格,每种填充一条<path>,可以是纯色,也可以是<defs>里的<linearGradient> / <radialGradient>,除此之外什么都没有:没有变换、分组或元数据。被隐藏的颜色和外围背景会被直接省略。
6 · 一切都不离开浏览器
以上所有步骤都在你电脑上的Web Worker里运行。唯一的例外是浏览器打不开的格式(TIFF、PSD、HEIC、PDF):这类文件会在我们的服务器内存里转成PNG,并立即丢弃。


有意做得小
致谢与局限
描摹引擎是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],或者直接把一张图片拖进转换器,亲自试试。