【O專欄】SVG：可縮放向量圖形的好處與可能性

【編按】上一期O專欄提到網路字型，其中有些範例提到了SVG這個名詞。SVG到底是什麼，又能帶給網路什麼新的可能性？為什麼微軟會在專業開發者大會上提到IE9的圖型加速，又為什麼Opera會在10.5 Pre-Alpha版中加入名為Vega的向量圖型函式庫？了解SVG是什麼，就能搶先理解2010年的瀏覽器新趨勢！

什麼是SVG?

可縮放向量圖形（Scalable Vector Graphics，簡稱SVG）是W3C所制定的開放性網路標準之一。它是以可擴充套件標記語言（XML），來描述2D圖形的一種圖形格式，也可以作動態效果、提供互動功能。SVG的獨特性在於它可以搭配使用CSS（Cascading Style Sheets）、Script腳本和DOM（Document Object Model）。例如，想要制定SVG的圖像色彩及其他視覺的表現，可以搭配使用CSS來作設計。想要圖像具有互動的功能，可以使用JavaScript腳本，做出點擊等互動效果。

SVG由W3C制定，目前的最新標準為1.1版，適用於手機的 SVG Tiny是1.2版。由於SVG屬於開源技術，用戶可以單擊右鍵察看某SVG圖案的源代碼。Adobe的Flash或微軟的Silverlight則屬專利技術，自由軟體支持者會擔心技術的專利性會威脅到網際網路被單一專利技術所獨佔，進而影響其創新的發展。

SVG和其他向量圖形相比，好處有:

1. 屬開源前端技術，就如HTML、CSS一樣，我們可以讀取原始代碼。
2. SVG可以被搜尋。SVG以XML寫成，而搜索引擎可以讀取XML內容。一般來說，搜索引擎無法搜索圖片，現在可以依圖片的特性搜索SVG圖檔。
3. SVG Tiny可適用於在手機上。
4. SVG有向量圖形的優點，比方可以保持圖像清晰度，不會隨放大與縮小而有所失真，也不會大幅增加檔案的大小。

▲向量與點陣的差異就是放大後會不會失真（圖片來源：Wikipedia）

SVG入門

XML與HTML非常相像，有開關標籤（Open、Close tag），同時也有嵌套標籤 （Nested tag）。每一個SVG文件中都有《SVG》元素。SVG文件可以單獨存在，或內置在一個XML/HTML文檔裡。一般人會喜歡用向量繪圖軟體Inkscape畫出SVG圖像，然後在記事本程式上進行代碼優化。

一個簡單的SVG文檔範例如下：

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 20000303 Stylable//EN”
“http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd”>
<svg xml:space=”preserve” width=”5.5in” height=”.5in”>
<text style=”fill:red;” y=”15″>This is SVG.</text>
</svg>

每當談到SVG，經常會提及同步多媒體集成語言（ SMIL, Synchronized Multimedia Integration Language）。SMIL是W3C為採用XML描述多媒體而提出的建議標準。它定義了時間標籤、布局標籤、動畫、視覺漸變（Visual Transitions）以及媒體嵌入等。以下這個SVG圖像是一個動態的圖像，就運用了一些簡單的SVG和SMIL元素。

SVG動態指令實作

接下來由筆者來簡單示範說明 SVG的三個SMIL動態元素：靜態變化（Set）、動態變化 （Animate）和動態轉換（Animate Transform）。
首先運用Set元素來設定圖像，從隱形到有形：

<set attributeType=”CSS” attributeName=”visibility” from=”visible” to=”hidden” begin=”0s” dur=”1s”/>

如果要產生主動性（Progressive）的變化，則需要以Animate來設定。例如在圖像裡的橙色布條，從0增加到600寬度在1秒後啓動，為時1.5秒。

<animate attributeType=”XML” attributeName=”width” from=”0″ to=”600″ dur=”1.5s” begin=”1s”/>

最後一種動態是 AnimateTransform，它和Animate元素相似，不過需要定義Type屬性來進行Transform，例如：旋轉。以下範例的代碼將textPath元素旋轉300度。

<animateTransform attributeName=”transform” attributeType=”XML” type=”rotate” from=”0 290 472″ to=”300 290 472″ dur=”4s” begin=”2s” fill=”freeze”/>

讀者可以到這裡，透過瀏覽器中「檢視原始碼」的功能看看這些元素的應用。

SVG總結

SVG讓網頁開發人員可以在網頁上運用清晰的向量圖形，並透過CSS、Script脚本和DOM進一步增加圖像的動態與互動功能。SVG因為是用XML編寫，所以也延續了XML的優點，可以容易地被搜尋引擎找到。除此以外，SVG Tiny也適用於手機。

現在Apple Safari、Firefox、Google Chrome 和 Opera 都逐步支持SVG，如果要在IE 8觀看SVG，則必須另外安裝Plug-In。

更多資源請參考:

• SVG 介紹與動態操作實例（英文版）

作者簡介：謝子斌 ／Zi Bin, Cheah
馬來西亞華人，網路標準專家。長期從事網際網路標準研究，經常來往於中國、印尼、馬來西亞、北歐等地宣導。現於挪威Opera軟體公司奧斯陸總部擔任網路標準講師（Web Evangelist）。（Twitter、個人網站）