一、SVG 可縮放矢量圖形（SVG）是W3C的推薦標準，它使用XML描述兩維圖形結構和圖形應用，可以在Web瀏覽器、手持設備或移動電話等多種上顯示。目前穩(wěn)定版本為1.1版，最新的版本是以草案形式存在的1.2版，并未最終定稿。 在SVG中，允許三種圖像對象存在，分別是矢量圖像、點陣圖像和文本。SVG定義了六種常用的基本矢量形狀，包括直線、圓形、橢圓形、矩形、多邊形和折線，在此基礎上，利用坐標變換、路徑、動畫、濾鏡圖案等功能擴展，通過多層次組合矢量、點陣以及文本圖，并配以各種屬性，進行矢量繪圖。 經(jīng)過一段時期的發(fā)展，SVG的業(yè)務領域慢慢也已拓展開來，涵蓋Web圖表、地圖、框圖、流程圖、項目計劃圖等多種類別。構建各個領域中的基本元件庫也成為迫切需求，一些開源項目正以此為目標，提供可重用、基于SVG的元件庫。UML圖可以明確地按照種類劃分，針對不同的種類，提出基本組件，再結合SVG固有的功能，就可以很容易地使用SVG創(chuàng)建出多種UML應用。 SVG的語法非常簡單，設計人員一般在一天之內(nèi)就會熟悉，IBM Developerworks中也有SVG的專題討論，這里也就不再贅述了。 二、UML圖 UML是目前最常用的一種面向?qū)ο蠼ＵZ言，主要包括七種常見的類型，即用例圖、類圖、序列圖、狀態(tài)圖、活動圖、組件圖和部署圖，分別用以不同的建模用途。 類圖，類圖可以將一組類、界面、合作以及上述元素之間的關系顯示出來，通常分為邏輯類和實現(xiàn)類。 組件圖，以可視化方式提供系統(tǒng)的物理視圖，顯示系統(tǒng)中組件的依賴關系。 部署圖，顯示系統(tǒng)如何物理部署到硬件環(huán)境之中，是節(jié)點和連線的集合。上面三種UML圖都是對系統(tǒng)靜態(tài)特征進行建模，下面的四種描述系統(tǒng)動態(tài)特征。 用例圖，描述系統(tǒng)的功能單元，它以圖形化的方式表示系統(tǒng)內(nèi)部的用例，系統(tǒng)外部的參考者，以及它們之間的交互。 序列圖，強調(diào)時間順序，顯示特定用例的詳細流程。順序圖有兩維：垂直方向是以時間順序顯示消息/調(diào)用序列，水平方向顯示消息發(fā)送到的對象實例。 狀態(tài)圖，描述系統(tǒng)動態(tài)特征，包括狀態(tài)、轉(zhuǎn)換、事件以及活動等。 活動圖，描述系統(tǒng)在處理某項活動時，兩個或多個對象之間的過活動流程。 UML中還包含其它一些圖，例如對象圖、包圖、組合圖等，以及演化出的一些新的概念，如模板(Stereotypes)、職責 (Responsibilities)、擴展機制(Extensibility mechanisms)、線程(Threads)、過程(Processes)、分布 式(Distribution)、并發(fā)(Concurrency)、模式(Patterns)等，是否使用要依據(jù)建模過程中系統(tǒng)的層次、分類和大小等具體情況而定。誠然，對于個體來說，我們并不會用到所有的符號，但一個完整的UML建模工具卻是要盡可能詳盡地考慮到UML中豐富的符號語法和語義信息。在這里，我們無法描述清楚使用SVG繪制每種UML符號的方法，我們要關注的是UML基本符號元件的劃分以及使用SVG繪制UML圖的一些常用方法和便利之處。 三、UML基本元件 上面是按照功能對UML圖形進行的分類，繪制UML圖形時，我們的視圖并不是功能視圖，而是功能視圖之上的元件視圖。類圖和用例圖在功能上是不同的，但從SVG的角度看，它們都由方框、線條以及文字組成。不同類型的UML圖都會有專屬的繪圖元件。在抽象級別較高的情況下（方框、線條、文字的抽象級別最高），同屬一類UML圖形的元件集合就會非常小；抽象級別越低，集合就會越大。但是太低層次的抽象卻是無意義的（最低的情況是每個UML圖都可看成一個元件，這是最具體的），關鍵是如何找到一個折衷點，既能保證有著元件集較小，又能方便繪圖。SVG提供的基本繪圖功能本來也是可以進行UML繪圖的，但是這樣做效率會比較低。建立起基本的UML圖形元件庫，會大大提高繪圖質(zhì)量和速度?，F(xiàn)有的UML建模工具中，都有比較清晰的UML建模元件分類。我們這里以Visio Professional 2002為例，看一下UML模型圖的元件分類情況。 在Visio的軟件模具里，包括數(shù)據(jù)流模型圖、程序結構圖、ROOM、Jackson圖和UML模型圖等。Visio中UML圖的功能分類比上述常用分類要多出兩項，包圖和靜態(tài)結構圖。包圖是表達系統(tǒng)架構的有效機制，它可以用來將系統(tǒng)劃分為較小的、易于管理的子集，它可以由任何一種UML圖組成。靜態(tài)結構圖包括概念圖和類圖，概念圖代表現(xiàn)實世界中的概念以及概念之間的關系，它側(cè)重于關系和屬性，而不是方法。 圖一是Visio按照功能分類方法劃分的UML圖的基本元件?？梢钥闯?#xff0c;這種分類方法是有很多重疊的，例如，包在用例圖等四種UML圖中都被看成基本元件。但這樣做，在分類清晰的基礎上，可以提高用戶訪問模板元件的速度；忽視UML功能分類，完全訪問集合要包含一百個左右的成員，訪問元件的效率可能會較低。 或者，我們也可以結合這種按照功能進行分類的方法，根據(jù)視覺特征將UML基本元件分組，然后在每種視覺特征分組下，再按照功能進行分組。使用SVG繪制UML圖形，這有可能會是一種較好的分類復用的方法。這樣我們不僅可以保證用戶快速地訪問到UML元件，而且在基于SVG的建模工具內(nèi)部也易于管理。例如，我們可以進行這樣的分類： 人形元件，表示用例圖中的主角； 橢圓形元件，也即用例圖中的用例； 折角元件，包括注釋和約束； 包元件（包括包和子系統(tǒng)）、節(jié)點元件（立方體形狀）和組件元件； 抽屜類矩形元件，這一組元件有許多變體，不同之處在于頂端標注缺省文字間以及格層數(shù)會有差異，包含長式和短式兩種格式； 圓形元件，包括"初始狀態(tài)"、"最終狀態(tài)"、"詳細歷史"及"簡略歷史"； 圓角矩形類元件和菱形元件； 帶有各類箭頭的直線類，包括實線、虛線； 帶有各類箭頭的曲線類，包括實曲線和虛曲線； 其它一些少數(shù)特殊形狀元件； 圖一 Visio中的UML圖形元件 初看起來，可能會覺得這種分類有些雜亂，但這樣的分類卻是從SVG角度出發(fā)對UML圖元做出的分類，適合SVG建模軟件底層存儲。例如，包元件的SVG模板代碼如下： 圖二 SVG繪制的包模板元件 上面這些語句，可以作為包模板元件的SVG源碼進行存儲，這時尺寸相關的屬性值設置僅表示比例關系。使用模板元件時，各部分尺寸依據(jù)存儲時的缺省值按照比例進行放大或縮小，其余屬性值則不涉及運算，直接把新值替代缺省值即可。未出現(xiàn)的模板中的屬性在使用過程中可以自行加入。 四、使用SVG繪制UML圖的一些技術 SVG是一種基于XML、數(shù)據(jù)驅(qū)動的網(wǎng)絡繪圖標準?？梢越Y合XHTML作為一個文件單獨使用，例如： <?xml version="1.0" encoding="iso-8859-1"?>... 也可以嵌套在網(wǎng)頁中使用，如下： 一般說來，在繪制UML圖的時候，主體很少會用中文進行描述，但在注釋中就難免需要使用中文。SVG目前還不支持中文編碼，在遇到中文字符的時候，需要使用UTF-8編碼，這樣就可以有效避免不同的語言環(huán)境下的字符編碼問題。下面就繪制UML圖的過程中，SVG技術帶來的一些好處進行探討。 * 動態(tài)顯示注解信息 對UML圖進行注解是有必要的。我們可以在UML圖下面寫上整段整段的注解，但這樣做似乎針對性不強，不容易把事物講清楚。現(xiàn)在好的方法是把事物按照組成部分細分，并針對性地進行說明。就如通用軟件的工具提示一樣，我們也可以利用SVG在UML圖上實現(xiàn)近似功能。 SVG把圖元看作一個個對象，并且提供DOM接口可直接訪問對象及其屬性，SVG亦提供了事件響應函數(shù)可獲取界面、鼠標以及一些自定義的事件消息。有了這些支持，再加上SVG的對象分組功能（分組標簽）以及JavaScipt或Java綁定，就可以順利地完成動態(tài)顯示注解信息的功能。 以前面的包代碼為例，來看一下如何利用JavaScipt動態(tài)顯示注解信息。 包模板代碼，此處省略 注解代碼，此處省略 在上面這段代碼中，包含兩個分組對象，一個是待注解的對象，另外一個是注解本身。前面的一段JavaScript代碼的功能是處理待注解對象的點擊事件，顯示注解對象。注解對象可以選擇點擊注解對象本身或再次點擊待注解對象進行關閉，代碼與此段JavaScript代碼相似。 另外，還可以在待注解對象與注解對象之間建立一條虛線，表示兩者之間有關系。 其中路徑中的M表示Moveto（移動到），C表示Curve（貝賽爾曲線控制）。虛線也可跟隨注解對象同時顯示或消隱。 * 以Highlight + Slide方式講解UML圖 有時我們需要給別人講解UML圖，那么除了具備上面的注解功能之外，還需擁有高亮以及幻燈顯示等功能，SVG可以輕松地做到這一點。 也可以這樣： 幻燈片都是以Slide方式一頁一頁進行演示的，我們?nèi)绻v解一個軟件系統(tǒng)，或者說交付系統(tǒng)設計方案，也可以直接使用SVG來完成。在SVG中，結合標簽或標簽，和xlink:href 屬性一起可以建立一個鏈接，這個功能使得Slide方式得以實施。結合JavaScript函數(shù)setTimeout可實現(xiàn)自動Slide Show。 … 或 … * 分層與圖分解 現(xiàn)在的系統(tǒng)越來越復雜，直接導致UML圖也變得越來越復雜，在一張紙上繪制整個圖已經(jīng)是無能為力了。UML中提供了包的概念來解決這個問題，在SVG中則可以使用分層以及圖分解來顯示我們感興趣的部分。屬性childNodes、firstChild等可以訪問分組節(jié)點的子節(jié)點，借助于它們可以完成圖層管理功能。 我們可以在XHTML頁面中加入一些Checkbox，用于顯示/隱藏非興趣區(qū)域，也可實現(xiàn)SVG自己的Checkbox來完成這項工作，下面就是相關代碼： Check Box 1 要顯示/消隱其它的組也可以直接放在check函數(shù)中if語句范圍內(nèi)來實現(xiàn)。 點擊UML中的包或其它需要詳細描述的單元，顯示其中的內(nèi)容，就能實現(xiàn)將大圖分解為小圖的功能。這部分代碼與上面Slide Show的代碼如出一轍，改動很少，在這里就不再贅述了。 * 后臺實時更新 元數(shù)據(jù)在UML圖中扮演著重要的角色，元數(shù)據(jù)經(jīng)常會發(fā)生變動。實時地將更新的元數(shù)據(jù)信息發(fā)布在網(wǎng)上，是必要的活動。在C/S體系結構下，裝有SVG Viewer的客戶端要完成SVG文件實時更新，需要得到后端服務器中存儲的數(shù)據(jù)。如果使用Adobe SVG Viewer和Batik的話，就能借助SVG標準之外的擴展函數(shù)getURL得到服務器中的數(shù)據(jù)。 function go() { getURL('/2004/2/data.1',fn)； } function fn(obj) { alert(obj.content)； setTimeout('go()',5000)； } 當然了，后端服務器中數(shù)據(jù)源也可以是數(shù)據(jù)庫。SVG API提供了克隆或生成新元素插入現(xiàn)有DOM的方法，我們可以編寫Java程序訪問服務器中的數(shù)據(jù)庫，將元信息取出，生成新的SVG文件，或在現(xiàn)有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"); // 訪問數(shù)據(jù)庫中的元信息，結合底層UML模板元件，生成新的SVG元素 …… // 把新元素連接在SVG根元素上 svgRoot.appendChild(…); 其中，訪問數(shù)據(jù)庫部分內(nèi)容被省略掉，在這里，關鍵是要結合UML模板元件，這樣就可快速準確地生成新的SVG組元素。 SVG還支持一些其它的功能，例如濾鏡、聲音等，也可以用來描述UML圖，在這里就不再多說了，有興趣的讀者可以翻閱相關書籍，這里僅僅是提出一些想法，實現(xiàn)時還需要不厭其煩地關注一些細節(jié)信息。 五、相關工具 現(xiàn)有的UML建模工具中，已有許多可以直接輸出SVG格式，如Visio 2003就可以輸出SVG文件。另外，Adobe的Illustrator9中也內(nèi)嵌了SVG輸出功能，Corel Draw9提供輸出SVG文件的插件，這些工具本身并不是UML建模工具，只是通用矢量繪圖工具，使用它們進行UML建模，會比較吃力一些。而且，這些工具不能對復雜的交互功能建模，因此可作為基本繪制工具來使用。 常見的SVG瀏覽工具有Adobe、CSIRO和Corel的SVG Viewer，Bitstream Viewer，它們都是瀏覽器的插件。IBM也用Java語言制作了一個瀏覽SVG文件的工具SVG View。除了IE以后，Amaya和Mozilla瀏覽器都內(nèi)嵌支持SVG。 下表是常見的可以導出SVG格式的UML建模工具以及可用于UML建模的SVG編輯工具。 軟件名稱 功能 ArgoUML 一種基于Java的開源UML OO建模工具，Argo是古希臘英雄Jason的戰(zhàn)船。ArgoUML支持軟件設計者的認知需求，廣泛地支持開放標準，如UML、XMI、SVG、OCL等。 Batik 1.1 SVG Toolkit Apache Batik工具包提供JAVA組件創(chuàng)建（SVGGraphics2D）、瀏覽（JSVGCanvas）和轉(zhuǎn)換（Transcoder）SVG。 CatWalk SchemaSoft的軟件工具，用于快速實時創(chuàng)建SVG Web應用。在向網(wǎng)站請求數(shù)據(jù)時，每次都會重新發(fā)布數(shù)據(jù)變化?？梢杂脕韺崟r更新UML圖。 Dia 一種基于GTK+的制圖工具，很像Visio。有一些特殊對象可以幫助繪制實體關系圖、UML圖、流程圖、網(wǎng)絡圖，等等，可以將圖以EPS和SVG格式輸出。 DoME（Domain Modelling Environment） 一種元case系統(tǒng)，用于構建面向?qū)ο筌浖Ｐ?#xff08;CY OOA和UML），有自已的后端圖形語言。 Gill 即Gnome Illustration app，是基于Gnome的一種通用矢量繪圖工具，本身并沒有對UML提供過多的支持，最終會支持所有的SVG特性。 Gmodeler 一個免費在線UML繪圖和文檔工具，使用FlashMX開發(fā)，并不支持輸出SVG格式，但可作為SVG UML建模軟件的原型參考。 Graphviz ATT出版的開源繪圖軟件，有Linux和Windows版本，包括一個名為Webdot的web服務接口。 JSeq 可以自動創(chuàng)建UML序列圖的工具，可輸出格式Zargo和SVG。可獨立使用或與JUnit一起使用。 MagicDraw UML 非常強大的建模工具，基于JAVA開發(fā)，可以輸出SVG格式文件。 OptimalJ 用于NetBeans的一種UML類圖編輯器，使用Batik輸出SVG。 Poseidon for UML 基于ArgoUML，與其界面基本相同，完全由Java實現(xiàn)，非開源的UML建模工具。與ArgoUML相比，功能要更豐富，更穩(wěn)定。 SVG Maker 一個獨立的軟件組件，可以作為系統(tǒng)的一部分進行布署。 SVG Slide Toolkit 它可以把XML文件轉(zhuǎn)化為SVG幻燈格式，不過用起來似乎有些慢。 Together Control Center 5.5 經(jīng)常使用的一種集成化開發(fā)平臺，使用Batik輸出SVG格式的UML圖。 Visual Paradigm for UML Community Edition 支持所有UML圖，可作為圖形輸出SVG、JPG和PNG等格式，執(zhí)行復雜圖的打印。支持從事件流生成序列圖，從序列圖生成組合圖的功能。 asp?">WebDraw JASC，也就是開發(fā)Paint Shop Pro的那家公司，提供的一個商業(yè)SVG可視編輯器。 表一 支持SVG格式的UML建模工具及可制作UML的SVG編輯工具 六、結論 今天，絕大多數(shù)Web圖像仍然采用JPG、GIF或PNG等位圖文件格式，盡管應用了各種壓縮算法，文件尺寸還是不能大大降低。加之缺乏足夠的多媒體信息和交互手段，為進一步應用造成了障礙?；谑噶康膱D形，如SVG、Flash、VML等可以很好的解決Web圖形文件尺寸較大的問題。在這個領域中Flash文件已經(jīng)得到了較好的應用，VML逐漸被SVG和Flash所淘汰，競爭的焦點集中在SVG和Flash上。未經(jīng)壓縮的SVG文件尺寸較大，同樣的圖形使用SWF格式存儲要小很多。經(jīng)過節(jié)壓縮的SVGZ格式與SWF格式尺寸相近，大小僅相差5%-10%左右。SVGZ可以直接由瀏覽器來瀏覽。因為W3C的大力推廣，SVG/SVGZ還是具有相當競爭力的。 利用SVG在線發(fā)布UML圖，并不是一項全新的應用，現(xiàn)有的一些大型建模軟件都提供了輸出SVG文件的功能，但是這些系統(tǒng)卻過于龐大，不利于快速敏捷地進行建模。因此，現(xiàn)有的敏捷建模方法甚至推薦僅使用紙筆來繪制一些不太正式的UML圖，事實上，這種方法在實際使用過程中常常也會獲得一定程度地成功。但這種方法繪制出的UML圖并不總是能夠正確地捕捉，而且代碼更新所帶來的變化也不能持續(xù)地反映出來。由此可以看出，這些方法都有不足之處，最好是利用輕量級UML建模工具敏捷快速地建模，然后存儲為SVG格式，直接將其在網(wǎng)絡上發(fā)布。當然了，基于SVG的建模工具是應當能夠比較充分地支持SVG標準，除了支持基本的繪圖功能之外，還要支持SVG圖形的交互功能和動畫特性，這一點很多通用建模工具是不可能完成的。另外，一些開源項目也在研究基于SVG的組件庫。整體上來說，SVG的功能絕不僅僅限于繪制各種各樣的UML圖，但是，SVG的流行肯定與UML圖形是分不開的，如果可以更好地對UML圖進行支持，例如開發(fā)基于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, [url]http://www.w3.org/TR/1999/[/url] - 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創(chuàng)建模型圖的文章，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自動創(chuàng)建JPEG" （2003年11月），從中可以了解到使用SVG批量創(chuàng)建JPEG圖形的方法。 Nicholas Chase 撰寫的 developerWorks 教程 "伸縮向量圖形介紹"（2002 年 2 月），從中可以了解到SVG技術的優(yōu)點和缺點。 ?

轉(zhuǎn)載于:https://blog.51cto.com/smilecong/100093

總結

以上是生活随笔為你收集整理的SVG与UML图详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。