簡介
SVG 是一種 XML 語言，類似於 XHTML，可用於繪製向量圖形，例如下圖所示。它可以透過指定所有必要的線條和形狀，或透過修改已有的柵格影像，或透過兩者的組合來建立影像。影像及其元件還可以進行變換、合成或濾鏡處理，以完全改變其外觀。
SVG 於 1999 年問世，此前有幾個競爭格式被提交給 W3C 並未能完全批准。SVG 得到了所有主要 瀏覽器 的支援。缺點是載入 SVG 可能會很慢。SVG 確實提供了優勢，其中一些包括擁有可用的 DOM 介面，並且不需要第三方擴充套件。是否使用它通常取決於您的具體用例。
基本要素
HTML 提供了用於定義標題、段落、表格等的元素。同樣，SVG 提供了用於圓形、矩形以及簡單和複雜曲線的元素。一個基本的 SVG 文件除了根元素 <svg> 和構建圖形的幾個基本形狀之外，別無他物。此外，還有一個 <g> 元素，用於將幾個基本形狀組合在一起。
從這個基本結構開始，SVG 影像可以變得任意複雜。SVG 支援漸變、旋轉、濾鏡效果、動畫、與 JavaScript 的互動等。但所有這些額外的語言功能都依賴於這一相對較小的元素集來定義圖形區域。
開始之前
有許多可用的繪圖應用程式，例如 Inkscape，它們是免費的，並使用 SVG 作為其原生檔案格式。但是，本教程將依賴於可靠的 XML 或文字編輯器（任您選擇）。目的是教授那些想了解 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 規範所取代，該規範於 2018 年成為候選推薦標準，是當前標準。SVG 2.0 遵循與 CSS 類似的方法，將元件拆分為幾個鬆散耦合的規範，例如 SVG strokes、SVG paths 和 SVG markers。
除了完整的 SVG 推薦標準外，W3C 的工作組於 2003 年推出了 SVG Tiny 和 SVG Basic。這兩個配置檔案主要面向移動裝置。第一個，SVG Tiny，應該為功能較弱的小型裝置提供圖形原語。SVG Basic 提供了許多完整 SVG 的功能，但省略了那些難以實現或渲染開銷大的功能（如動畫）。2008 年，SVG Tiny 1.2 成為 W3C 推薦標準。
曾有關於 SVG Print 規範的計劃，該規範將增加對多頁和增強色彩管理的支援。這項工作已被中止。