svg应用型论文-SVG与UML图

车皓阳 ([e-mail]) 中科院软件所 张治 ([e-mail])上海交通大学图像处理与模式识别研究所
2004 年 4 月
SVG 是W3C的一种图形矢量标准，与Flash相似，它们都可以在网上快速加载矢量图。虽然目前SVG还没有Flash那么好的可用性，但其基于XML，倒是先天优势，有继续发展成为主流的可能性。在网上使用SVG技术显示UML图，不仅可以在浏览器内无失真地对对象执行缩放和平移等操作，还可以利用 Xlink、XPointer等XML技术将大图分解，化简为小图浏览，甚至结合后台数据库直接存取元数据信息，并将结果动态地绘制为UML图，在网上显示出来。SVG强大的事件及脚本功能，也使得UML图具有更强的交互性和更为丰富的表达能力。本文在粗略介绍SVG和UML两种技术的基础上，描述了使用 SVG绘制UML图形的过程中会用到的一些技术以及相关工具，UML图可以从不同的角度出发划分为一系列标准组件元素，利用它们基本上就可以无障碍地构建各种UML图。
SVG是W3C的一种图形矢量标准，与Flash相似，它们都可以在网上快速加载矢量图。虽然目前SVG还没有Flash那么好的可用性，但其基于XML，倒是先天优势，有继续发展成为主流的可能性。在网上使用SVG技术显示UML图，不仅可以在浏览器内无失真地对对象执行缩放和平移等操作，还可以利用Xlink、XPointer等XML技术将大图分解，化简为小图浏览，甚至结合后台数据库直接存取元数据信息，并将结果动态地绘制为UML图，在网上显示出来。SVG强大的事件及脚本功能，也使得UML图具有更强的交互性和更为丰富的表达能力。本文在粗略介绍SVG和UML两种技术的基础上，描述了使用SVG绘制UML图形的过程中会用到的一些技术以及相关工具，UML图可以从不同的角度出发划分为一系列标准组件元素，利用它们基本上就可以无障碍地构建各种UML图。

一、SVG
可缩放矢量图形（SVG）是W3C的推荐标准，它使用XML描述两维图形结构和图形应用，可以在Web浏览器、手持设备或移动电话等多种上显示。目前稳定版本为1.1版，最新的版本是以草案形式存在的1.2版，并未最终定稿。

在SVG 中，允许三种图像对象存在，分别是矢量图像、点阵图像和文本。SVG定义了六种常用的基本矢量形状，包括直线、圆形、椭圆形、矩形、多边形和折线，在此基础上，利用坐标变换、路径、动画、滤镜图案等功能扩展，通过多层次组合矢量、点阵以及文本图，并配以各种属性，进行矢量绘图。

经过一段时期的发展，SVG的业务领域慢慢也已拓展开来，涵盖Web图表、地图、框图、流程图、项目计划图等多种类别。构建各个领域中的基本元件库也成为迫切需求，一些开源项目正以此为目标，提供可重用、基于SVG的元件库。UML图可以明确地按照种类划分，针对不同的种类，提出基本组件，再结合SVG固有的功能，就可以很容易地使用SVG创建出多种UML应用。

SVG的语法非常简单，设计人员一般在一天之内就会熟悉，IBM Developerworks中也有SVG的专题讨论，这里也就不再赘述了。

二、UML图
UML是目前最常用的一种面向对象建模语言，主要包括七种常见的类型，即用例图、类图、序列图、状态图、活动图、组件图和部署图，分别用以不同的建模用途。

类图，类图可以将一组类、界面、合作以及上述元素之间的关系显示出来，通常分为逻辑类和实现类。
组件图，以可视化方式提供系统的物理视图，显示系统中组件的依赖关系。
部署图，显示系统如何物理部署到硬件环境之中，是节点和连线的集合。上面三种UML图都是对系统静态特征进行建模，下面的四种描述系统动态特征。
用例图，描述系统的功能单元，它以图形化的方式表示系统内部的用例，系统外部的参考者，以及它们之间的交互。
序列图，强调时间顺序，显示特定用例的详细流程。顺序图有两维：垂直方向是以时间顺序显示消息/调用序列，水平方向显示消息发送到的对象实例。
状态图，描述系统动态特征，包括状态、转换、事件以及活动等。
活动图，描述系统在处理某项活动时，两个或多个对象之间的过活动流程。
UML 中还包含其它一些图，例如对象图、包图、组合图等，以及演化出的一些新的概念，如模板(Stereotypes)、职责 (Responsibilities)、扩展机制(Extensibility mechanisms)、线程(Threads)、过程(Processes)、分布式(Distribution)、并发(Concurrency)、模式(Patterns)等，是否使用要依据建模过程中系统的层次、分类和大小等具体情况而定。诚然，对于个体来说，我们并不会用到所有的符号，但一个完整的UML建模工具却是要尽可能详尽地考虑到UML中丰富的符号语法和语义信息。在这里，我们无法描述清楚使用SVG绘制每种UML符号的方法，我们要关注的是UML基本符号元件的划分以及使用SVG绘制UML图的一些常用方法和便利之处。

三、UML基本元件
上面是按照功能对UML图形进行的分类，绘制UML图形时，我们的视图并不是功能视图，而是功能视图之上的元件视图。类图和用例图在功能上是不同的，但从 SVG的角度看，它们都由方框、线条以及文字组成。不同类型的UML图都会有专属的绘图元件。在抽象级别较高的情况下（方框、线条、文字的抽象级别最高），同属一类UML图形的元件集合就会非常小；抽象级别越低，集合就会越大。但是太低层次的抽象却是无意义的（最低的情况是每个UML图都可看成一个元件，这是最具体的），关键是如何找到一个折衷点，既能保证有着元件集较小，又能方便绘图。SVG提供的基本绘图功能本来也是可以进行UML绘图的，但是这样做效率会比较低。建立起基本的UML图形元件库，会大大提高绘图质量和速度。现有的UML建模工具中，都有比较清晰的UML建模元件分类。我们这里以 Visio Professional 2002为例，看一下UML模型图的元件分类情况。

在Visio的软件模具里，包括数据流模型图、程序结构图、ROOM、Jackson图和UML模型图等。Visio中UML图的功能分类比上述常用分类要多出两项，包图和静态结构图。包图是表达系统架构的有效机制，它可以用来将系统划分为较小的、易于管理的子集，它可以由任何一种UML图组成。静态结构图包括概念图和类图，概念图代表现实世界中的概念以及概念之间的关系，它侧重于关系和属性，而不是方法。

图一是Visio按照功能分类方法划分的UML图的基本元件。可以看出，这种分类方法是有很多重叠的，例如，包在用例图等四种UML图中都被看成基本元件。但这样做，在分类清晰的基础上，可以提高用户访问模板元件的速度；忽视UML功能分类，完全访问集合要包含一百个左右的成员，访问元件的效率可能会较低。

或者，我们也可以结合这种按照功能进行分类的方法，根据视觉特征将UML基本元件分组，然后在每种视觉特征分组下，再按照功能进行分组。使用SVG绘制UML图形，这有可能会是一种较好的分类复用的方法。这样我们不仅可以保证用户快速地访问到UML元件，而且在基于SVG的建模工具内部也易于管理。例如，我们可以进行这样的分类：

人形元件，表示用例图中的主角；
椭圆形元件，也即用例图中的用例；
折角元件，包括注释和约束；
包元件（包括包和子系统）、节点元件（立方体形状）和组件元件；
抽屉类矩形元件，这一组元件有许多变体，不同之处在于顶端标注缺省文字间以及格层数会有差异，包含长式和短式两种格式；
圆形元件，包括"初始状态"、"最终状态"、"详细历史"及"简略历史"；
圆角矩形类元件和菱形元件；
带有各类箭头的直线类，包括实线、虚线；
带有各类箭头的曲线类，包括实曲线和虚曲线；
其它一些少数特殊形状元件；


图一 Visio中的UML图形元件

初看起来，可能会觉得这种分类有些杂乱，但这样的分类却是从SVG角度出发对UML图元做出的分类，适合SVG建模软件底层存储。例如，包元件的SVG模板代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="168" height="128">
<line x1="15" y1="114" x2="154" y2="114" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/>
<line x1="154" y1="35" x2="154" y2="113" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/>
<line x1="104" y1="15" x2="104" y2="53" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/>
<rect x="14" y="14" width="90" height="21" style="fill:#ffffff; stroke:#ffffff; stroke-width:1"/>
<rect x="14" y="14" width="89" height="20" style="fill:#ffffff; stroke:#000000; stroke-width:1"/>
<rect x="14" y="34" width="140" height="80" style="fill:#ffffff; stroke:#ffffff; stroke-width:1"/>
<rect x="14" y="34" width="139" height="79" style="fill:#ffffff; stroke:#000000; stroke-width:1"/>
</svg>






图二 SVG绘制的包模板元件

上面这些语句，可以作为包模板元件的SVG源码进行存储，这时尺寸相关的属性值设置仅表示比例关系。使用模板元件时，各部分尺寸依据存储时的缺省值按照比例进行放大或缩小，其余属性值则不涉及运算，直接把新值替代缺省值即可。未出现的模板中的属性在使用过程中可以自行加入。

四、使用SVG绘制UML图的一些技术
SVG是一种基于XML、数据驱动的网络绘图标准。可以结合XHTML作为一个文件单独使用，例如：

<?xml version="1.0" encoding="iso-8859-1"?> ...
<svg width="800" height="600">
<circle cx="200" cy="200" r="100"/>
</svg>




也可以嵌套在网页中使用，如下：

<embed width="320" height="240" type="image/svg-xml" id="svg" pluginspage="http://www.adobe.com
/svg/viewer/install/" src="/default.svg" >
</embed>




一般说来，在绘制UML图的时候，主体很少会用中文进行描述，但在注释中就难免需要使用中文。SVG目前还不支持中文编码，在遇到中文字符的时候，需要使用 UTF-8编码，这样就可以有效避免不同的语言环境下的字符编码问题。下面就绘制UML图的过程中，SVG技术带来的一些好处进行探讨。

* 动态显示注解信息
对UML图进行注解是有必要的。我们可以在UML图下面写上整段整段的注解，但这样做似乎针对性不强，不容易把事物讲清楚。现在好的方法是把事物按照组成部分细分，并针对性地进行说明。就如通用软件的工具提示一样，我们也可以利用SVG在UML图上实现近似功能。

SVG把图元看作一个个对象，并且提供DOM接口可直接访问对象及其属性，SVG亦提供了事件响应函数可获取界面、鼠标以及一些自定义的事件消息。有了这些支持，再加上SVG的对象分组功能（<g>分组标签）以及JavaScipt或 Java绑定，就可以顺利地完成动态显示注解信息的功能。

以前面的包代码为例，来看一下如何利用JavaScipt动态显示注解信息。

<script><![CDATA[
function show_note(evt) {
var SVGDoc = evt.getTarget().getOwnerDocument();
var note = SVGDoc.getElementById("note");
var style = note.getStyle();

style.setProperty("visibility", "visible");
}
]]></script>

<g id="package" onclick="show_note(evt)">
包模板代码，此处省略
</g>
<g id="note" x="100" y="100" style="visibility:hidden" desc="note info">
注解代码，此处省略
</g>




在上面这段代码中，包含两个分组对象，一个是待注解的对象，另外一个是注解本身。前面的一段JavaScript代码的功能是处理待注解对象的点击事件，显示注解对象。注解对象可以选择点击注解对象本身或再次点击待注解对象进行关闭，代码与此段JavaScript代码相似。

另外，还可以在待注解对象与注解对象之间建立一条虚线，表示两者之间有关系。

<path d="M5,5 C5,45 45,45 45,5" style="stroke:red; fill:none; stroke-linecap:but; stroke-dash
array:5,3,2"/>




其中路径中的M表示Moveto（移动到），C表示Curve（贝赛尔曲线控制）。虚线也可跟随注解对象同时显示或消隐。

* 以Highlight + Slide方式讲解UML图
有时我们需要给别人讲解UML图，那么除了具备上面的注解功能之外，还需拥有高亮以及幻灯显示等功能，SVG可以轻松地做到这一点。

<script><![CDATA[
function highlight(evt) {
var object = evt.getTarget();
var style = object.getStyle();

style.setProperty("fill", "red");
}
function restore(evt) {
var object = evt.getTarget();
var style = object.getStyle();

style.setProperty("fill", "#ffffff");
}
]]></script>
<rect x="14" y="14" width="90" height="21" style="fill:#ffffff;stroke:#ffffff;stroke-width:1"
onmouseover=" highlight(evt) " onmouseout="restore(evt)"/>
</rect>




也可以这样：

<rect x="14" y="14" width="90" height="21" style="fill:#ffffff;stroke:#ffffff;stroke-wid
th:1" />
<set attributeName="fill" from="#ffffff " to="red" begin=" mouseover" end=" mouseout"/>
</rect>




幻灯片都是以Slide方式一页一页进行演示的，我们如果要讲解一个软件系统，或者说交付系统设计方案，也可以直接使用SVG来完成。在SVG中，结合<a>标签或<set>标签，和xlink:href 属性一起可以建立一个链接，这个功能使得Slide方式得以实施。结合JavaScript函数setTimeout可实现自动Slide Show。

<svg>
<a xlink:href="http://…/slide_1.svg"/>
…
</a>
</svg>




或

<g id="object">
…
</g>
<set id="object" xlink:href="http://…/slide_1.svg"/>




* 分层与图分解
现在的系统越来越复杂，直接导致UML图也变得越来越复杂，在一张纸上绘制整个图已经是无能为力了。UML中提供了包的概念来解决这个问题，在SVG中则可以使用分层以及图分解来显示我们感兴趣的部分。属性childNodes、firstChild等可以访问分组节点的子节点，借助于它们可以完成图层管理功能。

我们可以在XHTML页面中加入一些Checkbox，用于显示/隐藏非兴趣区域，也可实现SVG自己的Checkbox来完成这项工作，下面就是相关代码：

<script><![CDATA[
var kclick = false;
function check(evt) {
var SVGDoc = evt.getTarget().getOwnerDocument();
var check_off = SVGDoc.getElementById("check_off");
var check_on = SVGDoc.getElementById("check_on");
var off_style = check_off.getStyle();
var on_style = check_on.getStyle();

if (kclick)
{
off_style.setProperty("visibility", "visible");
  on_style.setProperty("visibility", "hidden");
}
else
{
off_style.setProperty("visibility", "hidden");
on_style.setProperty("visibility", "visible");
}
kclick = !kclick;
}
]]></script>

<g id="check_off" onclick="check(evt)">
<rect width="10" height="10" stroke-width="1" stroke="rgb(100,100,100)" fill="white"/>
</g>
<g id="check_on" visibility="hidden" onclick="check(evt)">
<rect width="10" height="10" stroke-width="1" stroke="rgb(100,100,100)" fill="white"/>
<line x1="1" y1="1" x2="9" y2="9" stroke="black"/>
<line x1="1" y1="9" x2="9" y2="1" stroke="black"/>
</g>
<text x="20" y="10">Check Box 1</text>




要显示/消隐其它的组也可以直接放在check函数中if语句范围内来实现。

点击UML中的包或其它需要详细描述的单元，显示其中的内容，就能实现将大图分解为小图的功能。这部分代码与上面Slide Show的代码如出一辙，改动很少，在这里就不再赘述了。

* 后台实时更新
元数据在UML图中扮演着重要的角色，元数据经常会发生变动。实时地将更新的元数据信息发布在网上，是必要的活动。在C/S体系结构下，装有SVG Viewer的客户端要完成SVG文件实时更新，需要得到后端服务器中存储的数据。如果使用Adobe SVG Viewer和Batik的话，就能借助SVG标准之外的扩展函数getURL得到服务器中的数据。

function go() {
getURL('/2004/2/data.1',fn)；
}
function fn(obj) {
alert(obj.content)；
setTimeout('go()',5000)；
}




当然了，后端服务器中数据源也可以是数据库。SVG API提供了克隆或生成新元素插入现有DOM的方法，我们可以编写Java程序访问服务器中的数据库，将元信息取出，生成新的SVG文件，或在现有SVG DOM中进行修改，反映出元信息的变化。下面的代码是生成SVG文件的一个框架。

import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document doc = impl.createDocument(svgNS, "svg", null);

// 得到SVG根元素
Element svgRoot = doc.getDocumentElement();

// 设置根元素的width和height属性值
svgRoot.setAttributeNS(null, "width", "400");
svgRoot.setAttributeNS(null, "height", "450");

// 访问数据库中的元信息，结合底层UML模板元件，生成新的SVG元素
……

// 把新元素连接在SVG根元素上
svgRoot.appendChild(…);




其中，访问数据库部分内容被省略掉，在这里，关键是要结合UML模板元件，这样就可快速准确地生成新的SVG组元素。

SVG还支持一些其它的功能，例如滤镜、声音等，也可以用来描述UML图，在这里就不再多说了，有兴趣的读者可以翻阅相关书籍，这里仅仅是提出一些想法，实现时还需要不厌其烦地关注一些细节信息。

五、相关工具
现有的UML建模工具中，已有许多可以直接输出SVG格式，如Visio 2003就可以输出SVG文件。另外，Adobe的Illustrator9中也内嵌了SVG输出功能，Corel Draw9提供输出SVG文件的插件，这些工具本身并不是UML建模工具，只是通用矢量绘图工具，使用它们进行UML建模，会比较吃力一些。而且，这些工具不能对复杂的交互功能建模，因此可作为基本绘制工具来使用。

常见的SVG浏览工具有Adobe、CSIRO和Corel的SVG Viewer，Bitstream Viewer，它们都是浏览器的插件。IBM也用Java语言制作了一个浏览SVG文件的工具SVG View。除了IE以后，Amaya和Mozilla浏览器都内嵌支持SVG。

下表是常见的可以导出SVG格式的UML建模工具以及可用于UML建模的SVG编辑工具。

软件名称 功能
ArgoUML 一种基于Java的开源UML OO建模工具，Argo是古希腊英雄Jason的战船。ArgoUML支持软件设计者的认知需求，广泛地支持开放标准，如UML、XMI、SVG、OCL等。
Batik 1.1 SVG Toolkit Apache Batik工具包提供JAVA组件创建（SVGGraphics2D）、浏览（JSVGCanvas）和转换（Transcoder）SVG。
CatWalk SchemaSoft的软件工具，用于快速实时创建SVG Web应用。在向网站请求数据时，每次都会重新发布数据变化。可以用来实时更新UML图。
Dia 一种基于GTK+的制图工具，很像Visio。有一些特殊对象可以帮助绘制实体关系图、UML图、流程图、网络图，等等，可以将图以EPS和SVG格式输出。
DoME（Domain Modelling Environment） 一种元case系统，用于构建面向对象软件模型（CY OOA和UML），有自已的后端图形语言。
Gill 即Gnome Illustration app，是基于Gnome的一种通用矢量绘图工具，本身并没有对UML提供过多的支持，最终会支持所有的SVG特性。
Gmodeler 一个免费在线UML绘图和文档工具，使用FlashMX开发，并不支持输出SVG格式，但可作为SVG UML建模软件的原型参考。
Graphviz ATT出版的开源绘图软件，有Linux和Windows版本，包括一个名为Webdot的web服务接口。
JSeq 可以自动创建UML序列图的工具，可输出格式Zargo和SVG。可独立使用或与JUnit一起使用。
MagicDraw UML 非常强大的建模工具，基于JAVA开发，可以输出SVG格式文件。
OptimalJ 用于NetBeans的一种UML类图编辑器，使用Batik输出SVG。
Poseidon for UML 基于ArgoUML，与其界面基本相同，完全由Java实现，非开源的UML建模工具。与ArgoUML相比，功能要更丰富，更稳定。
SVG Maker 一个独立的软件组件，可以作为系统的一部分进行布署。
SVG Slide Toolkit 它可以把XML文件转化为SVG幻灯格式，不过用起来似乎有些慢。
Together Control Center 5.5 经常使用的一种集成化开发平台，使用Batik输出SVG格式的UML图。
Visual Paradigm for UML Community Edition 支持所有UML图，可作为图形输出SVG、JPG和PNG等格式，执行复杂图的打印。支持从事件流生成序列图，从序列图生成组合图的功能。
WebDraw JASC，也就是开发Paint Shop Pro的那家公司，提供的一个商业SVG可视编辑器。

表一 支持SVG格式的UML建模工具及可制作UML的SVG编辑工具

六、结论
今天，绝大多数Web图像仍然采用JPG、GIF或PNG等位图文件格式，尽管应用了各种压缩算法，文件尺寸还是不能大大降低。加之缺乏足够的多媒体信息和交互手段，为进一步应用造成了障碍。基于矢量的图形，如SVG、Flash、VML等可以很好的解决Web图形文件尺寸较大的问题。在这个领域中 Flash文件已经得到了较好的应用，VML逐渐被SVG和Flash所淘汰，竞争的焦点集中在SVG和Flash上。未经压缩的SVG文件尺寸较大，同样的图形使用SWF格式存储要小很多。经过节压缩的SVGZ格式与SWF格式尺寸相近，大小仅相差5%-10%左右。SVGZ可以直接由浏览器来浏览。因为W3C的大力推广，SVG/SVGZ还是具有相当竞争力的。

利用SVG在线发布UML图，并不是一项全新的应用，现有的一些大型建模软件都提供了输出SVG文件的功能，但是这些系统却过于庞大，不利于快速敏捷地进行建模。因此，现有的敏捷建模方法甚至推荐仅使用纸笔来绘制一些不太正式的UML图，事实上，这种方法在实际使用过程中常常也会获得一定程度地成功。但这种方法绘制出的UML图并不总是能够正确地捕捉，而且代码更新所带来的变化也不能持续地反映出来。由此可以看出，这些方法都有不足之处，最好是利用轻量级UML建模工具敏捷快速地建模，然后存储为SVG格式，直接将其在网络上发布。当然了，基于SVG的建模工具是应当能够比较充分地支持SVG标准，除了支持基本的绘图功能之外，还要支持SVG图形的交互功能和动画特性，这一点很多通用建模工具是不可能完成的。另外，一些开源项目也在研究基于SVG的组件库。整体上来说，SVG的功能绝不仅仅限于绘制各种各样的UML图，但是，SVG的流行肯定与UML图形是分不开的，如果可以更好地对UML图进行支持，例如开发基于SVG格式的UML组件库，构建基于SVG格式的UML建模工具，那么SVG格式或许也能因此而更加流行。在这一领域，还有许多工作需要完成。

参考资料

ArgoUML，一个可视化的开源建模工具。
Christian Nentwich et al. BOX: Browsing objects in XML, Softw. Pract. Exper. 2000; 30:1661-1676.
Ferraiolo J et al. Scalable vector graphics. Working Draft, http://www.w3.org/TR/1999/ - WD-SVG-1999 1203, World Wide Web Consortium, December 1999.
Keith Bugg, SVG & Smart Maps, Dr. Dobb's Journal, March 2003.
Object by Design的一篇介绍用SVG创建模型图的文章，Graphics Model Rendered in SVG。
Svg.org，OpenWiki中的 Svg Articles。
W3C Working Draft，Scalable Vector Graphics(SVG) 1.2。
请阅读 Dave Carlson 的书籍 Modeling XML Applications with UML: Practical e-Business Applications。
阅读往期关于SVG的文章：

developerWorks中的 SVG专题，里面有教程和文章，可以帮助快速入门。
Benoit Marchal撰写的 developerworks "技巧：用SVG自动创建JPEG" （2003年11月），从中可以了解到使用SVG批量创建JPEG图形的方法。
Nicholas Chase 撰写的 developerWorks 教程 "伸缩向量图形介绍"（2002 年 2 月），从中可以了解到SVG技术的优点和缺点。
在 developerWorks XML 专区中寻找更多用于 XML 开发人员的参考资料。

关于作者
车皓阳，中科院软件所博士研究生。关注于电信网管理、信任管理等领域，对Linux以及开源系统很感兴趣。您可以通过 [e-mail] 与其联系，欢迎讨论相关问题。
张治，上海交通大学图像处理与模式识别研究所博士研究生。关注于数据集成、模式匹配、复杂性理论等领域。您可以通过 [e-mail] 与其联系，欢迎讨论相关问题。