SVG

     SVG中的use元素：

               1.可重复使用

<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>

　　

       2.跨SVG使用          

<svg class="size"><use xlink:href="#target" /></svg>

　　

图标尺寸CSS控制，里面只有一个仅有xlink:href属性的use元素，Done! 完成！

也即是说，在HTML层面，图标使用的代码成本，跟传统的CSS Sprite或者流行的font-face几乎无异，代码简洁，而且很好维护。所有的SVG图标都在一个SVG源上。retina良好，尺寸可任意拉伸，且颜色可控，真乃Web图标的未来之星。

 

SVG Sprite应用阻碍

     1.SVG图标从何而来

          

CSS3 font-face的逐渐升温，让很多font-face工具诞生了。例如以前我介绍过的国外的icomoon.io，或者国内阿里系的iconfont.cn, 或者bootsrap 3粉们的font-awesome

这些图标实际上都是使用SVG作为媒介的，所以，根本就不要担心“SVG图标从何而来”，这图标多的就像牛魔王身上的虱子——一抖一大把啊！

OK，如何获得呢？直接下载。拿iconfont.cn示意，点击某一图标的下载按钮：

      

点击下载SVG:

于是，我们就得到了SVG图标啦！如果你还需要其他图标，也按照这个步骤一个一个下载下来，很简单吧~ 然后把它们放在一个文件夹中，以备后用。

下面最关键的是第2个问题，如何合并这些SVG到一个SVG上？同时满足使用的是symbol标签，并可以使用裸露的use元素（除了xlink:href没有其他属性）调用呢？

自动化合并工具

问题来啦，如果碰到很多的图标，难道我们都要手动去合并为一个SVG吗？当然不用。

这里介绍一个专门用于处理SVG Symbols用的glup插件gulp-svg-symbols。

下面我们就来以一个实例一步一步来使用下这个插件。

首先新建一个文件夹，目录结构如下图所示：

 

 

svg文件夹是用来存放svg格式文件的。

当然首先是你得有glup环境，至于glup环境的安装这里就不再阐述了，详细的安装使用教程可以去这篇文章看看。

然后在你的项目目录下运行下面的命令安装插件：

 

最后在你的项目目录新建一个**gulpfile.js**文件，写入下面的代码：

ok。基本的环境搭好啦，正所谓，巧妇难为无米之炊。上哪找svg图标去呢？ 这里推荐去icomoon.io 这个专门提供矢量图标网站下载矢量图像，重要的是它提供SVG格式的图形下载。

 

我们这里就以icomoon.io为例，首先是点击你需要下载的图形，选中它，然后点击下载按钮：

然后按照我们上面的配置文件，我们把下载好的svg图标放到svg文件夹中。

一切准备就绪，在你的项目目录中，运行gulp sprites命令：

gulp sprites

运行命令之后，它会在你的目录中生成一个svg文件，用你常用的代码编辑器打开svg文件，可以看到svg图标都被合并到一个文件中。并且根据对应SVG文件的名称生成了ID，如下图所示：

 

那怎么使用呢它们呢？直接在html文件中使用，并且可以直接使用css来定义宽高、填充颜色等属性。如下代码所示：

 

 

 

不过由于浏览器安全策略限制的原因，我们不能在本地直接打开html文件来预览我们引用的svg文件，需要以服务器的形式来打开，用gulp也很容易搞定一个简单的服务器环境。首先我们需要安装gulp-connect这个模块，运行下面的命令：

 

 

然后修改下gulpfile.js文件中的配置项：

 

运行gulp webserver命令，打开localhost:8080，就可以看到我们引入的svg图标了：

 

 

 

唯一的制约－－－兼容性：

          

有些标签，浏览器识别，会忽略里面一些东西。例如SVG的desc元素，里面的内容一向不显示的。于是，对于IE7/IE8, 我们可以把对应图标的png图片放在其中，然后IE9+等支持SVG的浏览器就会忽略之，而IE7/IE8这些不识泰山的元素就会显示图片。拿礼物这个SVG举例：

<svg class="webicon">
    <desc><img src="iconfont-baobei.png" width="16" height="16"></desc>
    <use xlink:href="#liwu"/>
</svg>兑换礼物

　　

于是，在IE8下，就会是这样：

于是，完美兼容了。只是活脱脱多了个标签，略败兴。当然，你也可以针对IE7/IE8使用CSS Sprite技术，原理类似，只是img标签换成其他i之类标签显示背景图，至少HTML这块会干净很多。