SVG图标在移动端的应用
大家都知道图标矢量化带来的好处，在没有增大图标体积的情况解决了retina 屏幕上图标不清晰的问题。
现在我们讲讲如何使用 SVG 图标
在web开发中主要有以下几种使用方法：
- 使用img、object、embed 标签直接引用svg。这种方法的缺点主要在于要求每个图标都单独保存成一个SVG文件，使用时也是单独请求的，增加了HTTP请求。
- Inline SVG，直接把SVG写入 HTML 中，这种方法简单直接，而且具有非常好的可调性。Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
- SVG Sprite。这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已。
- 使用 SVG 中的 symbol，use 元素 来制作图标。这种方法的解决了上述三种方式带来的弊端，少量的http情况，图标可以被缓存 方便复用，整合和管理起来很非常简单
SVG sysbol 就是接下来要讲解的类容了
下面来看一段代码示例：
每个symbol元素都包含了一个图标 ，整合图标的时候我们只需要像上面这段代码一样这个symbol元素里面‘塞入’单个SVG图标的path路径就可以了 ，拼合图标就是如此简单。
引用图标同样简单 ，示例如下：
使用use 元素，直接‘use’相对应的symbol ID 就能引用该图标了
上面的示例 SVG symbol 是嵌入在html内的 。 SVG symbol 同样可以 作为 SVG 文件保存 ，这种情况下 我们就需要 use svg地址+id 名 来使用相应图标：
注：如果如果 svg 放在 CDN静态服务器的话，需要开启Ajax跨域权限 。
本文作者：l, jian 转载请注明来自： 携程设计委员会
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
