<p><b>可縮放向量圖形</b>（英語：<span lang="en">Scalable Vector Graphics</span>，縮寫：<span lang="en"><b>SVG</b></span>）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
</p>


<h2><span id="SVG.E6.A6.82.E8.BF.B0"></span><span id="SVG概述">SVG概述</span></h2>
<p>SVG由1998年成立的W3C SVG工作群組啟動開發，隨著當年提交給W3C的六份標準提案而開展。
</p><p>SVG允許3種圖形物件類型：向量圖形、點陣圖像以及文字。圖形物件——包括PNG、JPEG這些點陣圖像——能夠被編組、設計、轉換及整合進先前的彩現物件中。文字可以在任何適用於應用程式的XML命名空間之內，從而提高SVG圖形的搜尋能力和無障礙性。SVG提供的功能集涵蓋了巢狀轉換、<span data-orig-title="裁剪路径" data-lang-code="en" data-lang-name="英語" data-foreign-title="Clipping path"><span>裁剪路徑</span></span>、Alpha通道、濾鏡效果、模板物件以及可延伸性。
</p><p>SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述圖像內容，因此是一種和圖像解析度無關的向量圖形格式。
</p>
<dl><dt>SVG格式具有以下優點：</dt></dl><ul><li>圖檔可讀，易於修改和編輯（理論上如此，但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）。</li>
<li>與現有技術可以互動融合。例如，SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準。另外，SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件。</li>
<li>SVG圖形格式可以方便的建立文字索引，從而實現基於內容的圖像搜尋。</li>
<li>SVG圖形格式支援多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果。</li>
<li>SVG圖形格式可以用來動態生成圖形。例如，可用SVG動態生成具有互動功能的地圖，嵌入網頁中，並顯示給終端使用者。</li></ul><dl><dt>SVG格式具有以下缺點：</dt></dl><ul><li>如何和已經占有重要市場份額的向量圖形格式Adobe Animate（舊稱Adobe Flash）競爭的問題。事實上，Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案。</li>
<li>SVG的本地執行環境下的廠家支援程度。</li>
<li>由於原始的SVG檔是遵從XML語法，導致資料採用未壓縮的方式存放，因此相較於其他的向量圖形格式，同樣的檔案內容會比其他的檔案格式稍大。Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式，附檔名為 .svgz， 但此種檔案格式除了Adobe旗下的軟體以外，未被廣泛支援使用。</li>
<li>舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形。</li></ul><h3><span id="SVG_Basic">SVG Basic</span></h3>
<p><b>SVG Basic</b>又稱SVGB，是英語「Scalable Vector Graphics, Basic Profile」的簡寫，可以翻譯為「可縮放的向量圖形標準的基本版」。它是SVG的一個子集，而主要目標是為掌上電腦等高端行動裝置提供向量圖形顯示格式。
</p>
<h3><span id="SVG_Tiny">SVG Tiny</span></h3>
<p><b>SVG Tiny</b>又稱SVGT，是英語「Scalable Vector Graphics, Tiny Profile」的簡寫，可以翻譯為「可縮放的向量圖形標準的微型簡化版本」。它也是SVG的一個子集，而主要目標是為手機等低階行動裝置提供向量圖形顯示格式。
</p>
<h3><span id="SVG.E5.8A.A8.E7.94.BB"></span><span id="SVG动画">SVG動畫</span></h3>
<dl><dd>主條目：<i><span data-orig-title="SVG動畫" data-lang-code="en" data-lang-name="英語" data-foreign-title="SVG animation"><span>SVG動畫</span></span></i></dd></dl><h2><span id="SVG.E6.8A.80.E6.9C.AF.E7.BB.86.E8.8A.82"></span><span id="SVG技术细节">SVG技術細節</span></h2>
<p>SVG主要支援以下幾種顯示物件：
</p>
<ol><li>向量顯示物件，基本向量顯示物件包括矩形、圓、橢圓、多邊形、直線、任意曲線等</li>
<li>嵌入式外部圖像，包括PNG、JPEG、SVG等</li>
<li>文字物件</li></ol><p>SVG可以實現動態和互動功能。在DOM模型的基礎上，SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱。SVG雖然是文字格式，但是SVG支援利用gzip壓縮演算法減少檔案尺寸，壓縮後的檔案通常用被稱為「SVGZ檔案」。
</p>
<h2><span id=".E6.A0.87.E5.87.86.E5.88.B6.E5.AE.9A.E5.BC.80.E5.8F.91.E5.8E.86.E5.8F.B2"></span><span id="标准制定开发历史">標準制定開發歷史</span></h2>
<p>SVG由1998年成立的W3C SVG工作群組啟動開發，隨著當年提交給W3C的六份標準提案應運而生：
</p>
<ul><li>Web Schematics，來自CCLRC</li>
<li>PGML，來自Adobe Systems、IBM、網景和昇陽電腦</li>
<li>VML，來自Autodesk、惠普、Macromedia、微軟和Vision</li>
<li>Hyper Graphics Markup Language (HGML)，來自Orange UK和普利茅斯大學</li>
<li>WebCGM，來自波音、InterCAP Graphics Systems、Inso Corporation、CCLRC和全錄</li>
<li>DrawML，來自Excosoft AB</li></ul><p>當時工作群組是由W3C的Chris Lilley領銜。
</p>
<ul><li>2001年9月4日，發布SVG 1.0。</li>
<li>2003年1月4日，發布SVG 1.1。</li>
<li>2003年1月14日，推出SVG移動子版本：SVG Tiny和SVG Basic。</li>
<li>2008年12月22日，發布SVG Tiny 1.2。</li>
<li>2011年8月16日，發布SVG 1.1（第2版），成為W3C目前推薦的標準。</li>
<li>W3C目前仍正在研究制定SVG 2，目前最新的草稿發布見此 （頁面存檔備份，存於網際網路檔案館）。</li></ul><h2><span id=".E7.A4.BA.E4.BE.8B"></span><span id="示例">範例</span></h2>
<ul class="gallery mw-gallery-traditional"><li class="gallerybox" style="width: 155px">
		<li class="gallerybox" style="width: 155px">
		<li class="gallerybox" style="width: 155px">
</ul><p>SVG格式是XML的一種，意即SVG檔案其實只是普通的文字檔案，用一般的文字編輯器便可檢視或修改。
</p>

<h2><span id="SVG.E6.98.BE.E7.A4.BA"></span><span id="SVG显示">SVG顯示</span></h2>
<h3><span id=".E6.8F.92.E4.BB.B6.E6.94.AF.E6.8C.81"></span><span id="插件支持">外掛程式支援</span></h3>
<p>目前，最常用的SVG外掛程式來自Adobe公司（Adobe SVG Viewer （頁面存檔備份，存於網際網路檔案館）），另外Corel也提供SVG瀏覽器（Corel SVG Viewer）。然而前者宣布於2009年1月1日停止對該產品的支援。
</p>
<h3><span id=".E5.8E.9F.E7.94.9F.E6.94.AF.E6.8C.81"></span><span id="原生支持">原生支援</span></h3>
<ul><li>比較著名的SVG專案包括Mozilla SVG Project （頁面存檔備份，存於網際網路檔案館），KDE的KSVG，以及Amaya等。</li>
<li>Mozilla Firefox自版本1.5發行後，即開始支援SVG格式的顯示 （頁面存檔備份，存於網際網路檔案館）。</li>
<li>Opera 8.0 版開始支援顯示Tiny 1.1規格的SVG。</li>
<li>基於Java的SVG專案主要有Batik SVG Toolkit等。</li>
<li>Google Chrome和Safari支援SVG顯示。</li>
<li>Microsoft的Internet Explorer 8.0版及其更老的版本尚未支援SVG，直至由Internet Explorer 9.0版開始支援SVG。</li></ul><h3><span id=".E5.90.84.E7.A7.8DSVG.E8.A7.A3.E9.87.8A.E5.99.A8.E6.94.AF.E6.8C.81.E7.A8.8B.E5.BA.A6.E6.AF.94.E8.BE.83"></span><span id="各种SVG解释器支持程度比较">各種SVG直譯器支援程度比較</span></h3>
<p>W3C的SVG網站上有一個測試套件可以用來測試SVG直譯器對於標準的支援。這個套件既可以線上執行也可以下載到本地執行。截至2007年中，對於流行的SVG軟體有如下測試結果：
</p>
<ul><li>對SVG支援最好的瀏覽器是Opera，它支援大多數的SVG特性。</li>
<li>作為專門的SVG瀏覽器，Batik SVG viewer能對大多數特性有良好支援，與Opera不相伯仲。但它不能和瀏覽器互動。</li>
<li>載入了Adobe SVG Viewer的Internet Explorer也能支援多數SVG特性，但是由於沒有瀏覽器的原生支援，在互動方面許多特性不支援。</li>
<li>Mozilla Firefox 2.0對SVG特性的支援相當弱，許多重要特性如動畫等都不能支援。</li></ul><h2><span id=".E8.AE.BE.E8.AE.A1.E5.B7.A5.E5.85.B7"></span><span id="设计工具">設計工具</span></h2>
<p>能夠設計SVG圖形作品的軟體工具包括Adobe Illustrator、Adobe Photoshop CC、Visio、Xmind8以及CorelDRAW等。
</p><p>而開放原始碼的軟體有Scribus、Karbon14、Inkscape以及Sodipodi等。
</p><p>另外也有開放原始碼、功能簡單但容易操作、免安裝的線上SVG設計工具，例如Svg-edit （頁面存檔備份，存於網際網路檔案館），該軟體現在位於Github （頁面存檔備份，存於網際網路檔案館）上。
</p><p>對於行動裝置，安卓系統則可以使用 PainterSVG （頁面存檔備份，存於網際網路檔案館）。
</p>
<h2><span id=".E5.8F.82.E8.80.83.E6.96.87.E7.8C.AE"></span><span id="参考文献">參考文獻</span></h2>

<h2><span id=".E5.A4.96.E9.83.A8.E9.93.BE.E6.8E.A5"></span><span id="外部链接">外部連結</span></h2>
<ul><li>W3C SVG 官方標準網站（頁面存檔備份，存於網際網路檔案館）<span title="英語">（英文）</span></li>
<li>svgwiki<span title="英語">（英文）</span></li>
<li>SVG Web（頁面存檔備份，存於網際網路檔案館）<span title="英語">（英文）</span></li>
<li>Opera開發網站上關於SVG的展示及教程<span title="英語">（英文）</span></li>
<li>W3school上關於SVG的教程 （頁面存檔備份，存於網際網路檔案館）</li></ul><h2><span id=".E5.8F.83.E8.A6.8B"></span><span id="參見">參見</span></h2>
<ul><li>Canvas (HTML元素)</li></ul>
<p class="mw-empty-elt">

</p>
<!-- 
NewPP limit report
Parsed by mw1428
Cached time: 20230505225910
Cache expiry: 1814400
Reduced expiry: false
Complications: [show‐toc]
CPU time usage: 1.075 seconds
Real time usage: 1.321 seconds
Preprocessor visited node count: 8914/1000000
Post‐expand include size: 717349/2097152 bytes
Template argument size: 42905/2097152 bytes
Highest expansion depth: 25/100
Expensive parser function count: 96/500
Unstrip recursion depth: 0/20
Unstrip post‐expand size: 25305/5000000 bytes
Lua time usage: 0.475/10.000 seconds
Lua memory usage: 25454028/52428800 bytes
Number of Wikibase entities loaded: 1/400
--><!--
Transclusion expansion time report (%,ms,calls,template)
100.00%  906.169      1 -total
 42.65%  386.516     10 Template:Navbox
 13.87%  125.710      1 Template:W3C规范和标准
 13.26%  120.199     48 Template:Link-en
 12.98%  117.658      1 Template:Reflist
 12.89%  116.803      1 Template:Lang-en
 11.83%  107.176      2 Template:Ambox
 10.77%   97.576      1 Template:网页浏览器
 10.50%   95.149      1 Template:Navbox_with_collapsible_sections
  9.33%   84.549      1 Template:程序设计语言
-->
**可縮放向量圖形**（英語：Scalable Vector Graphics，縮寫：**SVG**）是一種基於可延伸標記式語言（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 技術細節

SVG 主要支援以下幾種顯示物件：

1. 向量顯示物件，基本向量顯示物件包括矩形、圓、橢圓、多邊形、直線、任意曲線等
2. 嵌入式外部圖像，包括 PNG、JPEG、SVG 等
3. 文字物件

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 1.0。
* 2003 年 1 月 4 日，發布 SVG 1.1。
* 2003 年 1 月 14 日，推出 SVG 移動子版本：SVG Tiny 和 SVG Basic。
* 2008 年 12 月 22 日，發布 SVG Tiny 1.2。
* 2011 年 8 月 16 日，發布 SVG 1.1（第 2 版），成為 W3C 目前推薦的標準。
* W3C 目前仍正在研究制定 SVG 2，目前最新的草稿發布見此 （頁面存檔備份，存於網際網路檔案館）。

## 範例

* * *

SVG 格式是 XML 的一種，意即 SVG 檔案其實只是普通的文字檔案，用一般的文字編輯器便可檢視或修改。

## SVG 顯示

### 外掛程式支援

目前，最常用的 SVG 外掛程式來自 Adobe 公司（Adobe SVG Viewer （頁面存檔備份，存於網際網路檔案館）），另外 Corel 也提供 SVG 瀏覽器（Corel SVG Viewer）。然而前者宣布於 2009 年 1 月 1 日停止對該產品的支援。

### 原生支援

* 比較著名的 SVG 專案包括 Mozilla SVG Project （頁面存檔備份，存於網際網路檔案館），KDE 的 KSVG，以及 Amaya 等。
* Mozilla Firefox 自版本 1.5 發行後，即開始支援 SVG 格式的顯示 （頁面存檔備份，存於網際網路檔案館）。
* Opera 8.0 版開始支援顯示 Tiny 1.1 規格的 SVG。
* 基於 Java 的 SVG 專案主要有 Batik SVG Toolkit 等。
* Google Chrome 和 Safari 支援 SVG 顯示。
* Microsoft 的 Internet Explorer 8.0 版及其更老的版本尚未支援 SVG，直至由 Internet Explorer 9.0 版開始支援 SVG。

### 各種 SVG 直譯器支援程度比較

W3C 的 SVG 網站上有一個測試套件可以用來測試 SVG 直譯器對於標準的支援。這個套件既可以線上執行也可以下載到本地執行。截至 2007 年中，對於流行的 SVG 軟體有如下測試結果：

* 對 SVG 支援最好的瀏覽器是 Opera，它支援大多數的 SVG 特性。
* 作為專門的 SVG 瀏覽器，Batik SVG viewer 能對大多數特性有良好支援，與 Opera 不相伯仲。但它不能和瀏覽器互動。
* 載入了 Adobe SVG Viewer 的 Internet Explorer 也能支援多數 SVG 特性，但是由於沒有瀏覽器的原生支援，在互動方面許多特性不支援。
* Mozilla Firefox 2.0 對 SVG 特性的支援相當弱，許多重要特性如動畫等都不能支援。

## 設計工具

能夠設計 SVG 圖形作品的軟體工具包括 Adobe Illustrator、Adobe Photoshop CC、Visio、Xmind8 以及 CorelDRAW 等。

而開放原始碼的軟體有 Scribus、Karbon14、Inkscape 以及 Sodipodi 等。

另外也有開放原始碼、功能簡單但容易操作、免安裝的線上 SVG 設計工具，例如 Svg-edit （頁面存檔備份，存於網際網路檔案館），該軟體現在位於 Github （頁面存檔備份，存於網際網路檔案館）上。

對於行動裝置，安卓系統則可以使用 PainterSVG （頁面存檔備份，存於網際網路檔案館）。

## 參考文獻

## 外部連結

* W3C SVG 官方標準網站（頁面存檔備份，存於網際網路檔案館）（英文）
* svgwiki（英文）
* SVG Web（頁面存檔備份，存於網際網路檔案館）（英文）
* Opera 開發網站上關於 SVG 的展示及教程（英文）
* W3school 上關於 SVG 的教程 （頁面存檔備份，存於網際網路檔案館）

## 參見

* Canvas (HTML 元素)
.svg