摘要：SVG(Scalable Vector Graphics) 是由W3C 组织开发的矢量图形标准，主要面向网
络应用，它灵活，可扩展，能表现丰富的图形内容，实现了强大的交互性，可重用性和
可伸缩性。本文介绍SVG 的技术特点，实际应用和发展趋势。并结合实验室主页的制
作介绍SVG 图形的实现。
关键词：SVG，XML, 网络图形，矢量图形, 图形标准
1. 引 言
随着Internet 技术的迅速发展，人们对网络中的使用的图形图象有了更高的要求。
希望有一种既能表现丰富的图形内容，又能跨平台使用，兼容流行的技术标准规范，还
可以控制文件大小，便于网络传播，并能使网络中使用的各种显示打印设备都能正确一
致处理的新一代图形格式。SVG(Scalable Vector Graphics)正是在这种背景下应运而生。
SVG 主要面向网络应用，是W3C 组织开发的新一代基于XML 的二维矢量图形标
准。它描述如下3 种类型的图形对象：矢量图形、图像、文本。图形对象既能被分组，
又能被加入样式，变换和组合。其特征集包括嵌套变换（nested transformations）, 剪切
路径（clipping paths），蒙版（masks），滤镜效果和模板对象。
1998 年4 月Adobe, IBM 参与制定的PGML（Precision Graphics Markup Language）
微软，Macromedia 等提出的VML（Vector Markup Language）相继提交给W3C。W3C
于1998 年8 月成立了SVG 工作组致力于开发新的图形标准，于1999 年2 月11 日发布
了第一个工作草案，先后发布了九个工作草案，于今年8 月2 日成为候选标准（Candidate
Recommendation）[1]。W3C 专门建立了一个测试站点[2]，正式的标准即将出台。
2. SVG 的技术特点
2.1 SVG 的图形对象
1 北京大学君政基金资助项目。
SVG 用专门的标记描述的矢量图形有矩形、圆、椭圆、直线、折线和多边形。对于
不能用上述图形表示的复杂图形可以用路径<path>来描述。可以对各图形元素施以填充，
勾勒边界，使用滤镜，通过XSL（Extensible Stylesheet Language）或CSS（Cascading Style
Sheets）的方法添加各种样式等操作。
路径分直线和曲线两种，其中曲线用圆弧或三次或两次的Bezier 曲线绘制。路径有
长度属性，可以辅助实现文本按路径摆放，基于路径的动画等效果。
SVG 在字体处理上为了使最终用户能够在任何情况下看到的字体相同，而不依赖其
系统字体库，采用了CSS2 中的字体显示核心技术WebFont。在SVG 图形生成同时生成
压缩的该文件中用到的字体信息，可随SVG 文件一同传输。常用字体也可以用名字引
用。字体可以手工生成。也有公司提供从True Type 字体自动生成SVG 字体的工具[4]。
SVG 通过坐标矩阵的变换可以实现坐标转换、放缩、旋转、倾斜等效果，还可以通
过矩阵相乘实现一组嵌套变换。
SVG 的颜色管理同时支持sRGB 规范和ICC（International Color Consortium）颜色规
范，可以在ICC 兼容的设备上显示更为丰富的色彩。使用ICC 色域时，SVG 采用色域
描述（color profile description）机制来建立ICC 色域和SVG 内容的联系。色域描述被
加入客户端的色域信息中以选择相应的色彩。
在填充或勾勒边界时可以使用渐变色（gradient）和底纹(pattern)。渐变色分线性
（linear）和放射性(radial)两种。可以灵活的设置渐变的各种属性。
SVG 中还提供了剪切路径（clipping paths）和蒙版(mask)技术。使用剪切路径可以
使在路径定义区域之内的图形显示出来，而屏蔽其外的图形。蒙版操作通过改变目标对
象的Alpha 值来生成如淡入淡出，融入背景等特殊效果。
SVG 提供了丰富的滤镜效果。SVG 文件中定义并引用的滤镜，传到客户端由浏览
器解释后调用相应算法生成。在图形发生变化时，只需要客户端重新解释绘制即可。滤
镜效果可以叠加组合，通过对不同滤镜的组合使用，来生成各种专业的图像处理的效果。
SVG 中提供了对嵌入图像的支持。可以在<image>标签中直接写入图像的二进制信
息。也可以链接指向某个图像文件。JPG、PNG 和SVG 是必须被解释器支持可以直接
链接的。还可以用滤镜中的〈feImage>引入外部图象文件加以处理。
2.2 基于XML 带来的技术优势
XML 标准是为克服HTML 的诸多不足而诞生的新一代Internet 网页发布语言标准。
近年来发展势头十分迅猛。XML 将文档内容和表现形式分开，使其各施其职，极大的
提高了效率；可以根据各行各业不同的特殊要求制定不同的DTD，便于文档的规范，
兼顾了通用性和专业性；遵循严格的语法要求；便于不同系统之间信息的传输。
用于描述矢量图形的几何形状，图层，路径等结构，用XML 的标记形式可以得到很
自然表示。XML 发展很迅速，其标准的语法结构分析器已很成熟，这就使得基于XML
的矢量图形的实现可以不再需要进行低层的语法分析，从而变得比较容易。另外，基于
XML 意味着可以使用绝大部分现今网络成熟的技术如 JaveScript ,VBScript , CSS, DOM
等，也可以无缝应用XML 家族中的优秀技术标准如XSL, XHTML, XPointer, SMIL 等。
2.3 SVG 的交互动画及事件处理功能
SVG 图形能实现很强的交互性和动画效果。SVG 可以作为SMIL（Synchronized
Multimedia Integration Language） Animation 的宿主语言(Host Language)，通过调用其动
画元素来使用在SMIL Animation 中定义好的机制实现动画，常用的动画元素有：
<animate>用于动态改变图形元素的某种属性；
<animateColor>用于实现图形元素的颜色的变换；
<animateTransform>用于动态实现图形元素的空间位置的改变，如旋转，缩放等。
<animateMotion>用于使目标对象沿所定义的路径运动。
使用这种方法的目标对象一定要可以被动态改变（Animatable）,SVG 中大部分元素和属
性都能被动态改变，但也有少数不能，故这种方法有一定局限性。
SVG 的动画也可以通过脚本语言访问其SVG 的文档对象结构(DOM)来实现。这种
方法提供了对图形所有元素及其特征属性的访问和动态更改的途径。不仅可以实现动
画，而且可以通过事件触发，提供强大的交互功能。脚本代码既可以内嵌入SVG 文档
中实现，又可以写在SVG 所在的XHTML 或XML 页面中，方便于接收表单输入等交互。
较之第一种方法，使用脚本语言需要写一定代码，受的限制很少，更加灵活。
SVG 事件处理功能也十分强大，SVG 的事件处理使用DOM2（Document Object
Model）中的机制。SVG 支持所有DOM2-EVENT 中定义的接口，也就是说事件发出，
事件捕捉，事件接收者等一系列功能都已封装实现。SVG 支持的事件分以下几类：
1． UI(User Interface) Event 包括DOMFocusIn、DOMFocusOut、DOMActivate 等
三种；
2． Mouse Event 包括Click、mousedown、mouseover 等六种；
3． Mutation Event 包括DOMSubtreeModified、DOMNodeInserted 等七种；
4． SVG 专属事件 包括SVGLoad、SVGUnload 等六种
如Click 和mouseover 等鼠标事件可以赋与任何的SVG 图形元素(键盘事件在最新
的DOM2-EVENT 中没定义，今后可能会加入)。这就使得SVG 的图形元素有了十分广
泛和灵活的交互功能，结合脚本语言和动画元素，可以产生极其丰富的图形效果，非常
适合网络中使用。
2.4 SVG 适合网络应用的特点
网络因为有其自身的特点，对在其上使用的图形格式有很多的要求。而SVG 从制
订标准一开始，就一直以网络应用为考虑问题的核心。下面所列的便是SVG 适于网络
应用的特点：
SVG 是基于XML 的图形格式，在与网络中使用的其他标准规范的兼用性上有着得
天独厚的优势。可以很容易的建立与其他技术间的联系，实现更强大的功能。
由于矢量技术的引入，使SVG 文件的大小很小，下载浏览更加便捷，而且采用客
户机本地解释生成图形的方式，既充分利用了客户机的资源，又减轻了服务器端的负担，
可以更有效的利用网络带宽，解决网络瓶颈问题。
由于SVG 是解释性语言，所以在浏览时遇上很大的图形文件，可以以图形元素为
单位，接收多少，显示多少，类似与JPEG 的渐进显示。
SVG 具有强大的动画交互功能和丰富的滤镜效果，可以使网页浏览效果更加生动丰
富，带给浏览者全新的感受。
因此SVG 是适合网络中使用的理想的图形格式。
3. 与其他图形格式的比较
与网络中广泛使用的光栅图形格式如JPEG、GIF 等相比。SVG 的突出优势就在于
它可以无级缩放。SVG 图形在被按任意比例缩放时都能保证图形被缩放局部的清晰，没
有光栅图常见的锯齿现象，而且运用简单高效的矢量图形指令代替对每个点信息的描述
可以使存储效率更高，文档更小，更适于网络中使用。图形中的文本信息再也不仅仅代
表孤立的形状，它可以被选中，可以被编辑，可以被复制，粘贴就如同在Word 文件中
一样。更重要的是，它可以很容易被定位，可以被搜索引擎检索。这是与JPEG 等光栅
图间最主要的区别之一。SVG 也提供了对嵌入图像的支持。SVG 并不是要取代JPEG,GIF
等光栅图形格式，而是要提供一种克服光栅图形不足的矢量解决方案。
现在网络中有一些与SVG 功能相近的矢量图形软件正在使用，而其中最流行的就
是Macromedia Flash 和Apple QuickTime。以Flash 为例，Flash 功能十分强大，可以做
出十分精彩的动画，在网络中很受欢迎，其标准也已开放，但是与SVG 相比，Flash 还
是有以下的不足：
1． 它只是一个公司（Macromedia）的标准，浏览器并不内嵌其支持，只能以下载插件
的方式来浏览；
2． 与通用的标准技术间缺乏互操作性（Interoperability），如缺乏与HTML 页面或CSS
表单互动的机制；
3． Flash 的文件分两种，一种是Swf 的播放格式，不可编辑。另一种Fla 的可编辑格式，
但两者都是二进制格式，Fla 格式文档也仅能用Flash 软件编辑。不利于其文档的更
改和维护。
Flash，QuickTime 必须用一种格式实现包括声音，动态文本，丰富的样式等等功能
来满足网络用户的需要，而为实现这些图形描述之外的附加功能，势必增加很多的工作
量，使格式更加臃肿庞大。SVG 标准的制订思路并不一样，它考虑的是提供一种用XML
语言来描述矢量图形信息的方法，同时使用其他的基于XML 的语言或相关技术来扩展
其功能。在动画功能的实现上，就直接使用SMIL Animation 已有的现成的技术；字体
不太好处理，就借用CSS2 中的WebFont 的技术；网络超链接，使用才制订出来的Xlink。
SVG 标准的制订选择了一条既省事经济，又简单高效，而且扩展能力极好的道路。SVG
的第一个字母S（Scalable）既代表光栅图形格式所没有的可缩放性，又代表其他矢量图
形格式没有的可扩展性。而后者恰恰是SVG 的精髓所在。可以说SVG 的最大的优势就
是它的可互操作性，也就是它的可扩展性。这使得我们可以将SVG 的应用拓展到十分
广阔的领域。
4. 实 例
这是我们在http://graphics.pku.edu.cn 首页中实现的一个SVG 导航栏的片断，实现
了一些动画、链接功能、滤镜和渐变的效果。图形调入时，“情况简介”从屏幕下方沿
一条事先定义的曲线飞入，并不断旋转，同时与其他所有的导航标签字体从小变大，最
后定位于正常位置。当鼠标移入某标签时，该标签被滤镜渲染。此时点击可连到相应页
面。鼠标移出取消渲染。
在使用中我们感觉SVG 的确功能很强大，而且易于编辑。代码可全部用文本编辑
器手写得到。感到不足的地方是，本地的显示速度在页面特效较多时将会比较慢，可能
和所用的显示插件不完善有关。还有中文不能直接用国标码，须先转换为Unicode 才能
正确显示。SVG 代码片断如下：
<svg width="7cm" height="12cm" viewbox="0 0 400 600">
<script type="text/ecmascript"> <![CDATA[
function onmsover1(evt) {…}
function onmsout1(evt) {…}
]]> </script>
<defs>
<filter id="MyFilter"〉… </filter>
<linearGradient id="MyGradient"gradientUnits="userSpaceOnUse">…</ linearGradient>
</defs>
<g x="5" onmouseover="onmsover1(evt)" onmouseout="onmsout1(evt)" style=
"font-family:SimHei;font-size:26;stroke:black;stroke-width:.5;fill:url(#MyGradient);">
<a xlink:href="introduction.htm" target="main">
<text id="intro" y="22" >情况简介
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="359" to="0"
begin="0s" dur="2s" fill="freeze" repeatCount="4"/>
<animateMotion dur="8s" repeatCount="1"
path="M150,450 C -50,50 200,0 5,22" rotate="auto" />
</text>
</a>
<a xlink:href="person.htm" target="main">
<text id="staff" y="72">人员组成 </text>
</a> …
</g>
</svg>
图1 实验室主页的SVG 实现片断
5. SVG 现有的应用方向和未来的发展趋势
自从W3C 提出SVG 的草案后，各大公司团体给与了高度重视。到现在已经出现了
很多的应用和实现。主要分以下三个方面：
(1) SVG 图形的生成工具。较知名的有Adobe 的Illustrator9 中内嵌了SVG 的输出；Corel
Draw9 提供输出SVG 的插件；普遍特点是图形矢量表示直接转换为SVG 的语言，
而复杂的滤镜和交互动画效果需要自己写代码。另外还有很多从其它图形格式文件
向SVG 转换的工具。较实用的有University of Nottingham 的PostScriptToSVG 和
FlashToSVG 的工具。
(2) SVG 图形的浏览工具。Adobe 的SVG Viewer(用于浏览器的插件)；IBM 的SVG
View(用Java 写的SVG 图形察看程序)；他们实现了SVG 标准特征集中的大部分。
(3) 运用SVG 的实例。用SVG 制作地图，SVG 的可放缩性和文本可定位特性十分适合
电子地图的浏览和检索；Oracle 公司利用原始的XML 数据用XSLT 自动转换为SVG
格式的直方图或饼图，现将数据库中查询出的数据在服务器端可视化[5]；Usbyte 网
站使用SVG 图形来演示硬盘DVD 等设备的原理、组成和工作流程[6]。
今后的应用方向将主要集中于网页中图形的制作和大量以XML 格式存储的数据的
图形可视化。尤其是后者有可能成为SVG 应用的热点。大量的数据可以用XSLT 自动
可视化，这将给包括网上电子商务在内的大量XML 的应用提供数据可视化的简单可行
的方法。而对于网页制作，SVG 在制作交互动画上和制作矢量图形的优势将带给网页以
全新的感受。一旦SVG 正式标准发布，浏览器（如IE）将内置对其的支持，SVG 将会
很快成为网络中图形交换的主要格式之一。
虽然SVG 有很多优点，但其在推广和发展中将会遇上一些问题和挑战。首先从SVG
标准制订的耗时很长，屡经修改，延期达一年之久可以看出。W3C 在SVG 的标准制订
上受的制约很多。一方面各大厂商有各自不同的利益，如微软和ADOBE 在SVG 的技
术实现上方案不同。至今微软都没有支持SVG 的举动。另一方面SVG 的功能甚至是一
些基础都架构在其他的技术标准之上，尤其是一些正在开发的技术。因此SVG 今后的
发展将会是反复妥协修补的艰难过程。
其次，现在SVG 的应用仍然太少，如何吸引更多的软件公司和程序员开发基于SVG
的软件，更多的网站采用SVG 制作网站将是关键。
最后，由于SVG 文件是纯文本格式，其源代码极易被他人获得。SVG 图形作品作
者的权益难以保障，可能会影响其创作热情。
SVG 利用矢量图形和XML 技术为我们提供了一种适于网络环境使用的图形标准。
它功能强大，适用范围广，可扩展性好，尤其是其与很多现有和正在开发技术的兼容性
将使网上图形应用产生深刻的变化。
参考文献:
[1] SVG 推荐标准 www.w3.org/TR/2000/CR-SVG-20000802/
[2] W3C SVG 测试站点www.w3.org/Graphics/SVG/Test/
[3] DelanDreville，D., SVG: The Big Next Thing,
www.zdnet.com/devhead/stories/articles/0,4413,2568268,00.html
[4] www.steadystate.com/svg/
[5] technet.oracle.com/tech/xml/demo/demo1.htm
[6] www.usbyte.com/index_SVG.htm
[7] Kamthan，P.，XMLization of Graphics，www.irt.org/articles/js209/index.htm
[8] Martin，D., Integration by Parts: XSLT, Xlink & SVG，www.xml.com/pub/2000/03/22/style/
The Features and Implementation of the Web-based Graphics Standard SVG
Ren Pin Wang Guoping Dong Shihai
Dept.of Computer Sci. & Tech., Peking University, Beijing, P.R.China
Abstract: SVG (Scalable Vector Graphics) is an XML-based vector graphics standard
developed by W3C. It is made for web use, providing flexibility and extensibility for
presenting rich graphics contents on the web, realizing interactivity, reusability and scalability.
The paper gives an introduction to the features of SVG, discussing its application and
developing tendency. Finally, One example is implemented with SVG graphics on our
laboratory web site.
Keyword: SVG, XML, Web-based Graphics, Vector Graphics, Graphical Standard
[返回] 计算机科学论坛 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 网络图形标准SVG 的特征及其实现[推荐]
(订阅本版)
2006/1/10 17:00:00
新浪微博
网络图形标准SVG 的特征及其实现[推荐]
