9.1 SVG 概述

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实例。