可伸缩矢量图(Scalable Vector Graphics，SVG)浏览器现在变得越来越主流，并且它们可以用于多种强大的方式。现在，SVG 成为 W3C 推荐已经有一段时间了，但是一直没有快速扩展到更广的 Web 领域。这种现状现在可能要改变了，因为 Mozilla (Firefox)、Apple (Safari) 和 Opera 都在它们的浏览器中支持(或者将要支持)SVG，而不需要插件。Linux 桌面 Gnome 和 KDE 也支持将 SVG 用于主题、图标、背景和游戏中。直到现在，查看 SVG 的主要方式依然是使用 Adobe 插件，我使用该插件测试了示例代码。
到底什么是 SVG，何时适合使用它呢?SVG 被拿来跟 PDF、PostScript、Flash 和 HTML 作过比较，但是它具有所有这些的元素，却没有重复它们。SVG 很复杂，这使得它在保留文本格式(Google 可以对它进行索引)和 XML(您可以用 DOM 来操纵它)的同时，对于很多不同的人是不同的东西。在最基本的层次上，它是一种用于描述矢量 图的 XML 语言。矢量图是由绘图线条构成的图形，与位图 图形相对，后者是由绘图像素构成的图形。但是 SVG 也可以包含和操纵位图、文本、甚至声音文件。此外，它还可以:
描述将噪音和其他效果应用于矢量图像或位图图像的方式
指定精细的颜色梯度和模式
提供到 Web 其他部分的链接
成为脚本的和转换的、动画的和样式的
以多种方式相互交互
声明性编程 101
声明性编程更多地像是您想要发生的事情的描述，而不用关心如何使之发生的细节。声明性编程的常见例子包括电子表格、SQL、XSLT 和诸如 Haskell 这样的编程语言。其他混合提供声明性和过程性构造的编程语言包括 Lisp 和 Python。几个 XML 方言将包括更多声明性特性，以便为处理诸如格式验证(XForms)、数据挖掘(XQuery)、转换(XSLT)、事件处理(XML Events)和动画(Synchronized Multimedia Integration Language 或 SMIL)之类的任务而取代更复杂和/或重复的 JavaScript。
SMIL是一种用于实时地混合视频、图形、音乐和文本的语言，已被 SVG 所采纳和扩展。SVG 中的大部分声明性动画都直接取自 SMIL(不用使用 SMIL 名称空间)，尽管 SMIL 的有些方面被省去(因为它们在 SVG 的上下文中没有任何意义)，另外一些方面则被扩展。SMIL 被用于 RealNetworks 的 RealPlayer 中、Apple 的 QuickTime 中，以及(作为 XHTML+SMIL)Microsoft 的 Internet Explorer 中。SMIL 是一种工具，用于编排这些不同的媒体格式，以响应时间和事件。
SVG 继承自 SMIL 的声明性能力让您可以使图片成为动画，以预定的次数播放，或者响应某些事件。您可以声明五种类型的动画，以及使用许多事件来触发您的动画。
现在该向您展示一些例子了。
绘制空白
第一个例子为本文中其余的例子创建一个画布。我将回到小时候，使用火箭和 UFO 的草图，所以背景是一张简单的横线笔记簿纸张，上面有三个洞。这个例子没有使用动画。我只是设置一个画布，像是小时候用的笔记簿纸张，用于涂鸦。纸张非常简单，其中只有一个 svg 元素，该元素包含一小段定义:一个线条模式和一个小圆。然后，在代码体中(defs 之外)，我在整个页面上绘制了一个矩形，用线条模式进行填充。然后，我利用刚才定义的圆，在三个地方画了三个圆圈。清单 1 展示了笔记簿纸张例子的 SVG 代码。
清单 1. 一张笔记簿纸张
＜?xml version="1.0" encoding="utf-8"?＞
＜svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" fill="white"＞
＜defs＞
＜pattern id="single_line" x="0" y="0" width="1" height="32"
patternUnits="userSpaceOnUse" viewBox="0 0 1 32"＞
＜line x1="0" y1="32" x2="1" y2="32"
stroke="lightblue" stroke-width="0.5"/＞
＜/pattern＞
＜circle id="single_hole" width="28" height="28"
cx="14" cy="14" r="14"
fill="white" stroke="black" stroke-width="0.5"/＞
＜/defs＞
＜rect x="0" y="0" width="100%" height="100%"
fill="url(#single_line)" stroke="none"/＞
＜use xlink:href="#single_hole" x="32" y="10%"/＞
＜use xlink:href="#single_hole" x="32" y="50%"/＞
＜use xlink:href="#single_hole" x="32" y="90%"/＞
＜/svg＞
要在您的浏览器中运行这个例子，请下载示例代码。如果已经安装好了 SVG 查看器，则查看这个例子。
