使用SVG中的Symbol元素制作Icon

2024-02-07 15:26:11

转载：https://www.cnblogs.com/Alisa098/p/7458937.html

前言

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

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

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

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

SVG优势

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

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

其中使用SVG来制作动画更是令人神往，由于SVG是一种类似DOM节点组成的文本文档，所以我们可以很精细的控制SVG图形的每一个部分，并且可以使用CSS3或者是javascript来制作动画效果。下面我们就来看一个使用SVG制作的动画，如下图所示：

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

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

使用方法

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

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

现在，我们着重介绍的是使用svg中的<symbol>元素来制作icon，在上面说到的SVG Sprite中，我们需要使用相对位置来控制哪个图标被显示出来，但是SVG本身的定义是允许你可以使用<use>的方式直接引用SVG中的某一部分。

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

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

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