如何使用基于XML的SVG？

第1章 SVG综述

开始阅读本章内容前，你是否知道以下几个问题的答案：

· 矢量图形与光栅图形的区别是什么？

· 什么是SVG？

· SVG有哪些特点？

· SVG的主要领域有哪些？

· 为什么SVG不如其他矢量图形格式如Flash流行？

如果你暂时无法确定答案，别着急，在阅读了本章内容后，相信你会有自己的答案。

1.1 光栅图形与矢量图形

计算机显示的图形可分为光栅图形（Raster Graphics）和矢量图形（Vector Graphics）两类。

1.1.1 光栅图形

光栅图形又称位图、点阵图，它是由若干像素点构成的图形，每个像素点都有自身的位置、颜色值和透明度值。光栅图形中记录了大量的图形描述信息，体积较大，一般保存在各种压缩格式中。我们日常使用的大部分显示设备是光栅设备，因此正常显示光栅图形必须先将其解压缩。

光栅图形的优点在于易于表现色彩层次丰富的逼真图像效果，特别适合照片及色彩层次丰富的图像，其缺点主要有以下三方面：

· 在于文件相对较大而不利于网络传输。

· 图形自身无法包含被查找信息。

· 无法在不损失数据的前提下进行各种图形变换（如放大）。

图1-1是一个光栅图形示例，当前显示比例为100%，即原始大校

 

将图1-1所示图形放大400%后，其中心花蕊边缘出现了锯齿，效果如图1-2。

 

 

 

图1-2 放大400%后的光栅图形

 

1.1.2 矢量图形

矢量图形又称向量图形、面向对象的图形。矢量图形使用直线和曲线来描述图形，其图形元素通过数学公式计算获得。正是由于矢量图形可通过数学公式计算获得，矢量图形文件体积一般比较校在矢量图形中，其所包含的图形元素被称为对象，每个对象都是一个实体，具有颜色、形状、屏幕位置等属性。

相对于光栅图形，矢量图形具有如下的优点：

· 图形变换后不失真。

· 同内容等尺寸情况下，矢量图形体积往往小于光栅图形体积。

· 矢量图形可以轻松转换为光栅图形且体积较小，而由光栅图形转化的矢量图形往往包含大量的冗余信息。

· 矢量图形可携带查找信息。

图1-3显示了矢量图形放大前后的效果对比。

图1-3 矢量图形放大前后的效果对比

XML全称eXtensible Markup Language，即可扩展标记语言。XML与HTML一样，都来自SGML（标准通用标记语言），但不同于HTML中已定型的标记，XML是元标记语言，其允许用户定义自己需要的标签并随后使用。目前，XML已被广泛的接受并受到软件厂商的全面支持。

基于XML标准的特性是SVG对比于其他矢量图形标准的最大优势，XML的通用性使得Web应用程序开发过程中与SVG图形进行交互变得更加容易。

2．较小的体积

较小的体积是所有矢量图形标准具备的通用特点。SVG图形文件支持以压缩格式存储，一般情况下，压缩后的文件体积会进一步减少70%~80%且不失真，而对于光栅图形格式如GIF、JPEG等，在不失真的前提下，压缩后的文件体积变化很校

3．可自由变换

用户可对SVG图像进行放大、缩孝旋转等操作，变换后的图形不会失真。

4．基于文本

SVG最有趣的特性之一在于它是一种文本格式的图像，更确切的说，它是XML文档格式的图像。SVG基于文本的特点意味着在绘制SVG图形时，我们即可以使用专用的绘图工具，也可以使用文本编辑器（如记事本）。

例程1-1是一个简单的SVG代码示例，效果如图1-4所示。

图1-4 示例效果

 

5．易于交互

SVG支持SMIL（Synchronized Multimedia Integration language，同步多媒体集成语言），使得在图片内部实施交互成为可能。此外，由于SVG支持脚本语言，Web应用程序开发人员可通过脚本编程方式访问SVG文件文档对象模型中的元素和属性，响应特定事件。

6．多样的文件风格

SVG除了可包含矢量图形和文字对象外，它还可以引入光栅图形。此外，由于其基于XML文档的特性，SVG文件易于修改与编辑。

7．内嵌字体数据

SVG内嵌了图像中所包含文字的字体形状，从而解决了动态字体的问题，省去了用户下载字体文件的过程。

1.3 SVG的昨天、今天与明天

1.3.1 SVG的昨天

SVG的历史最早可以追溯到1998年，当年4月份，Adobe、IBM、SUN等公司向W3C组织提交了联合制定的PGML标准。随后，微软、Macromedia等公司也向W3C提交了类似的矢量图形标准VML。从功能上分析，PGML适合专业设计和出版，而VML适合普通的矢量图形应用。采用哪一个作为通用矢量图形标准是一件十分困难的事情，经过一段时间的考虑，W3C组织最终决定综合两者之长，发布一个新的矢量图形标准，即SVG。

根据W3C官方网站的介绍，SVG第一个草案出台于1999年2月。2000年8月，W3C组织正式发布了SVG 1.0规范。2003年1月14日，W3C组织发布了SVG 1.1规范。目前，SVG最新版本是2005年4月发布的SVG 1.2草案。

SVG出现后相当长的时间里并不“火”，究其原因主要有两点：

1．各大软件厂商对SVG的支持有限

SVG是一个开放的通用矢量图形标准，各大软件厂商考虑到自身利益，不愿在其中投入过多资源开发相应的支持技术与产品。

2．SVG需要VML、Flash等矢量图形标准竞争

VML的背后是微软，Flash的背后是Adobe（Macromedia），SVG的背后有谁呢？

1.3.2 SVG的今天与明天

现在，SVG的普及情况可以用“逐步升温”来形容。仔细浏览W3C组织的官方网站，你会发现2000年8月发布的SVG 1.0规范是候选推荐标准（Candidate Recommendation），而2003年4月发布的SVG 1.1规范变成了推荐标准（Recommendation），细微的差别说明了SVG地位的变化。另外，Adobe、微软、IBM等业内知名软件厂商正逐步加大对SVG的支持力度，各种浏览器端SVG插件纷纷亮相，众多专业矢量绘图工具也开始支持SVG标准。除了官方和厂家的支持外，基于SVG的Web图形应用程序如雨后春笋般的出现，SVG的应用范围也从原来单一的地理信息系统领域（Web GIS）向其他领域扩展。以目前的发展趋势来看，我们有理由相信，SVG的明天会更好。

1.4 SVG与VML、Flash的对比

在Flash大行其道的今天，SVG未来能否取而代之成为Web图形应用的主流？回答这个问题并不容易，请看本节中SVG与VML、Flash的对比情况。

1.4.1 SVG与VML的对比

VML最早是由微软等公司于1998年向W3C组织提交的矢量图形标准，1999年9月，微软发布的IE5.0中正式支持VML。VML作为矢量图形标准具有基于XML标准、支持高质量矢量图形显示、基于文本、易于交互操作等优点。

与VML相比，SVG可谓为晚辈。SVG继承自VML和PGML，因此，VML所具备的优点，SVG同样具备，除此之外，SVG作为开放通用标准，能够获得更广泛的支持。不过，有微软支持的VML是不会轻易退出历史舞台的，SVG全面取代VML尚需时日。

1.4.2 SVG与Flash的对比

先来了解一下Flash与SVG的不同之处。

1．技术所有权

SVG是W3C组织管理的开放标准，Flash则归Macromedia公司（已被Adobe公司收购）所有。虽然Macromedia公司的开放条款比较宽松，但主动权始终掌控在Macromedia公司手中。

2．文件格式

SVG文件属于文本文件，Flash文件则属于二进制文件，这点差别对于搜索引擎建立内容索引非常重要。搜索引擎进行搜索时，可以轻易的搜索到SVG文件，并建立与其内容相对应的索引。而Flash文件的内部结构从本质上来说对搜索引擎是不可见的，同时，从Flash中提取链接的难度远大于从普通HTML页面中提取链接的难度。

3．交互性

与SVG基于XML文档的特性相比，Flash的交互性显然受到了更多的限制。

4．其它

移动应用领域是Flash与SVG之间的新战场，W3C组织早在2003年就已发布了SVG的移动版本，并受到了多家厂商的支持。有评论认为SVG的开放性使其对比Flash占有更大的优势，不过移动应用领域尚处在方兴未艾的阶段，因此很难确定哪一种技术更有优势。

综上分析所述，商业层面上，Flash优于SVG，虽然Flash不是W3C组织的推荐标准，但它是Web矢量图形领域的事实标准，这与其背后的商业支持是密不可分的，即商业利益选择技术；技术层面上，SVG优于Flash，而且SVG是W3C组织管理的Web矢量图形推荐标准，许多人认为SVG最终将会替代Flash成为Web矢量图形应用领域的事实标准。

目前，支持SVG的厂商和基于SVG的应用开发越来越多，特别是Macromedia公司被Adobe公司收购后，Adobe投入了更多的资源支持SVG，由此来看，SVG有很大的希望最终替代Flash成为事实标准。

目前，支持SVG的厂商和基于SVG的应用开发越来越多，特别是Macromedia公司被Adobe公司收购后，Adobe投入了更多的资源支持SVG，由此来看，SVG有很大的希望最终替代Flash成为事实标准。

1.5 小结

本章从多个角度介绍了SVG的物理属性，包括SVG的基本概念、特点、应用领域和历史与展望。本章最后将SVG与VML、Flash进行了对比分析，说明了SVG在与其他矢量图形标准竞争过程中存在的优势与不足之处。

 

 

下一篇文章内容计划是通过一个示例说明SVG的整体结构。