SVG 教程

SVG 指的是可縮放矢量圖形（Scalable Vector Graphics）。

SVG 以 XML 格式定義基于矢量的圖形。

每章中的實例

通過使用我們的“親自試一試”編輯器，您可以編輯 SVG，然后單擊按鈕查看結果。

SVG 實例

<html>
<body>
<h1>我的第一個 SVG</h1>
<svg width="100" height="100">
  <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 與其他 W3C 標準集成，例如 DOM 和 XSL

SVG 是 W3C 推薦標準

SVG 1.0 于 2001 年 9 月 4 日成為 W3C 推薦標準。

SVG 1.1 于 2003 年 1 月 14 日成為 W3C 推薦標準。

SVG 1.1（第二版）于 2011 年 8 月 16 日成為 W3C 推薦標準。

SVG 的優勢

與其他圖像格式（如 JPEG 和 GIF）相比，使用 SVG 的優點是：

  • SVG 圖像可以使用任何文本編輯器進行創建和編輯
  • SVG 圖像可以被搜索、索引、腳本化和壓縮
  • SVG 圖像是可擴展的
  • SVG 圖像可以在任何分辨率下高質量打印
  • SVG 圖像是可縮放的
  • SVG 圖形在縮放或調整大小時不會損失任何質量
  • SVG 是一個開放標準
  • SVG 文件是純 XML

創建 SVG 圖像

SVG 圖像可以使用任何文本編輯器創建，但使用繪圖程序（例如 Inkscape）創建 SVG 圖像通常更方便。