在浏览器中使用 SVG 创建矢量图形

开始之前

了解本教程的内容以及如何从中获得最大收益。

关于本教程

可缩放向量图形（Scalable Vector Graphics，SVG） 1.1 是一种描述二维向量图形的 XML 语言。它是万维网联盟（W3C）开发的，主要目标是用 XML 建立一种实用、灵活的图形格式，尽管 XML 很罗嗦。SVG 的主要特点包括嵌套转换、剪辑路径、alpha 蒙版、光栅过滤效果、模板对象，当然还有可扩展性。SVG 还支持动画、视图的缩放和转移、各种图形原语、分组、脚本、超链接、结构化元数据、级联样式表（CSS）、专门的文档对象模型（DOM）超集，并且很容易嵌入其他 XML 文档。总之，SVG 是应用最广、最受欢迎的 XML 应用程序之一。

可以在很多不同环境中开发、处理和部署 SVG，从电话这样的移动系统到个人数字助理（PDA），再到印刷环境。本教程主要介绍 Web 开发中的 SVG，一步一步地告诉 Web 开发人员和设计者如何在网站中实际应用 SVG。课程是围绕着例子进行的，可以在您喜欢的浏览器中查看和试验。本教程没有过多讨论 SVG 语言的细节。但是从更广的视角引导您在 Web 上部署它。

回页首

谁应该阅读本教程？

SVG 是一种定位于 Web 领域中多种应用的技术。可用于表示简单的图像（和 JPEG 一样）或者复杂的应用程序（类似于 Macromedia Flash）。因此，对于每个 Web 开发人员和设计者来说都是一种必不可少的武器。开发过任何 Web 应用程序的程序员都能从本教程中获益。Web 设计人员可以通过本教程学会如何在 Web 上有效部署向量图形。

回页首

目标

本教程介绍在 Web 上发布 SVG 需要了解的 SVG 基础知识。您将了解如何在浏览器中呈现独立的或者内嵌在 XHTML 中的 SVG 图像。

回页首

前提条件

本教程假设您了解 XML、XML 名称空间、CSS 和 XHTML 基础。虽然本教程主要讨论 SVG 在 Web 中的应用，但不需要实现了解 SVG，我们首先介绍这种语言的基础知识。如果不熟悉 XML，请阅读教程 Introduction to XML。如果需要了解 XML 名称空间，请阅读文章 Plan to use XML namespaces, Part 1。如果不熟悉 CSS 特别是在 XML 中的应用，请参阅教程 Display XML with Cascading Stylesheets: Use Cascading Stylesheets to display XML, Part 1: Basic techniques to present XML in Web browsers。本教程将介绍如何用 CSS 在浏览器中设置 XML 的样式。如果不熟悉 XHTML，XHTML, step-by-step 是一个很好的入门教程。还需要知道二维直角坐标系以及笛卡儿坐标系的基本算法。您可能还记得在高中数学课中讲到的如何沿 X 轴和 Y 轴指定一个点。

回页首

系统需求

强烈建议您试验本教程中给出的例子。惟一的要求是支持 SVG 的浏览器。Firefox 1.5 及更高版本和 Opera 9 内置了这种支持。Safari 宣布在新版本中将支持 SVG，但是目前只能在其加紧开发的预览版中看到这种支持，不能保证稳定性。Mac OS X 用户可以尝试 Camino Web 浏览器 的 SVG 支持。Microsoft® Internet Explorer 用户需要安装 Adobe SVG Viewer 之类的插件。如果需要给出浏览器输出结果的例子，我使用了 Ubuntu Linux® 上 Firefox 1.5.0.2 的截屏。Firefox 是一种流行的 Web 浏览器，支持 Microsoft Windows®、Mac OS X、Linux 和其他平台，它基于 Mozilla 的呈现引擎。

回页首

关于本教程中的例子

本教程提供了很多 SVG 的例子，既有独立的也有嵌入 XHTML 中的。本教程中用到的所有文件都打包成一个 zip 文件，即 x-svggraphics-tutorial-files.zip。所有文件都使用前缀表明相关的节次及其在该节中出现的顺序。比如，第三节第一个例子的文件名以 eg_3_1 开始。

以 .svg 为后缀的文件是独立的 SVG。以 .xhtml 为后缀的文件是 XHTML。少数文件使用了其他后缀，比如表示独立 CSS 文件的 .css，表示 XSLT 转换文件的 .xsl。

每一屏都列出了例子文件并说明了相互之间的关系，因此阅读本教程时很容易找到对应的例子并进行试验。

1 页，共 8 | 后一页

评论

回页首

内容

• 开始之前
• 简单的独立的 SVG
• 更复杂的绘图
• XHTML 中的 SVG
• 结束语
• 下载
• 参考资料
• 关于作者

---

1 页，共 8 | 后一页