SVG与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模板代码如下：

<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编辑工具。

表一 支持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格式或许也能因此而更加流行。在这一领域，还有许多工作需要完成。

查看本文来源