不同类型的图片 placehold
对付图片占位符，常日我们会利用以下几种处理办法。
保持图像为空：这样可以担保内容不会涌现跳动。
默认占位符：比如说用户想要查看个人资料显示头像内容，如果要求失落败或者没有上传过图片，那么常日会利用默认占位符（这种占位符一样平常会利用 SVG 资源）。
纯色：从图像中获取颜色，并作为背景颜色。图片在过度是时候回显得比较平滑（pinterest便是利用这种办法）。
模糊的图像：这种办法会获取原图的缩略图并对其进行渲染，等图片加载完成再过度到原图。
以上是我们比较常见的处理图片 placehold 的方法。还有其余一种办法是利用 SVG。
基于 SVG 的 placehold
SVG 是矢量图像的空想选择，但是大部分情形是须要显示位图，我们须要考虑的是如何将位图转换成矢量图，下面供应几种转换方案。
1. 利用矢量绘制原图的轮廓，详细代码可以参考 demo。
2. 将原图转换为色块图，详细代码可以参考 demo。
给大家分享一个前端学习互换群：213126486 进群约请码（编号）：寂静
群内禁绝时分享干货，包括2017最新的前端企业案例学习资料和零根本入门教程，欢迎初学和进阶中的小伙伴入群学习互换
3. Primitive
这里推举Primitive这个库，这个库可以将位图天生矢量图，我们来看看效果。
上图分别利用不同数量的形状来绘制原图。利用矢量图作为 placehold 有一个很好的优点是小，例如上图 10 个图形的矢量图仅仅只占了 1030 个字节，当通过 SVGO 来传输时，代码还能减少到 640 个字节。
<svg xmlns =“http://www.w3.org/2000/svg”width =“1024”height =“1024”>
<path fill =“＃817c70”d =“M0 0h1024v1024H0z”/> <g fill- opacity =“。502”>
<path fill =“＃03020f”d =“M178 994l580 92L402-62”/>
<path fill =“＃f2e2ba”d =“M638 894L614 6l472 440”/>
<path fill =“＃ fff8be“d =”M-62 854h300L138-62“/>
<路径添补=”＃76c2d9“d =”M410-62L154 530-62 38“/>
<路径添补=”＃62b4cf“d =”M1086-2L498- 305148 508“/>
<path fill =”＃010412“d =”M430-2l196 52-76 356“/>
<path fill =”＃eb7d3f“d =”M598 594l488-32-308 520“/>
<path fill =“＃080a18”d =“M198 418l32 304 116-448”/>
<path fill =“＃3f201d”d =“M1086 1062l-344-52 248-148”/>
<path fill =“＃ebd29f”d = “M630 658l-60-372 516 320”/>
</ g> </ svg>
要达到满意的效我们就必须利用更多的图形来绘制它，如果用 100 个图形来绘制位图，天生的 SVG 大概有 8kB（SVGO 大概 5KB）。随着图形数量的增加，大小也会随之增加。
4. SQIP
这是一种折中处理办法，我们可以理解为 Primitive 和高斯模糊的大略叠加，这种办法我可以利用少量的图形块就能达到我们满意的效果。
上图输出的 SVG 大小为 900 字节。
<svg xmlns =“ http://www.w3.org/2000/svg ”viewBox =“0 0 2000 2000”>
<filter id =“b”> <feGaussianBlur stdDeviation =“12”/> </ filter>
<路径添补=“＃817c70”d =“M0 0h2000v2000H0z”/>
<g filter =“ url（#b）“transform =”translate（4 4）scale（7.8125）“fill-opacity =”。5“>
<ellipse fill =”＃000210“rx =”1“ry =”1“transform =”matrix（50.41098 -3.7951 11.14787 148.07886 107 194.6）“/>
<ellipse fill =”＃eee3bb“rx =”1“ry =”1“transform =”matrix（-56.38179 17.684 -24.48514 -78.06584 205 110.1）“/>
<ellipse fill =”＃fff4bd “rx =”1“ry =”1“transform =”matrix（35.40604 -5.49219 14.85017 95.73337 16.4 123.6）“/>
<ellipse fill =”＃79c7db“cx =”21“cy =”39“rx =”65“ ry =“65”/>
<ellipse fill =“＃0c1320”cx =“117”cy =“38”rx =“34”ry =“47”/>
<ellipse fill =“＃5cb0cd”rx =“1” ry =“1”transform =“矩阵（-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9）“/>
<path fill =”＃e57339“d =”M271 159l-123-16 43 128z“/>
<ellipse fill =”＃47332f“cx =”214“ cy =“237”rx =“242”ry =“19”/>
</ g> </ svg>
5. 剪影
Mikael Ainalem 分享了一个 codepen ，利用双色轮廓作为 placehold，结果效果非常好：
上面这种 SVG 是通过手绘得到的，不过我们也可以利用自动化工具自动天生。
6. node-potrace（js）可以将原图转换成矢量图。
7. Craft 3 CMS 也添加了对剪影的支持 —— Potracio（php）。
8. image-trace-loader 可以追踪图片资源，然后导入天生的 img/svg+xml URL
