SVG进阶-sprite 雪碧图

前言

---

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

CSS sprite 和SVG Sprite

---

传统的CSS sprite可以分为图片和字体图片。

图片是将所有的icon整合到一张图中，然后通过定位获取其中的某个图标。有点是管理简单，网络请求少。缺点是无法更改图标的样式，在高分辨率的屏幕下看和周围的样式比较起来有点模糊。而且大于图标原图大小的渲染也会导致图片模糊。所用同样的图标有时需要制作很多个。

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

字体图标的意思就是这个图标类似字体，我们可以设置他的gont-size和color等。但字体图标有字体图标的缺点，就是只有一个颜色，无法设置复杂颜色的图标。

SVG图标具备图片图标和字体图标的有点，可以更改样式同时保证清晰。

SVG sprite

---

symbol标签

symbol元素在SVG雪碧图的使用中，属于用于定义图片内容。

• symbol元素用来定义一个图形模板对象，它可以用一个 元素实例化。symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 元素）才能呈现。
• symbol里面可以添加任意的svg元素，包括动画，除了不显示外基本和svg标签差不多，同样可以设置viewbox这些属性。
• 我们在定义图标时，每一个symbol代表一个图标。

<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,6,8S6.5,9,7,9z"/>
        <path d="M19,17H7c-0.5,0-1,0.5-1,1s0.5,1,1,1h12c0.5,0,1-0.5,1-1S19.5,17,19,17z"/>
        <path d="M10,12c-0.5,0-1,0.5-1,1s0.5,1,1,1h6c0.5,0,1-0.5,1-1s-0.5-1-1-1H10z"/>
    </symbol>
    
    <symbol id="svg-tool-stroke-5" viewBox="0 0 30 16" >
        <desc>描边5</desc>
        <rect x="-10" y="6" width="7" height="2"/>
        <rect x="-1" y="6" width="2"