SVG 教程
SVG 代表可縮放向量圖形。
SVG 以 XML 格式定義向量圖形。
SVG 圖形是可縮放的，在縮放或調整大小時不會損失任何質量。
所有主要瀏覽器都支援 SVG。
每章中的示例
使用我們的“自己動手”編輯器，您可以編輯 SVG，然後單擊按鈕檢視結果。
SVG 示例
<html>
<body>
<h1>我的第一個 SVG</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
自己動手試一試 »
您應該已經知道
在繼續之前，您應該對以下內容有基本瞭解
- HTML
- 基本 XML
如果您想先學習這些主題，請在我們首頁上查詢教程。
什麼是 SVG？
- SVG 代表可縮放向量圖形
- SVG 用於定義 Web 的向量圖形
- SVG 以 XML 格式定義圖形
- SVG 檔案中的每個元素和屬性都可以設定動畫
- SVG 是 W3C 的推薦標準
- SVG 與其他標準整合，例如 CSS、DOM、XSL 和 JavaScript
SVG 是 W3C 推薦標準
SVG 1.0 於 2001 年 9 月 4 日成為 W3C 推薦標準。
SVG 1.1 於 2003 年 1 月 14 日成為 W3C 推薦標準。
SVG 1.1 (第二版) 於 2011 年 8 月 16 日成為 W3C 推薦標準。
SVG 的優勢
使用 SVG 相對於其他影像格式（如 JPEG 和 GIF）的優勢在於
- SVG 影像可以使用任何文字編輯器建立和編輯
- SVG 影像可以被搜尋、索引、指令碼化和壓縮
- SVG 影像是可縮放的
- SVG 影像可以以任何解析度高質量列印
- SVG 影像是可縮放的
- SVG 圖形在縮放或調整大小時不會損失任何質量
- SVG 是一個開放標準
- SVG 檔案是純 XML
它是如何工作的？
SVG 具有用於矩形、圓形、橢圓、線條、多邊形、曲線等的元素和屬性。
SVG 還支援濾鏡和模糊效果、漸變、旋轉、動畫、JavaScript 互動等。
一個簡單的 SVG 文件由 <svg> 根元素和幾個基本的形狀元素組成，它們共同構建一個圖形。
建立 SVG 影像
SVG 影像可以使用任何文字編輯器或繪圖程式（如 Inkscape）建立。
為了讓您學習 SVG 的概念和基礎知識，本教程將僅使用純文字來教授您 SVG。
下一頁將展示如何將 SVG 影像直接嵌入 HTML 頁面！
