SVG網(wǎng)頁數(shù)字圖像標(biāo)準(zhǔn)的應(yīng)用

2010-05-09 06:00:08鄭晨楊驍

網(wǎng)絡(luò)安全技術(shù)與應(yīng)用 2010年1期

鄭晨楊驍

東南大學(xué) 江蘇 210096

0 前言

可伸縮矢量圖像（Scalable Vector Graphics，SVG）是萬維網(wǎng)聯(lián)盟W3C推出的基于可擴展標(biāo)記語言XML的圖形標(biāo)準(zhǔn)，具有使得網(wǎng)絡(luò)應(yīng)用小型化，快速化，更具互動性的特點。

1 數(shù)字圖像系統(tǒng)概述

在位圖中，一幅圖像是由一系列矩形像素陣列根據(jù)相對位置和不同的顏色賦予不同的數(shù)值。這些數(shù)值是根據(jù)三原色RGB矩陣得出。當(dāng)圖像精細(xì)，分辨率高時，所需要的數(shù)據(jù)量就會急速增大，甚至無法達(dá)到計算機存儲和處理的要求。很多時候都需要對所得的圖像進(jìn)行（如圖1所示）。

圖1 位圖與矢量圖對比

在矢量圖系統(tǒng)中，一幅圖像的描述是通過對一系列不同的基本幾何圖形的描述構(gòu)成的。與位圖的對相應(yīng)像素填充方法不同，矢量圖告知觀察器相應(yīng)的圖形應(yīng)該在哪些具體的坐標(biāo)被畫出來。

位圖主要用于數(shù)碼照相等系統(tǒng)中。傳感器陣列比較容易將得到的信號轉(zhuǎn)換成JPEG，PNG，GIF等位圖格式，在傳輸存儲中位圖的使用也較廣泛。因此在SVG出現(xiàn)之前，所有的瀏覽器也都只支持位圖格式。矢量圖無級縮放的特性使其在計算機輔助設(shè)計（CAD），高清制圖，F(xiàn)lash動畫中應(yīng)用較為理想。由于矢量圖大多以二進(jìn)制或比特流編碼封裝，瀏覽器或其他應(yīng)用程序難以提取出其中內(nèi)嵌的信息，服務(wù)器也不能利用外部數(shù)據(jù)動態(tài)創(chuàng)建矢量圖，因此矢量圖對其中的信息是嚴(yán)密封裝的，并沒有特別的程序可以來瀏覽或創(chuàng)建。

2 SVG簡要介紹

可伸縮矢量圖像是W3C在2000年發(fā)布的一種開放的標(biāo)準(zhǔn)文本式矢量圖形描述語言。使用SVG可以在網(wǎng)頁上顯示出各種各樣的高質(zhì)量的矢量圖形，包括許多圖像處理中常見的功能，如圖形、文字、動畫、顏色、濾鏡效果等。最關(guān)鍵的是SVG完全用普通文本來描述。也就是說，這是一種專門為網(wǎng)絡(luò)而設(shè)計的基于文本的圖像格式。并且SVG基于XML，可擴展性很強，能夠描述任意復(fù)雜的圖像。

SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。SVG圖形格式具有以下優(yōu)點：

（1）基于XML標(biāo)準(zhǔn)

XML是公認(rèn)的下一代網(wǎng)絡(luò)標(biāo)記語言，擁有無窮的生命力。SVG在最開始設(shè)計的時候就基于XML，這使得它具有一種先天的優(yōu)勢，并且同HTML、CSS、DOM、XSL、JavaScript、CGI一樣，成為新的標(biāo)準(zhǔn)。

（2）高質(zhì)量的圖像

由于基于矢量，使得SVG圖像的質(zhì)量得到大大的提高。放大、縮小以及各種特效都比位圖的表現(xiàn)要好，在打印的時候，完全可以以印刷質(zhì)量輸出圖片。SVG圖像在客戶端動態(tài)繪制，用戶可以隨意調(diào)整圖像的一些參數(shù)而不會導(dǎo)致圖像模糊。SVG圖像的大小只與圖形的復(fù)雜程度有關(guān)，而與圖形的具體尺寸無關(guān)。

（3）靈活易用的文件格式

SVG主要由三個部分組成：矢量圖形、位圖和文字。由于SVG文件是以文本的形式（XML）存放的，更改起來是非常方便。也就是說，可以不用任何圖像處理工具，僅僅用記事本就可以生成一個SVG圖像。在頁面運行的過程中，我們也可以對很多部分做修改。而其中的圖形描述又可以被任何人重復(fù)的使用。

（4）支持交互和動畫

SVG支持SMIL（synchronized multimedia integration language），使得用戶可以自由的同SVG中的元素完成一些交互的動作，從而完成既定的目標(biāo)，這一點在目前單獨依靠圖片是完成不了的，需要由網(wǎng)頁中的Script語句來實現(xiàn)。

（5）支持字符查找

在SVG中可以查找“圖片”中的字符，這在其它格式的圖片文件中則是不可思議的。

（6）支持Xlink和Xpointer

這意味著我們可以在SVG文檔之間制作超鏈接，這使我們可以制作出完全由SVG構(gòu)成的WEB站點。這個站點可以包含圖片、文本以及擁有與用戶進(jìn)行交互的能力。如果要瀏覽這樣的站點，你首先得要安裝一個SVG的閱讀器，推薦使用Adobe公司的Adobe SVG Viewer 2.0，但它只能用在Windows和Mac OS上。使用一個合適的Java虛擬，Apache的Batik viewer可以運行在任何平臺上。

SVG的歷史最早可以追溯到1998年4月，W3C聯(lián)盟先后收到了兩個關(guān)于新的圖形格式的提案，即Adobe、IBM、SUN等公司聯(lián)合制定的PGML（Precision Graphics Markup Language，精確圖形標(biāo)記語言）和微軟、Macromedia等公司提交的類似矢量圖形標(biāo)準(zhǔn)VML（Vector Markup Language，向量標(biāo)記語言）。雖然PGML和VML都是使用CSS的XML向量語言，但二者卻是相互競爭的對手。從功能上分析，他們的區(qū)別是PGML比較適合專業(yè)設(shè)計和出版，而VML適合普通的矢量圖形應(yīng)用。采用哪一個作為通用矢量圖形標(biāo)準(zhǔn)是一件十分困難的事情，為了更好地促進(jìn)XML向量圖形的發(fā)展，W3C決定在融合兩者優(yōu)點的基礎(chǔ)上，開發(fā)一種新的語言即SVG。W3C期望SVG這種基于開放標(biāo)準(zhǔn)的可擴展語言，能夠滿足Web開發(fā)者對動態(tài)、可縮放和平臺無關(guān)的Web內(nèi)容表現(xiàn)和交互手段日益增長的需求。

根據(jù)W3C官方網(wǎng)站的介紹，SVG第一個草案出臺于1999年2月。2000年8月，W3C組織正式發(fā)布了SVG 1.0規(guī)范。2003年1月14日，W3C組織發(fā)布了SVG 1.1規(guī)范。目前，SVG最新版本是2005年4月發(fā)布的SVG 1.2草案。

W3C組織為了在全平臺上推廣SVG，推出了很多SVG的子集以適應(yīng)相應(yīng)的SVG應(yīng)用。SVG Basic又稱SVGB（Scalable Vector Graphics，Basic Profile），譯為“可縮放的矢量圖形標(biāo)準(zhǔn)的基本版”。是SVG的一個子集，而主要目標(biāo)是為掌上電腦等高端移動設(shè)備提供矢量圖形顯示格式。SVG Tiny又稱SVGT（Scalable Vector Graphics，Tiny Profile），譯為“可縮放的矢量圖形標(biāo)準(zhǔn)的微型簡化版本”。它也是SVG的一個子集，而主要為手機等低端移動設(shè)備提供矢量圖形顯示格式。

3 SVG技術(shù)原理分析

3.1 例子分析

一個最簡單的例子：

"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">

例子中的SVG首先畫了一個矩形，然后寫了一段文字，接著利用路徑元素畫了一個三角形，最后在瀏覽器中顯示效果如圖2所示。

圖2 瀏覽器中顯示效果

這里我們可以看到SVG是一種標(biāo)簽化的語言，和HTML一樣，通過不同的標(biāo)簽標(biāo)識不同的元素。SVG文檔是以.svg格式存放的，開頭必須如下格式：

"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">

文檔最后必須寫成如下格式：

中間就是svg文件的主要部分，使用的是SVG的圖像描述語句。第一句話是定義了一個視口坐標(biāo)系和用戶坐標(biāo)系，缺省的情況下兩者是一致的，度量單位也相同，如果屬性值沒有帶單位，則使用用戶坐標(biāo)系的長度單位-像素（pixal）。大多數(shù)情況下，用戶坐標(biāo)系的原點處在視口的左上角，X軸的正向朝右，Y軸的正向朝下，即如果不進(jìn)行坐標(biāo)變換，一切渲染都是以初始坐標(biāo)系為準(zhǔn)。

標(biāo)簽是用來畫了一個矩形，填充樣式，顏色為粉紅。高度和寬度分別指定。

標(biāo)簽用來寫文字，實心填充，顏色為藍(lán)色。Y屬性用來表示高度。

標(biāo)簽用來畫出后面指令里面相應(yīng)的路徑。SVG提供了這種通用的路徑式元素，可以用來創(chuàng)建龐大復(fù)雜的圖像對象，像電子設(shè)計、流程圖、統(tǒng)計繪畫等專用領(lǐng)域有大量固定的符號，SVG無法全部囊括。SVG規(guī)范允許用戶定義自己的符號，可以將自定義的符號創(chuàng)建、重用、發(fā)布而不需要其他額外的手段，更不需要一個什么委員會來批準(zhǔn)注冊，這種自由靈活的風(fēng)格更加擴展了SVG的功能。

因此，上面這個例子就是簡單的填充出矩形，然后加上文字，再利用路徑元素畫出了一個黑色的三角形。

3.2 為SVG中元素加上超鏈接

SVG是基于XML的，而"xlink"和"xpointer"等都是XML特有的，所以SVG就自然而然獲得了XML所定義的鏈接的好處和功能。因此，SVG可以為其中任意元素，包括文字圖形或其他，加上超鏈接。

通常添加超鏈接的格式如下：

//引號中為任意url

… //這里為所要添加超鏈接的元素，文字圖形等

//標(biāo)準(zhǔn)結(jié)束符

只需將如上格式嵌套在整個SVG文件中即可。

除了以上這種通常做法，還有三種添加超鏈接的方法：

（1）通過SVG元素的“id”屬性對元素進(jìn)行鏈接與標(biāo)識。如somfile.svg#someplace。

（2）使用與XML兼容的“xpointer”。如somefile.svg#xpointer（id（"someplace"））。

（3）使用SVG的“viewBox”說明。

因不常用，這里不給出具體的說明，請參考相應(yīng)的文檔。