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

張瑩

1 引言

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

2 SVG技術(shù)簡(jiǎn)介

2.1 SVG概述

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

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

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

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

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

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

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

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

2.3 SVG編輯圖形

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

圖1 SVG編輯圖形流程

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

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

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

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

從圖2這種形式我們可以看到存在幾下幾個(gè)問(wèn)題：

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

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

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

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

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

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

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

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

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

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

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

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