基于ＳＶＧ《計算機網絡》知識可視化表示研究

2008-12-31 00:00:00劉長國

現代教育技術 2008年11期

【摘要】在信息技術與《計算機網絡》課程整合的過程中，往往需要把一些知識可視化出來，同時還要保證其交互性，尤其把課程整合到WEB環境下時，《計算機網絡》知識可視化表示存在許多的困難。文章介紹了SVG 技術，并提出了運用SVG技術實現WEB環境《計算機網絡》知識可視化表示的方法。

【關鍵詞】課程整合；知識可視化；SVG技術

【中圖分類號】 G420 【文獻標識碼】 A 【論文編號】1009-8097（2008）11-0125-03

一引言

知識的可視化就是讓知識變得更容易理解，通俗易懂。知識的可視化往往就用圖像和動畫的形式表現出來，傳統的圖像格式分為位圖圖像和矢量圖圖像。而動畫一般是FLASH矢量圖形動畫。使用位圖圖像往往比較大，不利于網絡的傳輸。雖然，FLASH也有強大的交互性，但它必須在特定的軟件插件支持下才能實現交互性。本文所提到的SVG技術可很好的解決位圖圖像和FLASH矢量圖形動畫這些不足之處。

二 SVG技術

1SVG概述

W3C推出的SVG是可升級矢量圖形（Scalable Vector Graphics）的簡稱。SVG是一種采用XML來描述二維圖形的語言，目前W3C推薦使用的版本是SVG 1.1（本文所說的SVG即指SVG 1.1）。SVG允許使用3種類型的圖形對象：矢量圖形形狀（例如由直線和曲線組成的線條形狀），圖像和文本。圖形對象可以被組化、樣式化、變形和重新組合，包括圖象嵌套、變形處理、剪輯路徑、Alpha蒙板、濾鏡特效和模板對象。[1]目前SVG已經得到很多瀏覽器的支持，如IE（添加Adobe提供的SVG Viewer插件）、Mozilla Firefox等。SVG 的文檔對象模型（Document Object Model）可以很容易地將圖像中出現的元素處理成一個個對象，這正是相對光柵格式圖像具有優勢的基礎。

SVG圖形可以是動態的、可交互性的。動畫通過直接聲明（比如在SVG里嵌入SVG動畫元素）或通過腳本來進行定義或觸發。

SVG不但可以表現圖像，還可以表現文字、音頻等其它信息，對于那些有視覺障礙的人，可以通過可替換的方法把圖像替換為音頻信息，這樣對那些有視覺障礙的人，也能夠得到SVG所表現的信息。另外，對那些手持設備、車載設備、無線設備來說，它們的屏幕一般都比較小，而且顯示分辨率低，SVG的矢量特性也可以讓這些設備清楚地瀏覽SVG圖像信息，這都是目前的位圖圖像所不能做到的。

2SVG、位圖圖像和FLASH矢量圖的比較

所有權指公司的專有格式權，網絡檢索難易指文件的內部結構對于搜索引擎是否可見。

由上表可看出SVG具有的特征：

（1）所有權方面，SVG是由W3C管理的一種開放標準，W3C是web技術的國際化標準組織。

（2）可縮放性，按字面意思就是指講內容放大的能力，可以幫助確保有視覺障礙的人，或者那些距離顯示器比平常更遠的人們，可以看到應當看到的所有內容。

（3）結構化圖像，SVG本身為結構化圖像，它包括了有關一幅圖像中每個組件的結構，這使得輔助技術更容易按照一種其用戶可以理解的方式復制圖像。SVG使用了文檔對象模型，即DOM是分析XML文件的方式，并由描述該知識實體的幾何數據和屬性數據之一，用它來定義每一個元素，可以在必要時能夠處理每個元素從而確保它和這幅圖像作為一個整體可以由用戶訪問 [1]。

（4）普通文本，因為SVG是純文本，所以任何SVG內容可以輸入為純文本格式，通過屏幕閱讀器閱讀，或者以其他使其更易于理解和創作的方式表示。

（5）可擴展樣式特性，SVG屬性不同于CSS中包括的其它屬性，它可以用來進一步提高有視覺障礙和使用輔助技術的人們的易訪問性。通過改變字體和濾鏡，設計人員可以方便的采用供視覺較差、色彩缺乏或需要輔助技術的人們使用內容[1]。

SVG提供了描述矢量的一種方式，同時能夠通過其他XML實例、腳本語言、CSS和DOM進行擴展，開發人員已經意識到了SVG解釋器可以添加到幾乎任何應用程序中，甚至像蜂窩電話和手持設備中使用的嵌入式軟件。

三可視化技術

1 可視化概述

可視化技術是指將抽象的事物或過程變成圖形、圖像的表示方法，為的是更有利于人們理解和記憶。“可視化”一詞，來源于英文的“visualization”，原意是“可看得見的、清楚的呈現”。知識可視化是指應用視覺表征手段來表現知識及相互之間的聯系，以促進群體知識的傳播和創新，其實質是將知識以圖解的手段表示出來，形成能夠直接作用于人的感官的知識外在表現形式，從而促進知識的傳播和創新。人類80%以上的信息是通過視覺獲得的，常言道“百聞不如一見”、“一圖勝過千言”就是這個意思。知識可視化是教育技術為達到教學效果最優化的利器之一，是教育技術的一個重要的研究領域。[2]目前，知識可視化工具有：概念圖（Concept Map）、思維導圖（Mind Map）、認知地圖（Cognitive Maps）、語義網絡（Semantic Networks）、知識地圖（Knowledge Map）等。[2]

2 SVG在知識可視化方面的優勢

（1）任意放縮，用戶可以自由的放縮圖像而不會破壞圖像的清晰度。

（2）文本獨立，SVG圖像中的文字獨立于圖像，可以編輯和查詢.同時，也不會再有字體的限制，用戶系統即使沒有安裝某一字體，同樣可以看到。

（3）較小文件尺寸，一般而言，SVG圖像要比其他網絡圖像格式如GIF，JPEG更小，下載更迅速。

（4）超強顯示效果，SVG圖像的清晰度適合任何屏幕分辨率或打印分辨率（dpi），無論是300dpi，600dpi甚至更高，都不會產生位圖圖像的馬賽克現象。

（5）超強交互性，由于SVG是基于XML的，因而能制作出空前強大的動態交互，SVG圖像能對用戶動作做出不同響應，例如高亮，聲效，特效，動畫等優點。

四運用SVG技術實現WEB環境《計算機網絡》知識可視化表示的方法及實例

1 SVG對象模型結構的設計

通過分析SVG文檔的結構，本文從Script操作SVG角度出發設計了SVG對象模型，如圖1所示。

Windows窗體對象是一個全局變量，該變量表示SVG運行時的瀏覽器窗口對象。因為腳本的運行就是在Windows對象內部進行的，所以調用該對象方法和屬性時可以省去對Windows變量的指定，例如Windows，Document可以直接通過Document實現引用。Document是靜態全局變量，通過該變量我們可以立即獲取當前瀏覽圖形的文檔對象（SVG Document）。[3]通過獲取文檔對象，我們就可以在DOM框架下對各種圖形元素進行動態操作。SVG文檔還可以嵌入HTML網頁中，通過HTML文檔對象獲得SVG文檔對象。

將SVG文檔嵌入網頁中可以用以下代碼實現：

＜embed width=”800” height=”600” type=”image/svg-xml”

id=”svgnetwork”src=”網絡.svg”＞

＜/embed＞

下面程序演示了如何利用腳本和DOM進行創建文本節點和向文本節點添加文本內容的過程：

var text = document.createElement (\"text\");//創造一個文本節點對象

text.setAttribute(\"x\"， 100);

text.setAttribute(\"y\"， 100);

text.appendChild(document.createTextNode(\"new text\"));//將文本內容添加到text節點對象中

2 基于SVG《計算機網絡》知識數據的組織

本文設計了基于SVG的《計算機網絡》知識數據組織結構圖。如圖2所示：

該結構圖將知識數據表達分為文字知識表達和圖像+動畫知識表達兩部分，并且這兩部分都是在圖層的基礎上實現的。點、線、面是組成圖像的基本幾何屬性。在SVG中，＜line.../＞是繪制線條的標簽，＜polyline .../＞是繪制折線的標簽。而＜circle .../＞是繪制正圓的標簽，＜ellipse .../＞是繪制橢圓的標簽，＜rect .../＞是繪制矩形的標簽。動畫是由＜animate.../＞或腳本+DOM來實現的。