SVG学习笔记二：svg-sprite-loader的应用

雪碧图

SVG 雪碧图

上一章我们说到svg在dom中的引用，只要写在img标签，标注img的src为svg的路径就可以了。但是呢，如果一个项目或者一个页面里有好多好多的svg图片要引入，就写这些svg的路径也很重复的哈。如果可以像我们处理png、jpg那样用雪碧图的方式处理svg，是不是会省点事儿呢？

咳咳，你想到的别人早就想到了。。好不好~切入正题~

SVG 雪碧图长这样：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="__SVG_SPRITE_NODE__">
    <symbol class="icon" viewBox="0 0 1024 1024" id="icon名">{{省略的icon path}}</symbol>
    <symbol class="icon" viewBox="0 0 1024 1024" id="icon名">{{省略的icon path}}</symbol>
</svg>

原理

symbol + use => SVG Sprite 利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol。

SVG Sprite最佳实践是使用symbol元素。
把SVG元素看成一个舞台，而symbol则是舞台上一个一个组装好的元件，这这些一个一个的元件就是我们即将使用的一个一个SVG图标。

<svg>
    <symbol>
        <!-- 第1个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第2个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第3个图标路径形状之类代码 -->
    </symbol>
</svg>

SVG中的use元素，use元素是SVG中非常强大，非常重要的一个元素。可重复调用；跨SVG调用。 use元素可以有自己的坐标，以及支持transform变换，甚至可以use其他use元素。

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

SVG中的use元素可以调用其他SVG文件的元素，只要在一个文档中。跨SVG调用就是“SVG Sprite技术”的核心所在。
```
<svg width="500" height="110"><use xlink:href="#shape" x="50" y="50" /></svg>
```

合并SVG

grunt 方法：

npm install grunt-svgstore --save-dev

另一个：svg-sprite-loader

SVG 工具

svg sprite loader 生成 svg 雪碧图

{
test: /\.svg$/,
loader: 'svg-sprite-loader',
}

使用webpack的 require.contextAPI 来动态引入你所有的 Icon .

svg 来源

国外的icomoon.io，或者国内阿里系的iconfont.cn, 或者bootsrap 3粉们的font-awesome

SVG 优化

SVG在线压缩合并工具

hanyuxinting / Blog

SVG学习笔记二：svg-sprite-loader的应用 #25

雪碧图

SVG 雪碧图

原理

合并SVG

SVG 工具

svg 来源

SVG 优化