面向圖形可擴展矢量圖形規範：SVG

來源：(正在更新，待查證,最初發表在2002年)

　　在過去十年中，圖像圖形技術曾經使出版印刷行業發生了一場深刻的技術革命，使古老的印刷術融入了高速發展的信息產業。隨著Internet技術的普及和發展，圖像圖形技術作為Web瀏覽技術的基礎，更將為建立一個全新的互聯網行業，發揮至關重要的作用。然而，目前的Internet技術在圖形圖像方面，應該說還處在年輕階段，從瀏覽器的核心技術來看，其對於圖形圖像的支持還僅僅局限於對圖像的簡單顯示，隨著應用的逐漸深入，圖像技術自身的一些缺點，如文件較大、在不同設備上顯示效果不同等問題日益突出，從某種程度上講也限制了Web瀏覽技術的進一步發展。

　　為此，眾多業內人士針對Web瀏覽器圖像圖形功能支持較弱這一缺點提出了改進措施。近年來，各大軟體廠商和組織紛紛推出自己的矢量圖形規範，主要代表有Adobe Systems Inc.制定的PGML（Precision Graphics Markup Language）、CCLRC提出的Web Schematics、Autodesk, Inc和微軟等提出的VML（Vector Markup Language）。此外，一些公司開始製作自己的plug-in來支持矢量圖形的瀏覽，但這些插件都由於缺乏跨平台的支持，以及沒有較好的配套編輯工具，而未能得到網上的廣泛應用。正是在這種情況下，為統一標準，結束目前的混亂局面，W3C組織於1998年8月專門成立了SVG工作組致力於圖形標準的制定工作，並於1999年2月11日發布了第一個討論草案，後幾經修訂於最近發布了最終草案。

　　SVG是一種基於XML 的用來描述二維矢量圖形和矢量/點陣混合圖形的置標語言，其全稱是可擴展矢量圖形規範（Scalable Vector Graphics）。其中，"可擴展"（scalable）在圖形圖像技術上指的是它不局限於一個固定的解析度和大小，譬如可以在不同解析度的屏幕上以相同的大小顯示，也可以在同一個網頁中以不同的大小或觀全局或觀細節；而在網路技術上指的是這一規範能夠與其它規範相融合，從而滿足更廣泛的用戶需求，適合於更廣泛的應用方式。"矢量"（vector）是指規範中描述了直線、曲線、形狀等幾何圖形，而無須象PNG、JPEG等圖像格式那樣逐象素進行描述，這使得集成了SVG的XML文檔更小，下載速度也大大提高。"圖形"（graphics）是指它提供了對矢量和矢量/柵格混合圖形的描述，填補了大多數基於XML的置標語言規範對複雜圖形描述的空白。

　　SVG規範定義了SVG的特徵、語法和顯示效果，包括模塊化的XML命名空間（namespace）和SVG文檔對象模型(DOM)。在以前的草案中，僅為SVG定義了一個DTD，這個DTD支持樣式單的引用。但這樣一來，SVG就不再是一個自定義的全包容的語言規範，而需要瀏覽工具額外具有對樣式單文件的處理能力。出於這種考慮，在新近出台的SVG的第八個草案中，為SVG提供了兩種不同的形式，即樣式化SVG和交換型SVG，它們各自有不同的DTD及MIME類型。樣式化SVG允許對圖形對象進行樣式添加，它可以通過引用外部樣式文件、在文件頭中預先進行樣式聲明和通過屬性為元素定義樣式三種方式使用樣式單，是SVG用於網路環境的推薦存儲格式。而交換型SVG取消了對樣式單的支持，完全使用元素屬性描述各個圖形對象的顯示效果。在未來的網路傳輸中，交換型SVG將會充當現在印刷業廣泛使用的圖形格式--EPS格式的網路版。並且，由於所有顯示信息都封裝到XML的屬性中，交換型SVG還可以作為XSLT轉換後所得到的結果文件格式，廣泛應用於XML文檔顯示效果的描述中。

　　SVG的繪圖可以通過動態和互動式方式進行，在實際操作中，則是以嵌入方式或腳本方式來實現的。SVG不僅使用Xlink和Xpointer來提供超鏈接功能，還定義了豐富的事件，這些事件可以應用於所有的圖形對象。由於SVG支持腳本語言（script），高級網頁製作者僅須進行簡單的Script編程，訪問SVG DOM的元素和屬性，即可響應特定的事件，從而提高了SVG的動態和交互性能。這使得SVG無論在顯示效果還是動態交互上都不遜於當前在互聯網上獨領風騷的FLASH。而且，SVG除了單獨使用外，還可以在XML文件中作為命名空間引入，或者用作HTML文件中的特殊對象。同樣，SVG作為一種基於XML的語言規範，也具有XML的可擴展性，可以在SVG文件中引入其它置標語言的命名空間。這些特性使得SVG在互聯網上將暢通無阻，比起採用二進位文件格式不能與其它網頁語言兼容的FLASH更勝一籌。

　　SVG是圖形、圖像和文字的有機統一。根據功能不同，SVG的主要對象可以歸為基本要素對象和頁面描述功能對象兩大類，請看下圖。

　　由上圖可以看出，SVG除了支持HTML中常用的標記，如文本、圖像、鏈接、交互性、CSS的使用、腳本（Script）外，還提供了大量針對圖形、圖像、動畫的特定標記。下面我們就來對它們進行分別介紹。

　　眾所周知，矢量圖形用點和線來描述，可以大大減小文件長度，提高傳輸效率。更重要的是，它將對圖形效果的顯示由伺服器端移到客戶端，可以充分利用客戶端的資源，減輕伺服器端的負擔。

　　SVG中有專門用於矢量圖形描述的標記，包括矩形＜rect＞、圓＜circle＞、橢圓＜ellipse＞、直線＜line＞、折線＜polyline＞和多邊形＜polygon＞。此外，SVG還支持圖形繪製中常用的由Bezier曲線定義的路徑描述和操作，其元素標記為＜path＞。有了以上定義，就可對相應路徑進行勾勒、填充、裁剪、蒙版和合成等一系列操作。

　　對於＜path＞、＜text＞元素和前述形狀元素，可以利用Stroke 和Fill屬性進行勾勒和填充，其中填充可以使用某種顏色，或使用＜linearGradient＞、＜radialGradient＞定義的漸變色，或是使用＜pattern＞定義的底紋填充模式。而對於＜path＞、＜line＞、＜polyline＞、＜polygon＞等元素，只要將其放入＜marker＞標記對中，即可按所定義的路徑繪製箭頭。

　　同樣，對於＜path＞、＜text＞元素和各種形狀元素，也可以對其輪廓內的區域作裁剪、蒙版和合成操作。＜clipPath＞利用上述各種元素描述裁剪路徑，＜mask＞標記則支持單通道、三通道、和alpha通道操作。最後，SVG還支持圖形中成組的概念，以上操作均可以對一組圖形進行操作。

　　在下面的例子中，藉助於上面講到的一些標記繪製了一個經過漸變填充的矩形圖形。

　　它的顯示效果是：

　　如果你的IE已經安裝了ADOBE的SVG Viewer插件(下載地址)，將上面一段代碼存為擴展名為.svg的文件，再用IE打開，就可以看到上面的效果。

　　目前網上傳輸的圖像文件主要採用GIF、JPEG和PNG三種文件格式。儘管它們具有高壓縮比、低容量的優點，但即便要將其做一點微小改動，也必須利用圖像軟體將其重新製作重新存儲，非常繁瑣。SVG支持對於圖像的一系列常用過濾器操作，使得圖像效果調整的任務可以在客戶端進行。同樣，這些過濾器操作也可應用於圖形之中。

　　使用標記＜filter＞可以定義過濾器效果，在其中按照要施加的過濾操作的順序依次羅列相應的標記。現在我們來看一個W3C在SVG標準中給出的例子：

　　其瀏覽效果是：

　　這個SVG描述的基本圖形是藍框灰色矩形，裡面有一個紅色環行跑道，再裡面是一個紅色圓頭矩形，中間有"XML"的白色文字。那麼，它是如何通過一系列的過濾操作得到上面的效果呢？我們就來一步步看一看。

三、SVG中對動畫的支持

　　目前，網頁中播放的動畫多為GIF格式，它也存在著與網上傳輸的圖像格式相同的問題，即修改在伺服器端實現，而不是在客戶端實現。SVG中提供了專門的動畫效果，可以描述一個圖形圖像元素的實時變化。

　　SVG中用標記＜animateMotion＞描述元素的移動效果，用＜animateFlipbook＞描述元素的彈跳效果，用＜animateTransform＞描述元素的放縮、旋轉、偏斜等變換效果，用＜animateColor＞描述元素顏色的改變，還可以用＜animate＞描述元素的淡入淡出效果。

　　下面這個例子描述了幾種不同的動畫效果：

　　代碼首先描述了一個黃色矩形的淡出效果，分別指示了在9秒鐘的過程中它的左上角坐標和長、寬的勻速變化。然後又描述了從第3秒開始顯示的一串文字，這串文字在接下來的6秒鐘里有以下動作：

　　· 文字的左上角沿直線運動　　· 文字的顏色由蘭色變成深紅　　· 文字的方向從上斜30度變為水平　　· 文字的逐漸增大到原先的3倍大小

　　它在0秒、3秒、6秒、9秒的顯示效果分別是：

　　儘管SVG規範尚未成為正式的推薦標準，但由於目前SVG代表了未來網上矢量圖形傳輸發展的方向，國外各大公司都在追蹤其發展，開發設計了一些實驗系統，Adobe公司開發了用於IE5和Netscape的SVG瀏覽插件，IBM推出了專門的SVG瀏覽工具，許多知名的平面設計軟體，例如CorelDraw、Illustrator,都開始嘗試支持SVG格式的輸入和輸出，同時還出現了一大批格式轉換工具，其中還包括從現在流行的Flash格式向SVG格式的轉換工具。國內對於SVG的應用研究也已經逐步展開，例如圖像圖形編輯軟體"方正畫苑"已經在其3.0版本中加入了SVG的編輯輸出功能，預計不久就將投入市場。鑒於SVG出色的優點，我們有理由相信，在不久的將來基於SVG技術的瀏覽技術必將成為Web技術上一個新的熱點。