SVG 向量圖 (.svg)

W3C 標準

Scalable Vector Graphics (SVG) 是一種基於 XML 的向量圖片格式，用於二維圖形，並支援互動性、CSS 樣式與動畫。

發明者： 全球資訊網協會（W3C）年份： 2001MIME： image/svg+xml

將 SVG 轉換為 PNG

免費的瀏覽器端 SVG 轉 PNG 轉換器。在您的裝置上即時轉換檔案。

SVG 轉 PNG 轉換器

線上壓縮 SVG

具隱私保障 - 檔案絕不會離開您的裝置

壓縮 SVG

檢查與中繼資料

作業系統與檔案分析工具透過檢查開頭的二進位位元組序列來識別 SVG 檔案：

位元組層級標頭簽章（檔案簽章）

作業系統與檔案分析工具透過檢查開頭的二進位位元組序列來識別 SVG 檔案：

十六進位簽章（偏移量 0）：

3C 73 76 67

ASCII 表示法： <svg

標準化： W3C 建議標準（SVG 1.1 / SVG 2）

技術規格

容器架構	基於 XML 的文字標記文件，定義了 2D 向量幾何圖形
壓縮	Gzip / Brotli 文字壓縮（SVGZ 使用 gzip 壓縮）
位元組序	不適用（基於文字的 UTF-8 / UTF-16 字元串流）
色彩空間	sRGB, CSS Color Module 4（Display P3, lab, lch）
色版與結構	解析度無限的向量圖形、貝茲曲線、字型與不透明度遮罩
最大尺寸	與解析度無關（可無限縮放至任何檢視區域而不會產生像素化）
透明度	完全可變的 Alpha 透明度與 CSS 混合模式
串流與漸進式	瀏覽器 XML 解析器支援漸進式文字串流解析

技術比較矩陣：SVG 對比競爭格式

技術屬性	SVG (目前)	HTML5 Canvas	PDF	PNG
算繪模型	保留模式向量 DOM	即時模式點陣圖畫布	保留模式固定頁面容器	點陣像素網格
樣式與 CSS	可透過 CSS 類別與變數完全設定樣式	需要 JavaScript 畫布 API 重新繪製	無動態 CSS 樣式	固定點陣像素
無限縮放能力	是（數學向量曲線）	需要手動解析度縮放	是（向量元素）	否（放大時會產生像素化）
互動性	原生 DOM 事件（滑鼠停留、點擊、動畫）	需要手動點擊偵測數學運算	靜態文件	需要影像地圖或畫布

常見損壞模式與十六進位修復指南

瀏覽器顯示 XML 解析錯誤：未關閉的標記或不符的標籤。

根本原因: 格式錯誤的 XML 語法、遺失的結束標籤，或未轉義的「&」符號（應使用「&」）。

修復: 使用 XML linter（xmllint file.svg）進行驗證，並修正未成對的標籤。

安全性分析與解析器攻擊向量

由於 SVG 是支援「<script>」標籤與外部實體的可執行 XML，顯示不受信任的 SVG 可能會帶來顯著的 XSS 與 SSRF 風險。

已知攻擊向量

透過內嵌的 '<script>' 標籤或 'onload=' 事件處理常式發動儲存型跨網站指令碼（XSS）。
在後端伺服器上解析時，透過 XML 外部實體（XXE）攻擊讀取本機伺服器檔案。
十億笑話（Billion Laughs）XML 實體擴充導致阻斷服務。

防禦最佳實務: 嵌入前一律使用 DOMPurify 將 SVG 進行清理，或透過 'Content-Security-Policy: default-src 'none'' 或作為會自動停用指令碼的 '<img>' 標籤來提供 SVG。

歷史起源與里程碑

2018W3C SVG 2 候選建議標準整合了現代 CSS 樣式。

2011SVG 1.1（第二版）有助於在桌機與行動裝置瀏覽器上建立對 SVG 的廣泛支援。

2001W3C 發布由 VML 與 PGML 提案發展而來的 SVG 1.0 規格。

主要優勢與優點

無限的解析度獨立性：在任何顯示器或列印比例下都能呈現清晰的線條與字型。
針對標誌、圖示和 UI 介面元素具有極小的檔案大小。
可透過瀏覽器 DOM 中的 CSS 與 JavaScript 完全編寫指令碼並設定樣式。

技術限制與缺點

不適合用於相片或複雜的連續色調影像。
具有數千個節點的複雜向量路徑可能會導致 CPU 算繪延遲與高耗電量。
XML 的特性允許嵌入指令碼，因此在算繪不受信任的上傳檔案之前需要進行嚴格的淨化。

有趣的技術冷知識

Gzip 可以大幅減少某些 SVG 檔案的大小；縮減幅度取決於文件內容與壓縮設定。
viewBox 屬性定義抽象的座標畫布，可動態對應至實體螢幕像素。
早期網路瀏覽器最初缺乏原生的 SVG 引擎，促使 Adobe 在 2011 年左右原生瀏覽器支援確立之前，發布了 Adobe SVG Viewer 瀏覽器外掛程式。

常見技術問題

SVG 檔案可以包含惡意程式碼嗎？

可以。由於 SVG 是有效的 XML，它可能包含內嵌的 JavaScript（'<script>'），如果直接在瀏覽器中載入 SVG 或在行內 '<svg>' 元素中開啟，就會執行這些程式碼。透過 '<img>' 標籤提供 SVG 會自動阻止指令碼執行。

什麼時候該使用 SVG 而非 PNG？

當您需要圖示、標誌、圖表、插圖與字型，且要求在所有螢幕尺寸上都能清晰縮放並維持小檔案大小時，請使用 SVG。相片則請使用 PNG 或 WebP。

如何最佳化大型或複雜的 SVG 檔案？

您可以使用 SVGO 等工具或執行 SVG 壓縮，移除冗餘的中繼資料、編輯器註解（來自 Inkscape 或 Illustrator）、隱藏群組與未使用的命名空間宣告，以清理向量路徑。