base 64>…PjwvZz48L3N2Zz4=);">
轮廓
我们刚才看了使用了边缘和原始形状的 SVG。另外一种矢量化图像的方式是 “描绘” 它们。在几天前 Mikael Ainalem[27] 分享了一个 codepen[28] 代码，展示了怎么去使用两色轮廓作为一个占位符。结果非常漂亮。
SVG 在这种情况下是手工绘制的，但是，这种技术可以用工具快速生成并自动化处理。
◈
Gatsby
[29]，一个用 React 支持的描绘 SVG 的静态网站生成器。它使用
一个 potrace 算法的 JS 移植
[30] 去矢量化图像。◈
Craft 3 CMS
[31]，它也增加了对轮廓的支持。它使用了
一个 potrace 算法的 PHP 移植
[32]。◈
image-trace-loader
[33]，一个使用了 potrace 算法去处理图像的 Webpack 加载器。
如果感兴趣，可以去看一下 Emil 的 webpack 加载器 (基于 potrace) 和 Mikael 的手工绘制 SVG 之间的比较。
这里我假设该输出是使用默认选项的 potrace 生成的。但是可以对它们进行优化。查看 图像描绘加载器的选项[34]，传递给 potrace 的选项[35]非常丰富。
总结
我们看到了从图像中生成 SVG 并使用它们作为占位符的各种不同的工具和技术。与 WebP 是一个用于缩略图的奇妙格式[4] 一样，SVG 也是一个用于占位符的有趣格式。我们可以控制细节的级别（和它们的大小），它是高可压缩的，并且很容易用 CSS 和 JS 进行处理。
额外的资源
这篇文章上到了 Hacker News 热文[36]。对此以及在该页面的评论中分享的其它资源的链接，我表示非常感谢。下面是其中一部分。
◈
Geometrize
[37] 是用 Haxe 写的 Primitive 的一个移植。也有
一个 JS 实现
[38]，你可以直接
在你的浏览器上
[39]尝试它。◈
Primitive.js
[40]，它也是 Primitive 在 JS 中的一个移植，
primitive.nextgen
[41]，它是使用 Primitive.js 和 Electron 的 Primitive 的桌面版应用的一个移植。◈ 这里有两个 Twitter 帐户，里面你可以看到一些用 Primitive 和 Geometrize 生成的图像示例。访问
@PrimitivePic
[42] 和
@Geometrizer
[43]。◈
imagetracerjs
[44]，它是在 Javascript 中的光栅图像描绘器和矢量化程序。这里也有为
Java
[45] 和
Android
[46] 提供的移植。
via: https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c
作者：José M. Pérez[48] 译者：qhwdw 校对：wxy
本文由 LCTT 原创编译，Linux中国 荣誉推出
LCTT 译者
qhwdw ? ? ? ?共计翻译：
33 篇贡献时间：45 天
推荐文章
<左右滑动查看相关文章 >
点击图片、输入文章 ID 或识别二维码直达
原文链接请访问“
原文链接”获得可点击的文内链接、全尺寸原图和相关文章。
![[译]技术公司十年经验的职场生涯回顾](https://img8.php1.cn/3cdc5/24912/711/b6574f3292f9dc00.png)
京公网安备 11010802041100号