可縮放向量圖形（，縮寫：）是一種基於可擴充套件標記語言（XML），用於描述二維向量圖形的圖形格式。SVG 由 W3C 制定，是一個開放標準。 SVG 概述 SVG 由 1998 年成立的 W3C SVG 工作組啟動開發，隨著當年提交給 W3C 的六份標準提案而開展。 SVG 允許 3 種圖形物件型別：向量圖形、柵格影像以及文字。圖形物件 包括 PNG、JPEG 這些柵格影像 能夠被編組、設計、轉換及整合進先前的渲染物件中。文字可以在任何適用於應用程式的 XML 名稱空間之內，從而提高 SVG 圖形的搜尋能力和無障礙性。SVG 提供的功能集涵蓋了巢狀轉換、、Alpha 通道、濾鏡效果、模板物件以及可擴充套件性。 SVG 嚴格遵從 XML 語法，並用文字格式的描述性語言來描述影像內容，因此是一種和影像解析度無關的向量圖形格式。 SVG 格式具有以下優點： 影像檔案可讀，易於修改和編輯（理論上如此，但實際上卻是因為各種不同的 SVG 檔編輯器而可能儲存成不易解讀的 SVG 檔案）。 與現有技術可以互動融合。例如，SVG 技術本身的動態部分（包括時序控制和動畫）就是基於 SMIL 標準。另外，SVG 檔案還可嵌入 JavaScript（嚴格地說，應該是 ECMAScript）指令碼來控制 SVG 物件。 SVG 圖形格式可以方便的建立文字索引，從而實現基於內容的影像搜尋。 SVG 圖形格式支援多種濾鏡和特殊效果，在不改變影像內容的前提下可以實現點陣圖格式中類似文字陰影的效果。 SVG 圖形格式可以用來動態生成圖形。例如，可用 SVG 動態生成具有互動功能的地圖，嵌入網頁中，並顯示給終端使用者。 SVG 格式具有以下缺點： 如何和已經佔有重要市場份額的向量圖形格式 Adobe Animate（舊稱 Adobe Flash）競爭的問題。事實上，Adobe Animate 在 Flash CC 2014 版及以後的版本就都支援直接匯出 SVG 檔案。 SVG 的本地執行環境下的廠家支援程度。 由於原始的 SVG 檔是遵從 XML 語法，導致資料採用未壓縮的方式存放，因此相較於其他的向量圖形格式，同樣的檔案內容會比其他的檔案格式稍大。Adobe 因此使用 gzip 壓縮開發出壓縮的 SVG 檔格式，附檔名為 svgz， 但此種檔案格式除了 Adobe 旗下的軟體以外，未被廣泛支援使用。 舊版的 SVG Viewer 無法正確顯示出使用新版 SVG 格式的向量圖形。 SVG Basic SVG Basic 又稱 SVGB，是英語「Scalable Vector Graphics Basic Profile」的簡寫，可以翻譯為「可縮放的向量圖形標準的基本版」。它是 SVG 的一個子集，而主要目標是為掌上電腦等高階移動裝置提供向量圖形顯示格式。 SVG Tiny SVG Tiny 又稱 SVGT，是英語「Scalable Vector Graphics Tiny Profile」的簡寫，可以翻譯為「可縮放的向量圖形標準的微型簡化版本」。它也是 SVG 的一個子集，而主要目標是為手機等低端移動裝置提供向量圖形顯示格式。 SVG 動畫 主條目： SVG 技術細節 SVG 主要支援以下幾種顯示物件： 向量顯示物件，基本向量顯示物件包括矩形、圓、橢圓、多邊形、直線、任意曲線等 嵌入式外部影像，包括 PNG、JPEG、SVG 等 文字物件 SVG 可以實現動態和互動功能。在 DOM 模型的基礎上，SVG 開發設計人員可以利用 ECMAScript 或者 SMIL 來進行時序控制或物件的操縱。SVG 雖然是文字格式，但是 SVG 支援利用 gzip 壓縮演算法減少檔案尺寸，壓縮後的檔案通常用被稱為「SVGZ 檔案」。 標準制定開發歷史 SVG 由 1998 年成立的 W3C SVG 工作組啟動開發，隨著當年提交給 W3C 的六份標準提案應運而生： Web Schematics，來自 CCLRC PGML，來自 Adobe Systems、IBM、網景和昇陽電腦 VML，來自 Autodesk、惠普、Macromedia、微軟和 Vision Hyper Graphics Markup Language HGML，來自 Orange UK 和普利茅斯大學 WebCGM，來自波音、InterCAP Graphics Systems、Inso Corporation、CCLRC 和施樂 DrawML，來自 Excosoft AB 當時工作組是由 W3C 的 Chris Lilley 領銜。 2001 年 9 月 4 日，釋出 SVG 10。 2003 年 1 月 4 日，釋出 SVG 11。 2003 年 1 月 14 日，推出 SVG 移動子版本：SVG Tiny 和 SVG Basic。 2008 年 12 月 22 日，發布 SVG Tiny 12。 2011 年 8 月 16 日，發布 SVG 11（第 2 版），成為 W3C 目前推薦的標準。 W3C 目前仍正在研究制定 SVG 2，目前最新的草稿發布見此 。 示例 FileSvg example3svg 示例 SVG 顯示 FileHM_04_lowdetailsvg 簡單 SVG 圖片，樣如少女。 FileMahurisvg 較為複雜但精細的 SVG 圖片 SVG 格式是 XML 的一種，意即 SVG 檔案其實只是普通的文字檔案，用一般的文字編輯器便可檢視或修改。 xml version10 DOCTYPE svg PUBLIC W3CDTD SVG 11EN httpwwww3orgGraphicsSVG11DTDsvg11dtd svg xmlnshttpwwww3org2000svg version11 width467 height462 This is the red square rect x80 y60 width250 height250 rx20 fillred strokeblack strokewidth2px This is the blue square rect x140 y120 width250 height250 rx40 fillblue strokeblack strokewidth2px fillopacity07 rect x180 y160 width250 height250 rx40 fillblue strokegreen strokewidth2px fillopacity07 svg SVG 顯示 外掛支援 目前，最常用的 SVG 外掛來自 Adobe 公司（Adobe SVG Viewer ），另外 Corel 也提供 SVG 瀏覽器（Corel SVG Viewer）。然而前者宣佈於 2009 年 1 月 1 日停止對該產品的支援。 原生支援 比較著名的 SVG 專案包括 Mozilla SVG Project ，KDE 的 KSVG，以及 Amaya 等。 Mozilla Firefox 自版本 15 發行後，即開始支援 SVG 格式的顯示 。 Opera 80 版開始支援顯示 Tiny 11 規格的 SVG。 基於 Java 的 SVG 專案主要有 Batik SVG Toolkit 等。 Google Chrome 和 Safari 支援 SVG 顯示。 Microsoft 的 Internet Explorer 80 版及其更老的版本尚未支援 SVG，直至由 Internet Explorer 90 版開始支援 SVG。 各種 SVG 直譯器支援程度比較 W3C 的 SVG 網站上有一個測試套件可以用來測試 SVG 直譯器對於標準的支援。這個套件既可以線上執行也可以下載到本地執行。截至 2007 年中，對於流行的 SVG 軟體有如下測試結果： 對 SVG 支援最好的瀏覽器是 Opera，它支援大多數的 SVG 特性。 作為專門的 SVG 瀏覽器，Batik SVG viewer 能對大多數特性有良好支援，與 Opera 不相伯仲。但它不能和瀏覽器互動。 載入了 Adobe SVG Viewer 的 Internet Explorer 也能支援多數 SVG 特性，但是由於沒有瀏覽器的原生支援，在互動方面許多特性不支援。 Mozilla Firefox 20 對 SVG 特性的支援相當弱，許多重要特性如動畫等都不能支援。 設計工具 能夠設計 SVG 圖形作品的軟體工具包括 Adobe Illustrator、Adobe Photoshop CC、Visio、Xmind8 以及 CorelDRAW 等。 而開放原始碼的軟體有 Scribus、Karbon14、Inkscape 以及 Sodipodi 等。 另外也有開放原始碼、功能簡單但容易操作、免安裝的線上 SVG 設計工具，例如 Svgedit ，該軟體現在位於 Github 上。 對於移動裝置，安卓系統則可以使用 PainterSVG 。 參考文獻 外部連結 W3C SVG 官方標準網站 svgwiki SVG Web Opera 開發網站上關於 SVG 的展示及教程 W3school 上關於 SVG 的教程 參見 Canvas HTML 元素 Category 圖形檔案格式 Category 向量圖形 Category 標記語言 Category 基於 XML 的標準 CategoryW3C 標準 Category 頁面描述語言 Category 帶有程式碼示例的條目