鄭晨 楊驍

東南大學(xué) 江蘇 210096

0 前言

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

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

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

圖1 位圖與矢量圖對(duì)比

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

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

2 SVG簡(jiǎn)要介紹

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

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

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

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

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

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

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

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

（4）支持交互和動(dòng)畫

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

（5）支持字符查找

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

（6）支持Xlink和Xpointer

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

SVG的歷史最早可以追溯到1998年4月，W3C聯(lián)盟先后收到了兩個(gè)關(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向量語言，但二者卻是相互競(jìng)爭(zhēng)的對(duì)手。從功能上分析，他們的區(qū)別是PGML比較適合專業(yè)設(shè)計(jì)和出版，而VML適合普通的矢量圖形應(yīng)用。采用哪一個(gè)作為通用矢量圖形標(biāo)準(zhǔn)是一件十分困難的事情，為了更好地促進(jìn)XML向量圖形的發(fā)展，W3C決定在融合兩者優(yōu)點(diǎn)的基礎(chǔ)上，開發(fā)一種新的語言即SVG。W3C期望SVG這種基于開放標(biāo)準(zhǔn)的可擴(kuò)展語言，能夠滿足Web開發(fā)者對(duì)動(dòng)態(tài)、可縮放和平臺(tái)無關(guān)的Web內(nèi)容表現(xiàn)和交互手段日益增長(zhǎng)的需求。

根據(jù)W3C官方網(wǎng)站的介紹，SVG第一個(gè)草案出臺(tái)于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組織為了在全平臺(tái)上推廣SVG，推出了很多SVG的子集以適應(yīng)相應(yīng)的SVG應(yīng)用。SVG Basic又稱SVGB（Scalable Vector Graphics，Basic Profile），譯為“可縮放的矢量圖形標(biāo)準(zhǔn)的基本版”。是SVG的一個(gè)子集，而主要目標(biāo)是為掌上電腦等高端移動(dòng)設(shè)備提供矢量圖形顯示格式。SVG Tiny又稱SVGT（Scalable Vector Graphics，Tiny Profile），譯為“可縮放的矢量圖形標(biāo)準(zhǔn)的微型簡(jiǎn)化版本”。它也是SVG的一個(gè)子集，而主要為手機(jī)等低端移動(dòng)設(shè)備提供矢量圖形顯示格式。

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

3.1 例子分析

一個(gè)最簡(jiǎn)單的例子：

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

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

圖2 瀏覽器中顯示效果

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

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

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

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

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

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

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

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

3.2 為SVG中元素加上超鏈接

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

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

//引號(hào)中為任意url

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

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

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

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

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

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

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

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

3.3 SVG利用