文档章节

SVG图标在移动端的应用

奥巴码侬
 奥巴码侬
发布于 2016/04/04 20:31
字数 756
阅读 118
收藏 7

在移动设备 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 就是接下来要讲解的类容了

下面来看一段代码示例:

QQ截图20150813115557

每个symbol元素都包含了一个图标 ,整合图标的时候我们只需要像上面这段代码一样这个symbol元素里面‘塞入’单个SVG图标的path路径就可以了 ,因为是xml所以整合图标非常简单。

引用图标同样简单 ,示例如下:

QQ截图20150812170736

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

上面的示例 SVG symbol 是嵌入在html内的 。  SVG symbol 同样可以 作为 SVG 文件保存 ,这种情况下 我们就需要 use  svg地址+id 名 来使用相应图标:

QQ截图20150812171520

注:如果如果 svg 放在 CDN静态服务器的话,需要开启Ajax跨域权限 。

本文转载自:http://ued.ctrip.com/blog/svg-icons-in-mobile-applications.html

上一篇: css3 动画
奥巴码侬
粉丝 33
博文 122
码字总数 43584
作品 0
西城
程序员
私信 提问
针对移动端的网站页面使用字体图标有哪些弊端?

自从有人发明了字体图标以后,我几乎再也没有用过gif/png格式的图标文件了,但是这仅限于我以往做出来针对pc浏览器的页面,这两天我在尝试做移动端浏览器的界面。 网上似乎有更多的文章倾向于...

布谷鸟
2015/03/23
663
0
该如何以正确的姿势插入SVG Sprites?

大家好,我是苏南,今天要给大家分享的是SVG sprite(也叫雪碧图),所谓雪碧图,当然就不是我们常喝的雪碧饮料(Sprites)哦,哈哈~ 当下流程的移动端,手机型号太多太多,今天工作项目中突然...

SouthSu
2018/09/21
0
0
一步步教你用 CSS 为 SVG 添加过滤器

翻译:疯狂的技术宅 原文:www.creativebloq.com/how-to/add-… 自21世纪初以来,SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用...

疯狂的技术宅
04/03
0
0
.NET用户界面控件包Intersoft Premier Studio发布2016|附下载

Intersoft Premier Studio (原名为WebUI Studio Premier) 是专为复杂的企业级移动、Web开发而设计的。Intersoft Premier Studio拥有超多先进的跨平台的表现层组件,这些组件专门针对Mobile、...

Miss_Hello_World
2016/04/26
51
0
【开发者福利】最全面的移动端免费素材合集

在移动端设计风起云涌的今天,移动端的UI和UX设计师任重而道远。巧妇难为无米之炊,好素材就是设计师的底气。这次搜集的移动端免费素材覆盖全面,从教学资源到UI Kit,从开发工具到图标合集,...

拉偶有所依
2015/01/06
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
今天
10
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
今天
5
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
7
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
7
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部