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