Svg国际太阳娱乐网站2138 Sprite

国际太阳娱乐网站2138 22

浅谈SVG Sprite

2016/03/06 · HTML5 ·
SVG

原文出处:
携程设计委员会   

随着前端技术的发展,有越来越多的方法实现icon的制作,同时为了满足市面上各种大屏幕分辨率,字体图标icon
font应运而生,字体图标的制作也是一种全新的设计方式,但是icon font
在windows系统下,字体较小时,锯齿问题比较严重,那么今天要讲的svg
sprite,不仅可以随意改变图标大小不会产生锯齿,还能随心所欲的填充颜色。

下面来来介绍一下矢量图形SVG Sprite在页面中的应用。

第一步:制作SVG图标
首先的准备一套SVG图标,我们直接到icomoon.io上下载。

1.选中图标

国际太阳娱乐网站2138 1

2.点击Generate

国际太阳娱乐网站2138 2

3.下载

国际太阳娱乐网站2138 3

然后我们可以在解压文件中,找到对应的svg图标文件夹。

国际太阳娱乐网站2138 4
国际太阳娱乐网站2138 5

第二步:合并SVG图标
准备好svg图标后,我们需要把多个svg图标整合到一个svg文件中。
这里需要用到自动化合并工具(grunt),grunt有个名为svgstore的插件。
关于grunt环境的安装,就不在这阐述 。

环境安装好后,在项目目录下执行下面的命令,安装插件:

国际太阳娱乐网站2138 6

安装好后,可以看到grunt-svgstore文件夹里有个Gruntfiles.js配置文件。
我们加入以下两段代码:

国际太阳娱乐网站2138 7

国际太阳娱乐网站2138 8

了解更多配置项:

配置好以后,我们需要把第一步下载下来的svg图标,放到sprites文件夹中,如下图:

国际太阳娱乐网站2138 9

到这为止,一切准备就绪,只需进入到 grunt-svgstore目录,执行命令:

国际太阳娱乐网站2138 10

运行命令后,可以看到成功创建了sprite.svg文件

国际太阳娱乐网站2138 11

第三步:应用

我们来看下生成文件的源代码:

国际太阳娱乐网站2138 12

再来看看浏览器里页面的效果~~~

国际太阳娱乐网站2138 13

到这里svg sprite 图标就已经完成了。

兼容性:

国际太阳娱乐网站2138 14

对于ie8以下,我们可以添加一个标签,使用css sprite:

为避免其他浏览器加载,可以加上条件注释。

国际太阳娱乐网站2138 15

这样就完美啦~

 

2 赞 5 收藏
评论

国际太阳娱乐网站2138 16

前言

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

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

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

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

国际太阳娱乐网站2138 17

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制作的动画,如下图所示:

国际太阳娱乐网站2138 18

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

国际太阳娱乐网站2138 19

 

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

关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS
Icon
以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了。这篇文章主要说明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>元素,它们就是我们要引用的图标:

国际太阳娱乐网站2138 20
每个Symbol设置一个id作为引用时的名字。使用id引用这个SVG中的Icon有两种方法。

第一种,将上述SVG作为body的第一个元素插入在HTML中, 此后,在需要显示某个
Icon 的地方插入下面的代码即可:

国际太阳娱乐网站2138 21

第二种是,是使用完整路径引用Icon。 也就是:

国际太阳娱乐网站2138 22

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

  • 演示地址
  • 代码
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图