SVG--好用又好玩的矢量图形

  1. 1. 发展历史
  2. 2. 与传统图片格式对比
  3. 3. 与icon font对比
  4. 4. SVG的应用
  5. 5. SVG的未来…

SVG 意为可缩放矢量图形(Scalable Vector Graphics),并且 SVG 使用XML格式定义图像。SVG与Flash类似,都是用于二维矢量图形,二者的区别在于,SVG是一个W3C标准,基于XML,是开放的,而Flash是封闭的基于二进制格式的。因为都是W3C标准,SVG与其他的W3C标准,比如CSS, DOM和SMIL等能够协同工作。

发展历史

  • 2001年9月4日,发布SVG 1.0

  • 2003年1月4日,发布SVG 1.1(成为W3C 推荐标准)

  • 2003年1月14日,推出SVG移动子版本:SVG Tiny和SVG Basic

  • 2008年12月22日,发布SVG Tiny 1.2

  • 2011年8月16日,發布SVG 1.1(第2版),成为W3C目前推荐的标准

他在2001年就已经被加入到W3C的标准中去了,历时这么久终于到了该翻身的时候了。

与传统图片格式对比

SVG与常见的图片格式.png、.jpg、.gif等是一类,但是SVG的功能又比这三种要强大要好。

2.1. 兼容性

SVG 提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力,兼容现有图片能力的前提下还支持矢量功能,这可是传统图片没有的矢量功能。所有浏览器均支持 SVG 文件,不过需要安装插件的 Internet Explorer 除外。插件是免费的,比如 Adobe SVG Viewer

2.2. 可读性

由于SVG采用的是XML语法,图形的里面的文本内容可以直接被浏览器,搜索引擎SEO和无障碍读屏软件读取,具体用法如下代码设置title与desc标签即可:

1
2
3
4
5
<svg>
<title>This is title</title>
<desc>This is ...</desc>
<use xlink:href="#dede"></use>
<svg>

与icon font对比

什么的字体图标?就是通过一些矢量图形处理软件(AI,FW等)将所需图标定制,然后输出成SVG格式,然后通过 IconfontIcoMoon 在线生成字体图标

国内有:

  • Iconfont(阿里巴巴矢量图标库,是功能很强大且图标内容很丰富的矢量图标库)

国外有:

  • Font Awesome(是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用)

  • IcoMoon

先来看一波 Iconfont 中淘票票的小图标

toapp

里面所有的小图标,全部都是由SVG元素以及SVG的属性完成的,这样的小图标看起来并没有什么问题,可以说是完美;但是,生成了字体图标之后,小图标就不再是单纯的小图标了,而是字体小图标。

3.1. 渲染方式

icon font 采用的是字体渲染,icon font 在一倍屏幕下渲染效果并不好,在细节部分锯齿还是很明显的,SVG 采用的是图形渲染,所以 SVG 却没有这种问题,请看下图对比:

font

没有对比就没有伤害,结果是非常明显的。

3.2. 颜色和可读性

字体图标无法做到多色图形,这就是Icon font一个瓶颈;SVG 则不受颜色的限制,想怎么玩就怎么玩,没压力。
Icon font 主要在页面用Unicode符号调用对应的图标,这种方式不管是浏览器,搜索引擎和对无障碍方面的能力都没有SVG好。

当然,不可否认的是 Icon font 有自己的优势,它可以自由放大缩小,更改颜色,加粗等。作为字体图标,理所当然的继承了字体的部分属性,所以字体图标要在合适的场景下使用才能发挥它最大的优点。

SVG的应用

如果你认为SVG只能够完成简单的小图标,那么给你看看大招

先看看美女再说…

meinv

这个美女如何,还过得去吧!!!
这张图片就是 .svg 格式的图片,是不是比 .png,.jpg,.gif 好看呢?而且不管在什么尺寸的屏幕,任意压缩不失真,这就是矢量图形的最大的优点。(前提:这个图片必须是用AI,CDR,FW等工具绘制出来的,拍摄的图片可不行哦!!!),所以很适合用于logo。

少许的 SVG 即可极大地丰富了网页内容,下面这个是大量使用 SVG 的范例:
俄罗斯方块 Tetris

Tetris

是不是瞬间觉得 SVG 很高大上呢?

SVG的未来…

随着近几年 Html5 迅猛发展,SVG 终于要搭上 Html5 的顺风车了。
SVG 的主要竞争者是 Flash。
与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。
而 SVG 也将慢慢的在传统图片的比例中取得一份。

本文地址:http://www.myboolke.com/2017/07/02/svg-apply/
如有错误或遗漏,欢迎各码友留言。。。