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

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

總結(jié)

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

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