9.1 SVG 概述

SVG是Web几何图形的根本,就如同XHTML之于文本。

SVG是什么

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的、基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

历史版本

  • SVG 1.0 在2001年9月份成为 W3C Recommendation(即W3C推荐标准)。
  • SVG 1.1 在2003年1月份成为 W3C Recommendation。
  • SVG 1.1 (第二版本) 在2011年8月成为 W3C Recommendation。

SVG的优点

与其他图像格式相比,使用 SVG 的优势在于:

  • SVG图像可以被任意的文本编辑器所创建和编辑
  • SVG图像可以被搜索、索引化和脚本化,可压缩性更强
  • SVG图像是可伸缩的
  • SVG图像可在任何的分辨率下被高质量地打印
  • SVG图像的缩放不会导致质量下降
  • SVG是一个开放标准
  • SVG文件是标准的XML,继承XML的优点(如可读性高)

SVG的缺点

  • 继承XML的缺点,标记语法不够简洁
  • 文本格式图像的文件大小,某些情况下比二进制编码的栅格化图像要大(取决于所描述矢量元素的几何复杂度)

当然在开启Web服务器gzip压缩选项后(即对某些类型的媒体文件在传输时进行压缩),svg图像尺寸能被大幅度缩小。

SVG和Flash

在课程前言中我们已经解释过,由于Flash技术在移动端退出市场,Flash被H5替代是大势所趋,而Flash中的矢量图形功能也将被SVG所替代。

Adobe在2013年推出了一个名为Snap.svg的开源项目,希望能将原本通过Flash插件方式实现的矢量图功能用新的方式带到Web上。

查看SVG文件

我们可以使用浏览器来查看SVG图像,IE9+、火狐Firefox、谷歌Chrome、Opera和Safari都支持SVG。

IE8和早期版本则可能需要安装一个插件 - 如Adobe SVG Viewer,这是免费提供的。

创建SVG文件

由于SVG是XML文件,SVG图像可以用任何文本编辑器创建, 也可以使用所见即所得的编辑工具如开源免费的Inkscape,或商业授权的Adobe illustrator CS6,来更方便快捷地创建SVG图形。

下面的章节我们就用文本编辑器来创建一个简单的SVG实例。