簡介

SVG 是一種類似於 XML 的語言，類似於 XHTML，可用於繪製向量圖形，例如下面所示的圖形。它可以用來建立影像，方法是指定所有必要的線條和形狀，修改現有的光柵影像，或者兩者結合使用。影像及其元件也可以進行變換、合成或過濾，以完全改變其外觀。

Mozilla dino logo

SVG 誕生於 1999 年，當時幾個競爭格式被提交給 W3C 但未能完全批准。SVG 受所有主要 瀏覽器 支援。缺點是載入 SVG 可能很慢。SVG 確實提供了好處，其中一些好處包括為其提供了可用的 DOM 介面，並且不需要第三方擴充套件。是否使用它通常取決於您的具體用例。

基本要素

HTML 提供了用於定義標題、段落、表格等的元素。同樣，SVG 提供了用於圓形、矩形以及簡單和複雜曲線的元素。一個簡單的 SVG 文件僅包含 <svg> 根元素和幾個構建圖形的基本形狀。此外，還有 <g> 元素，用於將幾個基本形狀組合在一起。

從這個基本結構開始，SVG 影像可以變得任意複雜。SVG 支援漸變、旋轉、濾鏡效果、動畫、與 JavaScript 的互動等等。但是，語言的所有這些額外功能都依賴於這套相對較小的元素來定義圖形區域。

開始之前

有一些繪圖應用程式可用，例如 Inkscape，它們是免費的，並使用 SVG 作為其原生檔案格式。但是，本教程將依賴於可靠的 XML 或文字編輯器（您的選擇）。目的是向想要了解 SVG 的人傳授 SVG 的內部知識，而最好的方法是親自動手進行一些標記。不過，您應該注意最終目標。並非所有 SVG 檢視器都是相同的，因此，為一個應用程式編寫的某些內容在另一個應用程式中可能不會完全相同地顯示，因為它們支援不同級別的 SVG 規範或您與 SVG 一起使用的其他規範（即，JavaScript 或 CSS）。

SVG 在所有現代瀏覽器中都受支援，在某些情況下，甚至可以追溯到幾個版本之前。可以在 Can I use 上找到一個相當完整的瀏覽器支援表。Firefox 從 1.5 版開始就支援一些 SVG 內容，並且從那時起，隨著每個版本的釋出，支援級別都在不斷提高。希望透過本教程，MDN 可以幫助開發人員跟上 Gecko 與其他一些主要實現之間的差異。

在開始之前，您應該對 XML 或其他標記語言（如 HTML）有基本的瞭解。如果您不太熟悉 XML，請記住以下一些指南

  • SVG 元素和屬性都應以此處顯示的大小寫輸入，因為 XML 區分大小寫（與 HTML 不同）。
  • SVG 中的屬性值必須放在引號內，即使它們是數字。

SVG 是一個龐大的規範。本教程試圖涵蓋基礎知識。一旦您熟悉了，您應該能夠使用 元素參考 和 介面參考 查詢您需要了解的任何其他資訊。

SVG 的型別

自 2003 年成為推薦標準以來，最新的“完整”SVG 版本是 1.1。它建立在 SVG 1.0 的基礎上，但增加了更多模組化功能以簡化實現。 SVG 1.1 的第二版 於 2011 年成為推薦標準。“完整”SVG 1.2 旨在成為 SVG 的下一個主要版本。它被即將推出的 SVG 2.0 棄用，SVG 2.0 目前正在大力開發中，它採用了類似於 CSS 3 的方法，即將元件拆分為多個鬆散耦合的規範。

除了完整的 SVG 推薦標準外，W3C 的工作組還在 2003 年推出了 SVG Tiny 和 SVG Basic。這兩個配置檔案主要針對移動裝置。第一個，SVG Tiny，應該為具有較低功能的小型裝置提供圖形基元。SVG Basic 提供了完整 SVG 的許多功能，但不包括難以實現或渲染繁重的功能（如動畫）。2008 年，SVG Tiny 1.2 成為 W3C 推薦標準。

曾計劃制定 SVG Print 規範，該規範將新增對多頁和增強顏色管理的支援。這項工作已停止。