引言

SVG(Scalable Vector Graphics)是XML的方言,有点类似XHTML,它可以用来绘制矢量图形,例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以变形,可以合并,也可以通过滤镜完全改变外观。

SVG于1999年推出,之前有几个相互竞争的格式规范被提交到W3C,但是都没有完全通过。虽然规范已经出现存在很长时间了,但浏览器实现的进度却比较缓慢,所以目前(2009年)应用在web上的SVG内容并不是很多。即便浏览器实现了一些规范,但实现速度完全不能和竞争技术相比,比如HTML Canvas和Adobe Flash,都已经实现了成熟的应用接口。但是SVG也有自身的优点,比如它实现了DOM接口(比Canvas方便),不需要安装第三方插件就可以在浏览器中使用(比Flash方便)。当然,是否使用SVG还要取决于你要实现什么。

基本要素

HTML提供了定义标题、段落、表格等等内容的元素。与此类似,SVG也提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。一个简单的SVG文档只包含svg根元素,以及基本的形状元素。另外还有一个g元素,它用来把若干个基本形状标记成一个组。

在上述内容的基础上,SVG可以成为任何复杂的组合图形,SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能,但是所有这些额外的语言特性,都需要在一个定义好的图形区域内实现。

开始之前

包括Inkscape在内的很多免费应用原生支持SVG格式的文件。但是本教程建议在学习过程中使用XML或文本编辑器,因为想要理解SVG内部的原理,最好的方法就是动手取写一些SVG的标记。各种SVG浏览器是有差别的,因此很可能当你制作了一个SVG图形,并且用一个工具调试正常后,却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持SVG标准的程度不同,另外,如果你将其他技术和SVG一起使用(比如a href="/en/JavaScript" title="en/JavaScript">JavaScript和CSS),也会出现类似的情况。

并非所有的现代浏览器都支持SVG,SVG wiki上有一份比较详细的SVG浏览器列表,Firefox支持SVG 1.5版本中的部分内容,并且支持的程度越来越高。希望通过这里的教程,MDC能帮助开发者理解Gecko内核和其他一些主要实现之间的差异。

正式开始之前,你需要基本掌握XML或其他像HTML的标记语言,如果你不是很熟悉XML,这里有几个重点一定要记住:

  • SVG的元素和属性必须按标准格式书写,因为XML是区分大小写的(这一点和html不同)
  • SVG里的属性值必须用引号引起来,就算是数值也必须这样做。

SVG是一个庞大的规范,本教程主要涵盖的是基础内容,一旦掌握了这些内容,你就有能力使用元素文档接口文档,去了解其他任何你想要掌握的内容。

SVG的种类

自从2003年成为W3C推荐标准以来,最接近的“完整版”SVG是1.1版,它基于1.0版,并且增加了更多便于实现的模块化内容,SVG1.1的第二个版本正在制定当中,完整的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打印规格的项目,增加对多页面和颜色管理的支持,但是这项工作已经终止。

附件

檔案 Size 日期 Attached by
dino.png
3238 位元組 2005-04-25 23:10:56 Dria
SVG_Overview.png
70531 位元組 2008-01-12 22:28:16 Wjjohnst

Document Tags and Contributors

Contributors to this page: Dx.Yang, ethertank
最近更新: ethertank,