VG 表示可伸縮向量圖形，這是一門用於描述 2D 圖形的語言，圖形應用使用 XML 編寫，然後 XML 由 SVG 閱讀器程式呈現。
SVG 主要用於向量類型的圖表，例如圓餅圖，X，Y 座標系統中的二維圖等等。
SVG 在 2003 年 1 月 14 日成為 W3C 推薦標準，你可以在 SVG 規範 頁面中查看最新版本的 SVG 規範。
查看 SVG 檔案
大多數 Web 瀏覽器都可以顯示 SVG，就像它們可以顯示 PNG，GIF 以及 JPG 圖形。 IE 使用者可能需要安裝 Adobe SVG 閱讀器 以便能夠在瀏覽器中查看 SVG。
在 HTML5 中嵌入 SVG
HTML5 允許我們直接使用 __ 標籤嵌入 SVG，以下是簡單的語法：
XML/HTML Code複製內容到剪貼簿
- svg xmlns=xmlns="http://www. w3.org/2000/svg">
-
-
...
svg
>
HTML5 - SVG 圓
下面是一個 SVG 範例的 HTML5 版本，用 標籤繪製一個圓：
XML/HTML Code複製內容到剪貼簿
- html>
-
頭>
-
標題>SVG標題>
-
元 字符集=字符集=字符集
/>-
頭
>-
身體
>-
h2>HTML5 SVG 圓 h2
>-
svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
-
圓圈 id=“紅圈” cx="50" cy cycycycycycycycycycycycycycycy「50」 r
=-
「50」 =「紅」
/>-
svg
>-
身體
>
html
>
在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：
HTML5 - SVG 曲線下面是 SVG 範例的 HTML5 版本，用
; 標籤大致上一個：
XML/HTML 程式碼將內容複製到剪貼簿
- html>
-
頭>
-
標題>SVG標題>
-
元 字符集=字符集=字符集
/>-
頭
>-
身體
>-
h2>HTML5 SVG 矩形 h2
>-
svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
-
矩形 id="redrect" 寬度="300" 高 「100」 填色=「紅」「紅色」
svg-
>
身體-
>
html
>
在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：
HTML5 - SVG 線條下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤稀疏一個線條：
XML/HTML 程式碼將內容複製到剪貼簿
- html>
-
頭>
-
標題>SVG標題>
-
元 字符集=字符集=字符集
/>-
頭
>-
身體
>-
h2>HTML5 SVG 線HTML5 SVG 線
h2-
>
svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」
>-
行 x1="0" y1="0" x >「200」 y2=「100」
- 樣式="筆畫:紅色;="筆畫:紅色;
-
svg>
-
身體>
-
html>
你可以使用 style 屬性為它設定額外的樣式訊息，例如筆畫，填滿顏色，筆畫寬度等等。
在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：
HTML5 - SVG 橢圓
下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤相當於一個平坦：
XML/HTML 程式碼
將內容複製到剪貼簿
- html>
-
頭>
-
標題>SVG標題>
-
元 字符集=字符集=字符集
/>-
頭
>-
身體
>-
h2>HTML5 SVG 橢圓 h2
>-
svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
-
橢圓 cx="100" cy="50" 「100」 ry=「50」 =「紅」 />
-
svg>
-
身體>
-
html>
在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：
HTML5 - SVG 操作
下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤相當於一個營業：
XML/HTML 程式碼
將內容複製到剪貼簿
- html>
-
頭>
-
標題>SVG標題>
-
元 字符集=字符集=字符集
/>-
頭
>-
身體
>-
h2>HTML5 SVG 多邊形HTML5 SVG 多邊形 h2
- >
svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
-
多邊形 點 300,20, 170,50" 填入=「紅」=「紅」
>-
svg
>-
身體
>-
html
>
在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：
HTML5 - SVG 折線
下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤相當一個折線圖：
XML/HTML 程式碼將內容複製到剪貼簿
- html>
-
頭>
-
標題>SVG標題>
-
元 字符集=字符集=字符集
/>-
頭
>-
身體
>-
h2>HTML5 SVG 折線 h2>
-
svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
-
折線 點=點= 0,20 20,20 20,40 40,40 40,60" 填充=填充=
「紅色」-
=「紅色」。 > />
-
svg>
-
身體>
html
>
在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：
HTML5 - SVG 更新
下面是一個 SVG 範例的 HTML5 版本，用
; 標籤相當於一個平面圖，使用 標籤定義了 SVG 過渡。
我們可以以類似的方式使用 標籤建立 SVG 線性漸層。
XML/HTML 程式碼將內容複製到剪貼簿
- html>
-
頭>
-
標題>SVG標題>
-
元 字符集=字符集=字符集
/>-
頭
>-
身體
>-
h2>HTML5 SVG 漸變橢圓h2
>-
svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
-
defs>
-
徑向漸變 id="漸變" cx="50%" cy = 「50%」 r
=-
「50%」
fx="50%" "50%" 「50%」
- >
停止 偏移 偏移
- 偏移" 樣式="stop-color:rgb(200,200,200);
-
stop-opacity:0"/>
停止 偏移
- 偏移 偏移
- 樣式="stop-color:rgb(0,0,255);
stop-opacity:1"/>
-
徑向漸層>
defs> -
ellipse cx cx cx 🎜> cy="50" r "100" ry=
- "50" 🎜>
style="fill:url(#gradient)" 🎜>
-
svg>
-
body>
-
html>
在啟用 HTML5 的最新版 FireFox 中會產生以下結果：
