方便前端使用的SVG雪碧图

更多代码详情： github.crmeb.net/u/LXT

简介 由于SVG自身的矢量性质，不管在什么情况下，图标都很清晰，可以适应不同尺寸大小和不同分辨率。不用担心模糊和锯齿。同时还能更改图标的填充颜色。

CSS雪碧图和SVG雪碧图 传统的CSS图标可以分为图片图标和字体图标。

图片图标是将所有的icon整合到一张图中，然后通过定位获取其中的某个图标。优点是管理简单，网络请求少。缺点是在高像素屏幕上图标和周边内容相比会显得比较模糊；大小固定；大多数样式无法修改，单个图标使用场景有限。

相对来说字体图标会好很多。字体图标的基本原理是将Icon定义为字体图像, 在CSS中用@font-face引入Icon Font自定义字体, 再利用font-family和字符码显示出指定的图标。

@font-face {
    font-family: 'iconfont';
    src: url(/res/icon2.ttf) format('truetype');
}
.icon2 {
    font-family: 'iconfont';
}
复制代码

字体图标的优点是可以修改图标的颜色和大小（font-size），网络请求少。缺点就是添加图标比较麻烦，图标放大后有可能带有锯齿。跟SVG图标相比，字体图标可以修改的样式属性也是很有限的。

相对于图片图标和字体图标，SVG图标可以保持清晰的无限伸缩、具有较多的样式可以动态更改。

SVG图标 SVG在HTML代码中是以SVG代码节点存在而不是一个图标链接的引用，这是它得以修改样式的前提。但它又不是在需要用到的地方直接将SVG代码添加上去，而是有固定的地方来管理所有的图标，只需定义每个图标的Id，在需要用到的地方直接通过Id来引用即可。这种使用方式使得图标在使用时不会被复杂的SVG代码影响到业务代码的可读性，同时最主要的是可以复用SVG图标和统一管理。

SVG可以做到这一点主要跟SVG中的两个子标签< symbol >、< use >相关。

symbol标签 在SVG雪碧图的使用中，< symbol >标签用于定义图标内容。

symbol元素是什么呢？

symbol元素用来定义一个图形模板对象，只是单单的定义不会渲染出来，定义后可以在自身所在的SVG中或者其他的SVG中通过< use >标签元素实例化图标，也就是通过< use >引用从而被渲染出来。symbol里面可以添加任意的SVG绘图元素，包括动画，但不包括< defs >，除了不显示外基本和SVG跟标签< svg >标签差不多，同样可以设置viewbox这些属性。

我们在定义图标时，每一个symbol代表一个图标。除了不显示外，整个< symbol >就是一个完成的SVG图标。

 <svg>
    <symbol id="svg-test" viewBox="0 0 26 26">
        <desc>居中对齐</desc>
        <path d="M7,9h12c0.5,0,1-0.5,1-1s-0.5-1-1-1H7C6.5,7,6,7.5