图片加载时使用 SVG 作为图片 placehold

简评：使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。

不同类型的图片 placehold

对于图片占位符，通常我们会使用以下几种处理方式。

• 保持图像为空：这样可以保证内容不会出现跳动。
• 默认占位符：比如说用户想要查看个人资料显示头像内容，如果请求失败或者没有上传过图片，那么通常会使用默认占位符（这种占位符一般会使用 SVG 资源）。
• 纯色：从图像中获取颜色，并作为背景颜色。图片在过度是时候回显得比较平滑（pinterest 就是使用这种方式）。
• 模糊的图像：这种方式会获取原图的缩略图并对其进行渲染，等图片加载完成再过度到原图。

以上是我们比较常见的处理图片 placehold 的方法。还有另外一种方式是使用 SVG。

基于 SVG 的 placehold

SVG 是矢量图像的理想选择，但是大部分情况是需要显示位图，我们需要考虑的是如何将位图转换成矢量图，下面提供几种转换方案。

1. 使用矢量绘制原图的轮廓，具体代码可以参考demo。
   
   

2. 将原图转换为色块图，具体代码可以参考demo。

3. Primitive

这里推荐Primitive这个库，这个库可以将位图生成矢量图，我们来看看效果。

上图分别使用不同数量的形状来绘制原图。使用矢量图作为 placehold 有一个很好的优点是小，例如上图 10 个图形的矢量图仅仅只占了 1030 个字节，当通过 SVGO 来传输时，代码还能减少到 640 个字节。

要达到满意的效我们就必须使用更多的图形来绘制它，如果用 100 个图形来绘制位图，生成的 SVG 大概有 8kB（SVGO 大概 5KB）。随着图形数量的增加，大小也会随之增加。

4. SQIP

这是一种折中处理方式，我们可以理解为 Primitive 和高斯模糊的简单叠加，这种方式我可以使用少量的图形块就能达到我们满意的效果。

上图输出的 SVG 大小为 900 字节。

5. 剪影

Mikael Ainalem分享了一个codepen，使用双色轮廓作为 placehold，结果效果非常好：

上面这种 SVG 是通过手绘得到的，不过我们也可以使用自动化工具自动生成。

6. node-potrace（js）可以将原图转换成矢量图。

7. Craft 3 CMS也添加了对剪影的支持 ——Potracio（php）。

8. image-trace-loader可以追踪图片资源，然后导入生成的 img/svg+xml URL

英文原文：How to use SVG as a Placeholder, and Other Image Loading Techniques

旧文推荐：
怎么做 Web API 版本控制？
用 WebGL 探索动画和交互技术（一个学习案例）