“实时描摹”光栅图像的 SVGcode

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

假设您有一个位图图形——例如 JPG、PNG 或 GIF——并且希望它是矢量图形,例如 SVG。您该怎么办?您可以在某种设计软件中自己描摹它。或者设计软件中的工具可以提供帮助。

(我不想在这里拖延重点,现在有一个免费的在线工具可以做到这一点,称为 SVGcode。)

我记得 2005 年 Adobe Illustrator CS2 发布时,它有一个名为“实时描摹”的功能,我完全把它变成了我的美学。我过去曾为我的民谣乐队制作过名片,它们都具有照片转为矢量图形的外观。如今,他们显然称之为图像描摹。

Showing two images comparing a raster image to the Image Trace effect in Adobe Illustrator.

SVGcode 正好可以免费做到这一点

不过 Adobe 软件需要付费,那么还有其他选择吗?我想它们是存在的,但现在有一个名为 SVGcode 的用途单一的网络应用程序,由 Thomas Steiner 创建!他在几个地方写过关于它的内容

我认为它在功能(超级有用!)和方法(如今网络应用程序的功能令人印象深刻!)方面都非常酷。

它使用文件系统访问 API、异步剪贴板 API、文件处理 API 和窗口控件覆盖自定义。[…]

应归功于应归功之人:我不是发明者。使用 SVGcode,我只是站在名为 Potrace 的命令行工具的肩膀上,该工具由 Peter Selinger 创建,我已经 将其转换为 WebAssembly,以便它可以在 Web 应用程序中使用。

我刚毕业时的美学将继续存在!

Showing the Image Trace effect previewed in SVGcode.

如果您有兴趣直接听 Thomas 讲述,不仅是这个,还有整个强大的网络应用程序领域,他加入了我以及 Dave 在 ShopTalk 第 497 集 中。那一集是对我写的一篇文章的后续,文章问:““为什么企业会选择原生应用程序而不是网站?”