SVG图标在移动端的应用【转】

http://ued.ctrip.com/blog/svg-icons-in-mobile-applications.html

在移动设备 retina 屏幕 常常会遇到图标不清晰的问题。

为了解决这个问题，咱们有如下几种方法

1. 切一张 2倍甚至3倍大小的图，而后用css 进行缩放，这样虽然解决了图标不清晰的问题，可是容量也成倍增长，致使页面加载慢 ，hybird 包体积变大。
2. 使用iconfont，不管你是什么分辨率，是否retina，不管你怎么放大，它能够保证图标不会出现任何模糊 ，一份字体文件能够存放不少图标，调用管理很是方便。由于是矢量因此容量很是小。能够用css 控制颜色阴影大小。只能是单色图标。
3. 使用SVG，和iconfont同样是矢量图标，具有iconfont优势的同时，SVG图标能够是多色图标 ，体积比iconfont略大。

如今咱们讲讲如何使用 SVG 图标

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

1. 使用img、object、embed 标签直接引用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，use 元素 来制做图标。这种方法的解决了上述三种方式带来的弊端，少许的http状况，图标能够被缓存 方便复用，整合和管理起来很很是简单

 

SVG sysbol 就是接下来要讲解的类容了

下面来看一段代码示例：

每一个symbol元素都包含了一个图标 ，整合图标的时候咱们只须要像上面这段代码同样这个symbol元素里面‘塞入’单个SVG图标的path路径就能够了 ，由于是xml因此整合图标很是简单。

引用图标一样简单 ，示例以下：

使用use 元素，直接‘use’相对应的symbol  ID 就能引用该图标了

上面的示例 SVG symbol 是嵌入在html内的 。  SVG symbol 一样能够 做为 SVG 文件保存 ，这种状况下 咱们就须要 use  svg地址+id 名 来使用相应图标：

注：若是若是 svg 放在 CDN静态服务器的话，须要开启Ajax跨域权限 。