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圖形元件庫，會大大提高繪圖質量和速度�，F有的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、數據驅動的網絡繪圖標準�？梢越Y合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圖下面寫上整段整段的注解，但這樣做似乎針對性不強，不容易把事物講清楚�，F在好的方法是把事物按照組成部分細分，并針對性地進行說明。就如通用軟件的工具提示一樣，我們也可以利用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格式或許也能因此而更加流行。在這一領域，還有許多工作需要完成。

參考資料

• 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中的 asp?SvgArticles">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以及開源系統很感興趣。您可以通過grandiose11@msn.com 與其聯系，歡迎討論相關問題。

張治，上海交通大學圖像處理與模式識別研究所博士研究生。關注于數據集成、模式匹配、復雜性理論等領域。您可以通過 uphenix@hotmail.com 與其聯系，歡迎討論相關問題。