SVG:可縮放向量圖形
可縮放向量圖形 (SVG) 是一種基於 XML 的標記語言,用於描述二維 向量圖形。
因此,它是一種基於文字的開放式 Web 標準,用於描述可以以任何尺寸清晰渲染的影像,並且專門設計用於與其他 Web 標準(包括 CSS、DOM、JavaScript 和 SMIL)良好配合。本質上,SVG 之於圖形,就像 HTML 之於文字。
SVG 影像及其相關行為定義在 XML 文字檔案中,這意味著它們可以被搜尋、索引、指令碼化和壓縮。此外,這意味著它們可以透過任何文字編輯器或繪圖軟體建立和編輯。
與傳統的點陣圖影像格式(如 JPEG 或 PNG)相比,SVG 格式的向量影像可以在任何尺寸下渲染而不會損失質量,並且可以透過更新其中的文字輕鬆本地化,而無需圖形編輯器來完成。透過適當的庫,SVG 檔案甚至可以進行即時本地化。
SVG 自 1999 年以來一直由 全球資訊網聯盟 (W3C) 開發。
教程
SVG 教程旨在引導您完成相關主題的學習,假設您沒有任何先驗經驗,從基礎開始,逐步過渡到更高階的技術。
- 從零開始介紹 SVG
-
本教程旨在解釋 SVG 的內部原理,幷包含大量技術細節。如果您只想繪製精美的影像,您可能會在 Inkscape 的文件頁面 上找到更有用的資源。W3C 的 SVG Primer 也提供了對 SVG 的良好介紹。還可以檢視這個以聖誕倒計時為主題的 SVG 教程,它將引導您編寫 25 個節日 SVG。
指南
SVG 指南可以幫助您在 Web 上使用 SVG,涵蓋嵌入、MIME(媒體)型別、處理指令碼、動畫、濾鏡等主題。
- 將 SVG 效果應用於 HTML 內容
-
現代瀏覽器支援在 CSS 樣式中使用 SVG,以對 HTML 內容應用圖形效果。
- 內容型別
-
SVG 使用多種資料型別。本文列出了這些型別及其語法和用途描述。
- 名稱空間速成課
-
名稱空間對於支援多種 XML 方言的使用者代理至關重要。瀏覽器必須非常嚴格;現在花時間理解名稱空間將為您節省未來的麻煩。
- 指令碼
-
有幾種方法可以使用 JavaScript 建立和操作 SVG。本文件描述了事件處理、互動性和處理嵌入式 SVG 內容。
- 使用 SMIL 的 SVG 動畫
-
SMIL 是一種基於 XML 的語言,用於編寫互動式多媒體簡報。作者可以在 SVG 中使用 SMIL 語法來定義動畫元素的計時和佈局。
- SVG 作為影像
-
SVG 可用作 HTML、CSS、某些 SVG 元素以及透過 Canvas API 中的影像格式。本頁面列出了您可以提供 SVG 作為影像源的功能。
- SVG 濾鏡
-
SVG 支援濾鏡,因此作者可以應用陰影或模糊等效果,甚至合併不同濾鏡的結果。
- SVG 在 HTML 中的介紹
-
本文展示瞭如何使用內聯 SVG,幷包含示例進行說明。
參考
SVG 參考文件包含有關元素、屬性和 DOM 介面的全面資訊,並列出了相關的規範和標準文件。
- SVG 元素
-
用於構建、繪製和佈局向量圖形的 SVG 元素。
- SVG 屬性
-
可用的 SVG 屬性,可用於指定元素的處理或渲染方式。
- SVG DOM 介面
-
用於使用 JavaScript 與 SVG 互動的 SVG DOM API。