JavaScript 的新领域 - 动态图片处理（SVG）-2

look_w

SVG第一种技术来自 XML 家族，叫做 SVG(Scalabe Vetor Graphics) - 可缩放矢量图。作为一种通用的数据格式，XML 自诞生之日起，就不断表现出表达一切可表达之物的抱负，不仅要接纳新出现的各种信息，还要接收历史上以其他各种形式存储的数据。其扩张版图的雄心，不亚于任何一位野心勃勃的君主。
XML 适合于描述结构化的数据，所以你可能猜到了，如它的名字所示，SVG 选择的视角是矢量图。实际上，SVG 远不是第一种用 XML 描述图片的格式，甚至也不是第一种在 Web 上提出的 XML 与矢量图的组合的标准。在它之前的 1998 年，Macromedia 和 Microsoft 向 W3C 提交了 VML(Vector Markup Language)，Adobe 和 Sun 提交了 PGML(Precision Graphics Markup Language)，这两种都是基于 XML 的矢量图规范。随后，不希望互联网上的矢量图片标准被这些巨头垄断的其他公司在 W3C 内成立了一个专门小组 SVG Working Group，在借鉴了前两种提案后，提出了 SVG 规范，随后被接纳为相当于标准的 W3C 推荐（W3C Recommendation）。以下是迄今为止 SVG 的主要发展历程：
2001-9SVG 1.0 成为 W3C 推荐。
2003-1SVG 1.1 成为 W3C 推荐。并演化出 SVG Tiny，SVG Basic 和 SVG Full 不同级别的细则。
SVG 1.2 在之后的几年中一直处于工作草稿（W3C Working Draft）的状态，现已确定会被 SVG 2.0 取代。
SVG 2.0 将会完全重写 SVG 1.2，以加入更多诸如 CSS，HTML5 的新特性。
第一个简单的例子下面是一个很简单的矢量图的定义。SVG 中各种元素和属性的详细说明可以在专门的参考中找到。本文中会在例子中对一些重要的元素和属性做说明。
清单 1. 一个 SVG 文件

1 2 3 4 5 6

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > <circle cx="100" cy="100" r="40" fill="red"/> </svg>

第一行的 XML 指令定义版本，并说明此文件引用到其他文件。第二行是文档类型定义，规定此 XML 中哪些是有效的 SVG 元素。这里引用的 http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 正是第一行中 standalone 属性为 no 的原因。第三行开始是 SVG 的真正定义。circle 元素指定画一个圆。cx、cy 和 r 属性分别指定圆心的横坐标、纵坐标和半径。fill 属性指定用红色填充此圆内部的区域。