前言：使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。
不同类型的图片 placehold
请点击此处输入图片描述
对于图片占位符，通常我们会使用以下几种处理方式。
保持图像为空：这样可以保证内容不会出现跳动。
默认占位符：比如说用户想要查看个人资料显示头像内容，如果请求失败或者没有上传过图片，那么通常会使用默认占位符（这种占位符一般会使用 SVG 资源）。
纯色：从图像中获取颜色，并作为背景颜色。图片在过度是时候回显得比较平滑（pinterest就是使用这种方式）。
模糊的图像：这种方式会获取原图的缩略图并对其进行渲染，等图片加载完成再过度到原图。
以上是我们比较常见的处理图片 placehold 的方法。还有另外一种方式是使用 SVG。
基于 SVG 的 placehold
SVG 是矢量图像的理想选择，但是大部分情况是需要显示位图，我们需要考虑的是如何将位图转换成矢量图，下面提供几种转换方案。
1. 使用矢量绘制原图的轮廓，具体代码可以参考 demo。
请点击此处输入图片描述
2. 将原图转换为色块图，具体代码可以参考 demo。
请点击此处输入图片描述
【给大家分享一个前端学习交流群：213126486进群邀请码（编号）：寂静
群内不定时分享干货，包括2017最新的前端企业案例学习资料和零基础入门教程，欢迎初学和进阶中的小伙伴入群学习交流】
3. Primitive
这里推荐Primitive这个库，这个库可以将位图生成矢量图，我们来看看效果。
请点击此处输入图片描述
上图分别使用不同数量的形状来绘制原图。使用矢量图作为 placehold 有一个很好的优点是小，例如上图 10 个图形的矢量图仅仅只占了 1030 个字节，当通过 SVGO 来传输时，代码还能减少到 640 个字节。
<路径填充=”＃76c2d9“d =”M410-62L154 530-62 38“/>
<路径填充=”＃62b4cf“d =”M1086-2L498- 305148 508“/>
要达到满意的效我们就必须使用更多的图形来绘制它，如果用 100 个图形来绘制位图，生成的 SVG 大概有 8kB（SVGO 大概 5KB）。随着图形数量的增加，大小也会随之增加。
4. SQIP
这是一种折中处理方式，我们可以理解为 Primitive 和高斯模糊的简单叠加，这种方式我可以使用少量的图形块就能达到我们满意的效果。
请点击此处输入图片描述
上图输出的 SVG 大小为 900 字节。
<路径填充=“＃817c70”d =“M0 0h2000v2000H0z”/>
5. 剪影
Mikael Ainalem 分享了一个 codepen ，使用双色轮廓作为 placehold，结果效果非常好：
请点击此处输入图片描述
上面这种 SVG 是通过手绘得到的，不过我们也可以使用自动化工具自动生成。
6. node-potrace（js）可以将原图转换成矢量图。
请点击此处输入图片描述
7. Craft 3 CMS 也添加了对剪影的支持 —— Potracio（php）。
8. image-trace-loader 可以追踪图片资源，然后导入生成的 img/svg+xml URL
