前端女程序员教你，图片加载时，使用 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

给大家分享一个前端学习交流裙：【二一三一二六四八六】进裙邀请码（编号）：寂静

裙内不定时分享干货，包括2017最新的前端企业案例学习资料和零基础入门教程，欢迎初学和进阶中的小伙伴入裙学习交流