This page was translated from English by the community. Learn more and join the MDN Web Docs community.

SVG

由此開始
本教程將輔助你開始使用 SVG。

可縮放向量圖形 (Scalable Vector Graphics，SVG) 是用於描述二維向量圖形的 XML 標記語言。基本上，SVG 用於圖形，而 XHTML 用於文字。

SVG 類似 Adobe 專有的 Flash 技術，SVG 與 Flash 兩者最大的分別在於 SVG 為 W3C 所推薦 (即標準)，並以 XML 為基礎，而非封閉的二進制格式。SVG 設計為與其他 W3C 標準 (如 CSS、DOM 及 SMIL) 一同運作。

為何使用 SVG？

更好的圖形格式: SVG 是一種向量圖形格式。向量圖形可縮可放，圖形完全不會失真，為像素圖形所不能及。

增強 HTML 內容的表現: SVG 可和 HTML、CSS 及 JavaScript 一同運作。使用 SVG 增強普通 HTML 頁面或 web 應用程式。

如何在 XHTML 中使用 SVG 教程
Google Maps (路徑圖) & Docs (試算表繪圖)
SVG 泡沫選單

Mozilla 裡的 SVG: SVG 如何在 Mozilla 裡實作的註解和資訊。

Firefox 目前已實作 SVG 1.1 規範
SVG 編寫指南
Mozilla SVG 專案概述
有關 SVG 和 Mozilla 的問答集

工具

動畫和互動: 如同 HTML，SVG 也有一個 DOM、事件，並且可由 JavaScript 存取。這可讓開發者建立豐富的動畫和互動式圖形。

Firefox extension (Grafox) to add a subset of SMIL animation support
Interactive photos manipulation
HTML transformations using SVG's foreignObject
Animated art

繪圖、圖表、遊戲 & 3D 實驗: 只需少許 SVG 即可增強網頁內容，這裡有一些重量級 SVG 用法的範例。

Tetris, Yet Another SVG Tetris & Connect 4
Find the State game
US popuplation map & Germany population chart
3D box & 3D boxes
SVG+DOM based drawing tool

Community

View Mozilla forums...

SVG Wiki

關聯主題

Categories

Interwiki Language Links