引言
SVG 是一种 XML 语言,类似 XHTML,可以用来绘制矢量图形,例如下面展示的图形。SVG 可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以形变(be transformed)、合成、或者通过滤镜完全改变外观。
SVG 诞生于 1999 年,之前有几个相互竞争的格式规范被提交到 W3C,但是都没有获得批准。主流浏览器均支持 SVG。加载慢是 SVG 的一个缺点。但是 SVG 也有自身的优点,比如它实现了 DOM 接口(比 Canvas 方便),不需要安装第三方扩展。当然,是否使用 SVG 还要取决于你要实现什么。
基本要素
HTML 提供了定义标题、段落、表格等等内容的元素。与此类似,SVG 也提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由 <svg>
根元素和基本的形状元素构成。另外还有一个g
元素,它用来把若干个基本形状编成一个组。
从这些开始,SVG 可以变得更加复杂。SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能,但是所有这些额外的语言特性,都需要在一个定义好的图形区域内实现。
开始之前
包括 Inkscape在内的很多免费应用原生支持 SVG 格式的文件。但是本教程建议在学习过程中使用 XML 或文本编辑器,因为想要理解 SVG 内部的原理,最好的方法就是动手写一些 SVG 的标记。你需要注意到你的最终目标。各种 SVG 浏览器是有差异的,因此很可能你制作了一个 SVG 图形,并且用一个工具调试正常后,却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持 SVG 标准的程度不同,另外,如果你将其他技术和 SVG 一起使用(比如 JavaScript和 CSS),也会出现类似的情况。
所有的现代浏览器都支持 SVG,在某些情况下甚至几个版本都支持 SVG。Can I use上有一份比较详细的支持 SVG 的浏览器列表,Firefox 1.5 以后的版本支持 SVG 的部分内容,并且支持的程度越来越高。希望通过这份教程,MDN 能帮助开发者理解 Gecko 内核和其他一些主要编译器之间的差异。
正式开始之前,你需要基本掌握 XML 和其他标记语言比如说 HTML,如果你不是很熟悉 XML,这里有几个重点一定要记住:
- SVG 的元素和属性必须按标准格式书写,因为 XML 是区分大小写的(这一点和 HTML 不同)
- SVG 里的属性值必须用引号引起来,就算是数值也必须这样做。
SVG 是一个庞大的规范,本教程主要涵盖基础内容。掌握了这些内容之后,你就有能力使用元素参考和接口参考,学习其他你需要知道的内容。
SVG 的种类
自从 2003 年成为 W3C 推荐标准以来,最接近的“完整版”SVG 版本是 1.1 版,它基于 1.0 版,并且增加了更多便于实现的模块化内容,SVG1.1 的第二个版本在 2011 年成为推荐标准,完整的 SVG1.2 本来是下一个标准版本,但它又被 SVG2.0 取代。SVG2.0 正在制定当中,它采用了类似 CSS3 的制定方法,通过若干松散耦合的组件形成一套标准。
除了完整的 SVG 推荐标准,W3C 工作组还在 2003 年推出了 SVG Tiny 和 SVG Basic。这两个配置文件主要瞄准移动设备。首先 SVG Tiny 主要是为性能低的小设备生成图元,而 SVG Basic 实现了完整版 SVG 里的很多功能,只是舍弃了难以实现的大型渲染(比如动画)。2008 年,SVG Tiny1.2 成为 W3C 推荐标准。
另外还有一些关于 SVG 打印规格的项目,增加对多页面和颜色管理的支持,但是这项工作已经终止。