关于把图片转成 SVG

PNG 是一格一格的像素。放大它，你只会得到更大的像素格。SVG 则是用数学描述出来的一组形状，所以放到多大都清清楚楚 —— 名片上、广告牌上，甚至还没出现的屏幕上。

麻烦在于，你手里往往没有 SVG。你手里只有别人邮件发来的一张 400 px 的 PNG logo，而现在它要被做成招牌。

这个工具会把图片描摹成形状。 它找出颜色之间的边界，沿着边界画出真正的矢量路径，于是你拿到的是一份规规矩矩的 SVG：可以缩放、可以改色，也能用任何设计软件打开。

描摹能做什么，不能做什么

描摹并不是把原始文件找回来。它只是绕着它能看见的东西画一圈，结果完全取决于你喂给它什么。

它擅长处理：

它不适合照片。 照片里没有干净的颜色边界，只有几百万处渐变。描摹只会把它变成成千上万个细小色块：形式上是 SVG，通常比原照片还*大*，而且什么都干不了。工具发现疑似照片时会提醒你，而不是甩给你一个 12 MB、看着像打翻颜料的文件。

先告诉它这是什么图 —— logo 或图标、线稿，还是细节丰富的插画。这只是把三个滑块调到一个合理的起点，之后你还可以自己调整。

颜色数量是最关键的一项。描摹的原理是先把图片减少到一个很小的色板，再沿着每个色块画边。一个双色 logo 如果用 8 色描摹，抗锯齿的过渡边会被当成额外的形状捡进来；用 2 色就干干净净。颜色少几乎总比多好。
平滑度用来抹平抗锯齿在边缘留下的抖动。轮廓看起来毛糙就调高；真实细节被磨圆了就调低。
细节决定一个形状要小到什么程度才会被丢掉。想去掉杂点和噪点就调低；想保留复杂图稿里的细微笔触就调高。

描摹、看右边的结果、调整、再描摹一次。每次只要几秒钟。

去掉背景会丢掉图稿后面那一大块纯色形状，于是 SVG 的背景是透明的，而不是一个白色矩形。

如果 logo 要放在别人的页面上，或者放在有颜色的页头上，就用这个。如果背景本身就是设计的一部分，就别勾。

放大右边那块描摹结果。该锐利的角、该平滑的曲线，还有小号文字 —— 这几处最容易看出描摹的极限。

如果结果基本对但显得杂乱，先试着减少颜色数量。如果原图本来就很小，描摹只能去猜那些根本不存在的细节 —— 一个 64 px 的网站图标不可能变成清晰的 logo。

图片是在你的浏览器里读取和描摹的，绝不会到达服务器。如果这个文件是还没发布的 logo、客户的品牌标识，或者签了保密协议的作品，这一点就很重要。

这也意味着没有大小限制、不用等待。特别大的图片会在描摹前先缩小，因为超过一定程度后，多出来的像素只会增加噪点，而不是细节。