基于SVG繪圖技術(shù)實現(xiàn)流程圖展示的研究

張瑩

1 引言

近年來，Internet技術(shù)有了較快的發(fā)展，尤其是分布式計算技術(shù)也得到了迅速發(fā)展，應(yīng)用領(lǐng)域日益廣泛。其于Web的繪圖技術(shù)通過借助第三方提供的一些工具實現(xiàn)了Web的繪圖功能，但生成的Web圖形不能實現(xiàn)有效交互，在理論上可視為死圖。SVG可縮放矢量圖形（Scalable Vector Graphics）可以實現(xiàn)與用戶的交互功能，具有較好的可讀性，是一種比較適用于描述二維矢量圖形的圖形格式。

2 SVG技術(shù)簡介

2.1 SVG概述

SVG標(biāo)準(zhǔn)是由W3C組織制定的一個開放標(biāo)準(zhǔn)，它非常容易實現(xiàn)Web發(fā)布，是一種全新的動畫和圖像格式。SVG具有以下優(yōu)點：

（1）操作簡單，可以通過色彩填充、對象運動等簡單的操作實現(xiàn)多媒體效果，可以通過一些計算機(jī)文本語言完成矢量圖像。

（2）具有較強(qiáng)的交互性，可以與很多先進(jìn)的網(wǎng)頁交互技術(shù)進(jìn)行兼容。用戶可以利用SVG中的一些元素，利用網(wǎng)頁中的腳本語言實現(xiàn)動作的交互，達(dá)到制作目的。SVG圖像可以通過腳本程序代碼與JavaScript或XML實現(xiàn)交互，SVG圖像可以由JavaScript、Perl、Java等程序語言動態(tài)生成，圖像可以根據(jù)數(shù)據(jù)庫的實際應(yīng)用而改變。

（3）SVG是一種文本描述格式，這就決定它具有屬性數(shù)據(jù)和動態(tài)數(shù)據(jù)的屬性，可以在查詢地理信息和相關(guān)聯(lián)對象方面應(yīng)用廣泛。SVG基于文本格式，因此它可以進(jìn)行二次修改，也可以說是一種可升級的圖像文件格式，這一特點被廣泛應(yīng)用在處理復(fù)雜數(shù)據(jù)方面，在維護(hù)數(shù)據(jù)時，表現(xiàn)出方便、靈活、容易維護(hù)等特點。此外，SVG圖像中的文字能夠在網(wǎng)絡(luò)中實現(xiàn)精確搜尋，能夠?qū)崿F(xiàn)用戶瀏覽器的查找和編輯。

（4）具有較強(qiáng)的渲染與濾鏡處理能力，電子地圖非常清晰。實踐證明，SVG圖像的清晰度對任何屏幕分辨率或打印分辨率都比較實用，打印效果非常好，打印效果能夠和屏幕顯示圖像色彩保持較好的一致性。SVG的矢量濾鏡功能也非常實用，操作簡便，只需要調(diào)整一些參數(shù)屬性就可以修改圖像效果。

（5）SVG在圖像處理方面有著獨特的優(yōu)勢，SVG符號庫填充功能非常強(qiáng)大，具有引入柵格圖像填充、定義矢量圖元進(jìn)行填充等功能，操作過程中，任何一個地圖符號都可以填充到相應(yīng)的位置。

2.2 SVG與其他圖形的區(qū)別

網(wǎng)絡(luò)上可以應(yīng)用的圖像格式有很多種，如：JPEG、GIF、PNG、PG、ML矢量標(biāo)記語言(VML)等。JPEG、PNG等由于是位圖格式，在應(yīng)用過程中存在一定缺陷，因為位圖的尺寸大，不利于傳輸，在改變圖像大小時會出現(xiàn)一些鋸齒狀的線條。而矢量圖的原理是基于數(shù)學(xué)公式的命令渲染來控制線條的粗細(xì)、顏色和圖形的，因此，它在很多方面有了改進(jìn)，它不但克服了位圖尺寸大的缺點，還可以按照任意比例進(jìn)行縮放。

2.3 SVG編輯圖形

SVG技術(shù)在處理圖形、圖像和文字方面具有強(qiáng)大的功能，它不但支持文本、交互性等常用的標(biāo)記，還能夠?qū)崿F(xiàn)圖形、圖像、動畫等的一些功能。SVG圖形文件編輯操作步驟為：首先要通過XML解析器打開SVG圖形文件，并相應(yīng)地生成一個對象樹；接著，用鼠標(biāo)點擊以驅(qū)動腳本執(zhí)行，腳本即可利用DOM接口對對象進(jìn)行一系列動作，實現(xiàn)圖形繪制、編輯等圖形編輯功能。如圖1所示。

圖1 SVG編輯圖形流程

3 SVG技術(shù)在油田產(chǎn)能項目運行管理系統(tǒng)中的應(yīng)用

3.1 產(chǎn)能項目中傳統(tǒng)流程圖的展示

以往的項目流程圖的展示是在Web圖形上實現(xiàn)的，這種實現(xiàn)方式有自身的缺陷，因為它要通過微軟的.NET、SUN的Java等一些工具才能實現(xiàn)圖形功能，實現(xiàn)的圖形也不能與用戶進(jìn)行有效交互。SVG可縮放矢量圖形與Web圖形功能相比較，具有很多優(yōu)點，它是采用文本來描述矢量化的圖形，這就決定了SVG圖像文件可以像網(wǎng)頁一樣方便瀏覽。通常項目的流程圖用電子表格的形式來實現(xiàn)，如圖2所示。

圖2 傳統(tǒng)流程圖的展示

從圖2這種形式我們可以看到存在幾下幾個問題：

（1）傳統(tǒng)項目中，流程圖的模式只有電子表格展示。存在拖拽困難，展示單一的問題，很大程度上影響了用戶對流程圖直觀的體驗。

（2）電子表格做成位圖圖像進(jìn)行展示的缺點是，圖形文件普遍較大，存儲時會占用大量的網(wǎng)絡(luò)帶寬，會拖慢整個程序的進(jìn)程。

（3）圖形很難在Interne上實現(xiàn)真正的數(shù)據(jù)交換功能，項目中很多功能無法實現(xiàn)。

（4）文本很難獨立，字體也常常受到限制。

（5）顯示效果較差，無法實現(xiàn)多種顏色的控制。

3.2 產(chǎn)能項目中使用SVG技術(shù)實現(xiàn)的流程圖展示

同以往流程圖繪制不同的是SVG技術(shù)的圖形功能比較強(qiáng)大，是一種動靜態(tài)結(jié)合的圖像技術(shù)，可以實現(xiàn)Internet上展示圖形、移動終端上的圖形繪制，可以支持動畫，模擬地理信息的實時動態(tài)，實現(xiàn)路徑跟蹤、洪峰監(jiān)視與預(yù)警等諸多功能。

下面針對傳統(tǒng)流程圖繪制存在的問題，我們應(yīng)用SVG技術(shù)實現(xiàn)了以下功能：

（1）任意放縮。用戶對圖像可以做拉伸、縮放等調(diào)整，調(diào)整過程不會對圖像的清晰度、細(xì)節(jié)等產(chǎn)生任何影響。

（2）文件小。SVG文件和GIF和JPEG等格式的文件相比較，占用空間小，方便下載和存儲。

（3）文本可任意編輯。SVG圖像中的文字是完全獨立的，可以對文字進(jìn)行編輯或搜尋。

(4)可以直接在HTML嵌入SVG代碼。SVG文件可通過以下標(biāo)簽嵌入HTML文檔：、