使用SVG中的Symbol元素制做Icon

前言

随着大屏幕分辨率的普及以及各类移动设备层出不穷的移动互联网时代的到来，咱们在网站设计时更应该关心内容在各类设备上的阅读性和显示效果。咱们都但愿能在任什么时候间，任何设备上都能清楚的，高效的传递信息给用户。

而随着各类高清视网膜屏幕的出现，如今web设计也须要考虑各类高清屏幕的显示效果，一样前端在代码实现的时候也须要根据屏幕的不一样来输出不一样分辨率的图片。为了使咱们的网页可以适配视网膜屏幕上的高分辨率，在前端开发中通常须要准备两套不一样尺寸的图片来应对，一套在普通屏幕上显示；一套在高清屏幕上显示。

为了解决屏幕分辨率对图标影响的问题，字体图标即icon font顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言，使用字体来制做图标能够不受于屏幕分辨率的影响，这对于如今各类分辨率屏幕的移动互联网时代，比起用图片来讲确实有很大的优点。因此如今在web开发中，使用字体来制做icon应用的也愈来愈多。

难道咱们只有这一种选择么？No，追根溯源，其实字体图标也是一种基于矢量图形的一种技术封装而已。这篇文章咱们就来看看使用正宗的矢量图形SVG来制做icon的应用，看过以后相信你会有一种“拈花微笑,飞叶伤人”的感受。

SVG优点

随着高清屏幕的普及，相比使用png等位图而言，使用SVG等矢量图形是一种全新的设计方式。更重要的是相比位图而言，SVG有着无可比拟的优点。这里我总结一下SVG具体的一些优点：

1. SVG是矢量图形文件，能够随意改变大小，而不影响图标质量。
2. 能够用CSS样式来自由定义图标颜色，好比颜色/尺寸等效果。
3. 全部的SVG能够所有在一个文件中，节省HTTP请求 。
4. 使用SMIL、CSS或者是javascript能够制做充满灵性的交互动画效果。
5. 因为SVG也是一种XML节点的文件，因此可使用gzip的方式把文件压缩到很小。

其中使用SVG来制做动画更是使人神往，因为SVG是一种相似DOM节点组成的文本文档，因此咱们能够很精细的控制SVG图形的每个部分，而且可使用CSS3或者是javascript来制做动画效果。下面咱们就来看一个使用SVG制做的动画，以下图所示：

想看它在web上的真实效果么，请扫描下面的二维码：

 

开始以前，能够先下载基本的html和svg代码，下载地址

使用方法

在web开发中，SVG主要有下面几种使用方法：

1. 使用img和object标签直接引用svg。这种方法的缺点主要在于要求每一个图标都单独保存成一个SVG文件，使用时也是单独请求的，增长了HTTP请求。
2. Inline SVG，直接把SVG写入 HTML 中，这种方法简单直接，并且具备很是好的可调性。Inline SVG 做为HTML文档的一部分，不须要单独请求。临时须要修改某个图标的形状也比较方便。可是Inline SVG使用上比较繁琐，须要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
3. SVG Sprite。这里所说的Sprite技术，没错，相似于CSS中的Sprite技术。图标图形整合在一块儿，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改为了SVG而已。
4.  最后就是本文的主角啦。使用svg中的<symbol>元素来制做icon。

如今，咱们着重介绍的是使用svg中的<symbol>元素来制做icon，在上面说到的SVG Sprite中，咱们须要使用相对位置来控制哪一个图标被显示出来，可是SVG自己的定义是容许你可使用<use>的方式直接引用SVG中的某一部分。

那么<symbol>元素是什么呢？按字面意思的话是符号的意思，若是把一个SVG文件比喻成一个书柜的话，那么<symbol>则就表示书柜中一本本不一样类别的书籍。这些一本本不一样类别的书本就是咱们要使用的<symbol>图标。

下面的代码就是将多个SVG图标整合成一个SVG文件以后的样子，能够看到代码中有不一样类别的<symbol>元素，它们就是咱们要引用的图标：

每一个Symbol设置一个id做为引用时的名字。使用id引用这个SVG中的Icon有两种方法。

第一种，将上述SVG做为body的第一个元素插入在HTML中， 此后，在须要显示某个 Icon 的地方插入下面的代码便可：

第二种是，是使用完整路径引用Icon。 也就是：

这种方法不须要像Sprite那样繁琐的设置图片的位移。使用id命名图标并使用时直接使用id引用既直观又简单。

自动化合并工具

问题来啦，若是碰到不少的图标，难道咱们都要手动去合并为一个SVG吗？固然不用。

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

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

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

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

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

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

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

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

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

点击下载svg：

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

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

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

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

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

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

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

 

源代码下载

为了更能直接体现使用SVG来做为图形格式的优点，我分别把上面的三个图标放大到十种不一样的尺寸，具体结果请坚决果断拿起你的手机，扫描下面的二维码。会发现依然清晰可见：

总结

综上所述，使用SVG Symbols的方式来制做图标比使用字体图标有着无可比拟的优点。更重要的是SVG中的每个path元素均可以单独控制，这能够给咱们带来什么呢？点击下面的图片你就知道使用SVG来制做图形元素带来的魅力啦。

我觉的在移动端彻底能够普及使用了，主流的安卓和苹果的浏览器都支持SVG。

参考文章：

Gulp as a Development Web Server
SVG symbol a Good Choice for Icons
Inline SVG vs Icon Fonts
replace-icon-fonts-with-svg

 

原文出处： 腾讯ISUX