可縮放向量圖形(SVG)

W3C 於 2003 年 1 月 4 日發佈 SVG 1.1，可縮放向量圖形(Scalable Vector Graphics, SVG)是一種用來描述網頁二維向量圖形的標記語言，它是 XML 的一 種應用，遵從 XML 語法，使用文本格式的描述性語言來描述圖像內容，因此是 一種和圖像分辨率無關的向量圖形格式。

SVG格式圖形的特色是具有可縮放性(scalable)，它的意思是能夠對整個圖形 進行一致地放大或縮小，針對不同的解析度做縮放調整，使圖形以原來的尺寸顯 示在不同解析度的螢幕上，同樣的，SVG圖形也可以不同的大小放置在網頁中。

目前大多的圖形皆屬於Raster格式(如：PNG和JPEG)，內容是以像素(pixel)構成，

SVG不同於此種格式，它描述的是向量圖形，其內容是以線和曲線幾何物件構 成，由於向量圖形只儲存幾何物件參數，而Raster格式圖形必須儲存圖形的每個 像素資訊，因此以向量圖形的檔案大小遠比Raster格式圖形小很多。

向量格式圖形和 Raster 格式圖形因為內容構成的不同，在圖形的縮放時便有 著很大的不同，向量格式圖形進行縮放時較能保有原圖的真實性，而 Raster 格式 圖形易產生鋸齒狀失真，因此向量圖形比 Raster 格式圖形有較高的品質，如圖 2.4 所示。

圖 2.4 兩種圖形格式比較圖 (資料來源：Wikipedia)

SVG內含了三種主要形式的圖形物件：向量式圖形(由路徑組成的直線及曲 線)、影像及文字。圖形物件可以被群組、樣式、轉換及合成至先前的圖形物件。

特徵(Feature)設定包括：

X 巢狀轉換(Nested Transformations) X 切割路徑(Clipping Paths)

X alpha遮罩(Alpha Masks) X 濾鏡效果(Filter Effects) X 樣板物件(Template Objects)

SVG圖形可以實現動態和互動式的功能，動畫可經由動畫元素宣告或腳本語 言來定義及觸發(Triggered)。在文件物件模型(Document Object Model, DOM)的基 礎上，利用存取SVG文件物件模型可以對SVG所有的元素(Elements)、屬性 (Attributes)和性質(Properties)進行編輯。由於SVG相容並支援其它全球資訊網

(WWW)標準，因此在相同的網頁裡，腳本語言能同時操作HTML和SVG元素。

HTML 主要是用以顯示文字資訊的標記語言，對於圖形的支援只有<img/>

元素顯示靜態圖片或簡單動畫。SVG，提供豐富的向量圖形元素及圖片影像，彌 補了 HTML 對圖形元素支援的欠缺，讓作者能夠製作出生動的圖表及專業的影 像。

SVG 圖形格式具有以下優點：

X 圖像文件可讀，易於修改和編輯，很多工具支援 SVG 檔案的讀取和編 輯，如：notepad

X 與現有技術可以互動融合。例如，SVG 技術本身的動態部分（包括時 序控制和動畫）就是基於 SMIL 標準。另外，SVG 文件還可嵌入 JavaScript

（嚴格的說應該是 ECMAScript）腳本來控制 SVG 對象

X SVG 圖形格式可以方便的建立文字索引，從而實現基於內容的圖像搜 索

X SVG 圖形格式支持多種濾鏡和特殊效果，在不改變圖像內容的前提下 可以實現位圖格式中類似文字陰影的效果

X SVG 圖形格式可以程式化，用來動態生成圖形。例如，可用 SVG 動態 生成具有交互功能的地圖，嵌入網頁中，並顯示給終端用戶

X SVG 檔案大小遠小於 Raster 格式圖形，如：JPEG images X SVG 圖形可縮放而不影響圖形畫質

X 可選取或搜尋 SVG 圖形中的文字 X SVG 是開放性的標準

X SVG 檔案完全符合 XML 的標準