 |  |
| Written by 將平 | |
| 2007-Jan-09 | |
| 來源：(正在更新，待查證,最初發(fā)表在2002年) 在過去十年中，圖像圖形技術(shù)曾經(jīng)使出版印刷行業(yè)發(fā)生了一場(chǎng)深刻的技術(shù)革命，使古老的印刷術(shù)融入了高速發(fā)展的信息產(chǎn)業(yè)。隨著Internet技術(shù)的普及和發(fā)展，圖像圖形技術(shù)作為Web瀏覽技術(shù)的基礎(chǔ)，更將為建立一個(gè)全新的互聯(lián)網(wǎng)行業(yè)，發(fā)揮至關(guān)重要的作用。然而，目前的Internet技術(shù)在圖形圖像方面，應(yīng)該說還處在年輕階段，從瀏覽器的核心技術(shù)來看，其對(duì)于圖形圖像的支持還僅僅局限于對(duì)圖像的簡(jiǎn)單顯示，隨著應(yīng)用的逐漸深入，圖像技術(shù)自身的一些缺點(diǎn)，如文件較大、在不同設(shè)備上顯示效果不同等問題日益突出，從某種程度上講也限制了Web瀏覽技術(shù)的進(jìn)一步發(fā)展。 為此，眾多業(yè)內(nèi)人士針對(duì)Web瀏覽器圖像圖形功能支持較弱這一缺點(diǎn)提出了改進(jìn)措施。近年來，各大軟件廠商和組織紛紛推出自己的矢量圖形規(guī)范，主要代表有Adobe Systems Inc.制定的PGML（Precision Graphics Markup Language）、CCLRC提出的Web Schematics、Autodesk, Inc和微軟等提出的VML（Vector Markup Language）。此外，一些公司開始制作自己的plug-in來支持矢量圖形的瀏覽，但這些插件都由于缺乏跨平臺(tái)的支持，以及沒有較好的配套編輯工具，而未能得到網(wǎng)上的廣泛應(yīng)用。正是在這種情況下，為統(tǒng)一標(biāo)準(zhǔn)，結(jié)束目前的混亂局面，W3C組織于1998年8月專門成立了SVG工作組致力于圖形標(biāo)準(zhǔn)的制定工作，并于1999年2月11日發(fā)布了第一個(gè)討論草案，后幾經(jīng)修訂于最近發(fā)布了最終草案。 SVG是一種基于XML 的用來描述二維矢量圖形和矢量/點(diǎn)陣混合圖形的置標(biāo)語言，其全稱是可擴(kuò)展矢量圖形規(guī)范（Scalable Vector Graphics）。其中，"可擴(kuò)展"（scalable）在圖形圖像技術(shù)上指的是它不局限于一個(gè)固定的分辨率和大小，譬如可以在不同分辨率的屏幕上以相同的大小顯示，也可以在同一個(gè)網(wǎng)頁中以不同的大小或觀全局或觀細(xì)節(jié)；而在網(wǎng)絡(luò)技術(shù)上指的是這一規(guī)范能夠與其它規(guī)范相融合，從而滿足更廣泛的用戶需求，適合于更廣泛的應(yīng)用方式。"矢量"（vector）是指規(guī)范中描述了直線、曲線、形狀等幾何圖形，而無須象PNG、JPEG等圖像格式那樣逐象素進(jìn)行描述，這使得集成了SVG的XML文檔更小，下載速度也大大提高。"圖形"（graphics）是指它提供了對(duì)矢量和矢量/柵格混合圖形的描述，填補(bǔ)了大多數(shù)基于XML的置標(biāo)語言規(guī)范對(duì)復(fù)雜圖形描述的空白。 SVG規(guī)范定義了SVG的特征、語法和顯示效果，包括模塊化的XML命名空間（namespace）和SVG文檔對(duì)象模型(DOM)。在以前的草案中，僅為SVG定義了一個(gè)DTD，這個(gè)DTD支持樣式單的引用。但這樣一來，SVG就不再是一個(gè)自定義的全包容的語言規(guī)范，而需要瀏覽工具額外具有對(duì)樣式單文件的處理能力。出于這種考慮，在新近出臺(tái)的SVG的第八個(gè)草案中，為SVG提供了兩種不同的形式，即樣式化SVG和交換型SVG，它們各自有不同的DTD及MIME類型。樣式化SVG允許對(duì)圖形對(duì)象進(jìn)行樣式添加，它可以通過引用外部樣式文件、在文件頭中預(yù)先進(jìn)行樣式聲明和通過屬性為元素定義樣式三種方式使用樣式單，是SVG用于網(wǎng)絡(luò)環(huán)境的推薦存儲(chǔ)格式。而交換型SVG取消了對(duì)樣式單的支持，完全使用元素屬性描述各個(gè)圖形對(duì)象的顯示效果。在未來的網(wǎng)絡(luò)傳輸中，交換型SVG將會(huì)充當(dāng)現(xiàn)在印刷業(yè)廣泛使用的圖形格式--EPS格式的網(wǎng)絡(luò)版。并且，由于所有顯示信息都封裝到XML的屬性中，交換型SVG還可以作為XSLT轉(zhuǎn)換后所得到的結(jié)果文件格式，廣泛應(yīng)用于XML文檔顯示效果的描述中。 SVG的繪圖可以通過動(dòng)態(tài)和交互式方式進(jìn)行，在實(shí)際操作中，則是以嵌入方式或腳本方式來實(shí)現(xiàn)的。SVG不僅使用Xlink和Xpointer來提供超鏈接功能，還定義了豐富的事件，這些事件可以應(yīng)用于所有的圖形對(duì)象。由于SVG支持腳本語言（script），高級(jí)網(wǎng)頁制作者僅須進(jìn)行簡(jiǎn)單的Script編程，訪問SVG DOM的元素和屬性，即可響應(yīng)特定的事件，從而提高了SVG的動(dòng)態(tài)和交互性能。這使得SVG無論在顯示效果還是動(dòng)態(tài)交互上都不遜于當(dāng)前在互聯(lián)網(wǎng)上獨(dú)領(lǐng)風(fēng)騷的FLASH。而且，SVG除了單獨(dú)使用外，還可以在XML文件中作為命名空間引入，或者用作HTML文件中的特殊對(duì)象。同樣，SVG作為一種基于XML的語言規(guī)范，也具有XML的可擴(kuò)展性，可以在SVG文件中引入其它置標(biāo)語言的命名空間。這些特性使得SVG在互聯(lián)網(wǎng)上將暢通無阻，比起采用二進(jìn)制文件格式不能與其它網(wǎng)頁語言兼容的FLASH更勝一籌。 SVG是圖形、圖像和文字的有機(jī)統(tǒng)一。根據(jù)功能不同，SVG的主要對(duì)象可以歸為基本要素對(duì)象和頁面描述功能對(duì)象兩大類，請(qǐng)看下圖。 
 由上圖可以看出，SVG除了支持HTML中常用的標(biāo)記，如文本、圖像、鏈接、交互性、CSS的使用、腳本（Script）外，還提供了大量針對(duì)圖形、圖像、動(dòng)畫的特定標(biāo)記。下面我們就來對(duì)它們進(jìn)行分別介紹。
眾所周知，矢量圖形用點(diǎn)和線來描述，可以大大減小文件長度，提高傳輸效率。更重要的是，它將對(duì)圖形效果的顯示由服務(wù)器端移到客戶端，可以充分利用客戶端的資源，減輕服務(wù)器端的負(fù)擔(dān)。 SVG中有專門用于矢量圖形描述的標(biāo)記，包括矩形＜rect＞、圓＜circle＞、橢圓＜ellipse＞、直線＜line＞、折線＜polyline＞和多邊形＜polygon＞。此外，SVG還支持圖形繪制中常用的由Bezier曲線定義的路徑描述和操作，其元素標(biāo)記為＜path＞。有了以上定義，就可對(duì)相應(yīng)路徑進(jìn)行勾勒、填充、裁剪、蒙版和合成等一系列操作。 對(duì)于＜path＞、＜text＞元素和前述形狀元素，可以利用Stroke 和Fill屬性進(jìn)行勾勒和填充，其中填充可以使用某種顏色，或使用＜linearGradient＞、＜radialGradient＞定義的漸變色，或是使用＜pattern＞定義的底紋填充模式。而對(duì)于＜path＞、＜line＞、＜polyline＞、＜polygon＞等元素，只要將其放入＜marker＞標(biāo)記對(duì)中，即可按所定義的路徑繪制箭頭。 同樣，對(duì)于＜path＞、＜text＞元素和各種形狀元素，也可以對(duì)其輪廓內(nèi)的區(qū)域作裁剪、蒙版和合成操作。＜clipPath＞利用上述各種元素描述裁剪路徑，＜mask＞標(biāo)記則支持單通道、三通道、和alpha通道操作。最后，SVG還支持圖形中成組的概念，以上操作均可以對(duì)一組圖形進(jìn)行操作。 在下面的例子中，借助于上面講到的一些標(biāo)記繪制了一個(gè)經(jīng)過漸變填充的矩形圖形。  它的顯示效果是：
 如果你的IE已經(jīng)安裝了ADOBE的SVG Viewer插件(下載地址)，將上面一段代碼存為擴(kuò)展名為.svg的文件，再用IE打開，就可以看到上面的效果。
目前網(wǎng)上傳輸?shù)膱D像文件主要采用GIF、JPEG和PNG三種文件格式。盡管它們具有高壓縮比、低容量的優(yōu)點(diǎn)，但即便要將其做一點(diǎn)微小改動(dòng)，也必須利用圖像軟件將其重新制作重新存儲(chǔ)，非常繁瑣。SVG支持對(duì)于圖像的一系列常用過濾器操作，使得圖像效果調(diào)整的任務(wù)可以在客戶端進(jìn)行。同樣，這些過濾器操作也可應(yīng)用于圖形之中。 使用標(biāo)記＜filter＞可以定義過濾器效果，在其中按照要施加的過濾操作的順序依次羅列相應(yīng)的標(biāo)記?，F(xiàn)在我們來看一個(gè)W3C在SVG標(biāo)準(zhǔn)中給出的例子： 其瀏覽效果是：
這個(gè)SVG描述的基本圖形是藍(lán)框灰色矩形，里面有一個(gè)紅色環(huán)行跑道，再里面是一個(gè)紅色圓頭矩形，中間有"XML"的白色文字。那么，它是如何通過一系列的過濾操作得到上面的效果呢？我們就來一步步看一看。 三、SVG中對(duì)動(dòng)畫的支持 目前，網(wǎng)頁中播放的動(dòng)畫多為GIF格式，它也存在著與網(wǎng)上傳輸?shù)膱D像格式相同的問題，即修改在服務(wù)器端實(shí)現(xiàn)，而不是在客戶端實(shí)現(xiàn)。SVG中提供了專門的動(dòng)畫效果，可以描述一個(gè)圖形圖像元素的實(shí)時(shí)變化。 SVG中用標(biāo)記＜animateMotion＞描述元素的移動(dòng)效果，用＜animateFlipbook＞描述元素的彈跳效果，用＜animateTransform＞描述元素的放縮、旋轉(zhuǎn)、偏斜等變換效果，用＜animateColor＞描述元素顏色的改變，還可以用＜animate＞描述元素的淡入淡出效果。 下面這個(gè)例子描述了幾種不同的動(dòng)畫效果：
代碼首先描述了一個(gè)黃色矩形的淡出效果，分別指示了在9秒鐘的過程中它的左上角坐標(biāo)和長、寬的勻速變化。然后又描述了從第3秒開始顯示的一串文字，這串文字在接下來的6秒鐘里有以下動(dòng)作： · 文字的左上角沿直線運(yùn)動(dòng) 它在0秒、3秒、6秒、9秒的顯示效果分別是：
盡管SVG規(guī)范尚未成為正式的推薦標(biāo)準(zhǔn)，但由于目前SVG代表了未來網(wǎng)上矢量圖形傳輸發(fā)展的方向，國外各大公司都在追蹤其發(fā)展，開發(fā)設(shè)計(jì)了一些實(shí)驗(yàn)系統(tǒng)，Adobe公司開發(fā)了用于IE5和Netscape的SVG瀏覽插件，IBM推出了專門的SVG瀏覽工具，許多知名的平面設(shè)計(jì)軟件，例如CorelDraw、Illustrator,都開始嘗試支持SVG格式的輸入和輸出，同時(shí)還出現(xiàn)了一大批格式轉(zhuǎn)換工具，其中還包括從現(xiàn)在流行的Flash格式向SVG格式的轉(zhuǎn)換工具。國內(nèi)對(duì)于SVG的應(yīng)用研究也已經(jīng)逐步展開，例如圖像圖形編輯軟件"方正畫苑"已經(jīng)在其3.0版本中加入了SVG的編輯輸出功能，預(yù)計(jì)不久就將投入市場(chǎng)。鑒于SVG出色的優(yōu)點(diǎn)，我們有理由相信，在不久的將來基于SVG技術(shù)的瀏覽技術(shù)必將成為Web技術(shù)上一個(gè)新的熱點(diǎn)。 |
聯(lián)系客服
