传统引用图片的方式，无非<img src="...">,
或者css｛background-image:url("");｝例如阿里云邮箱的某个图标：
但现在的项目，一般都包含大量的图标和图片，使用传统方式无疑会产生大量的http请求，是前段加载变得缓慢；
解决方法有：
1：处理图片以及内容，现在一般都是懒加载，内容出现在视窗，才开始加载，这个方式应用广泛，原理也不难，此处不赘述；
2：图标一般是要做成矢量的，若公司UI实力强劲，可以维护一个iconfont库（Iconfont-阿里巴巴矢量图标库），
将图标作为字体使用，但一旦库很大，加载速度也是个问题；
3：iconfont，将多个图片放在一张图里，通过background-position来调整位置，显示不同图标，原理是将多个图片http请求，减小为1个；
4：SVG矢量图形的应用，目前大多是在前端中使用<svg>...</svg>标签绘制
例如：用ai制作一个svg图形，用sbulime打开后
复制<svg>...</svg>页面就会出现
可以给svg设置css样式，调整大小，颜色等，这样是没有http请求的；
还有强大的SVG.js来处理更为复杂度svg绘图与动画；
还有一种方式，实在css｛background-image: url("")｝中使用svg绘图，但这里直接在url中使用<svg...
标签是不支持的，需要经过base64编码，但结果很长，失去了可读性，所以我写了个简单的编码工具
地址：www.xiyoulive.com/encodeSVG
github：https://github.com/looperwow/encodeSVG
用的舒服，还求个star
粘贴<svg>...</svg>进去，直接输出css，复制css，到你需要的css类即可，然后通过background-repeat:no-repeat;来禁止重复；background-position来调整位置；大小和颜色在输出的css中就可以看到，直接调整即可。
