SVG矢量图形web应用

传统引用图片的方式，无非<img src="...">,

或者css｛background-image:url("");｝例如阿里云邮箱的某个图标：

但现在的项目，一般都包含大量的图标和图片，使用传统方式无疑会产生大量的http请求，是前段加载变得缓慢；

解决方法有：

1：处理图片以及内容，现在一般都是懒加载，内容出现在视窗，才开始加载，这个方式应用广泛，原理也不难，此处不赘述；

2：图标一般是要做成矢量的，若公司UI实力强劲，可以维护一个iconfont库（Iconfont-阿里巴巴矢量图标库），

iconfont

将图标作为字体使用，但一旦库很大，加载速度也是个问题；

3：iconfont，将多个图片放在一张图里，通过background-position来调整位置，显示不同图标，原理是将多个图片http请求，减小为1个；

iconfont

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中就可以看到，直接调整即可。