HTML SVG 圖形
SVG（可縮放向量圖形）
SVG 定義 XML 中的向量圖形，可直接嵌入 HTML 頁面。
SVG 圖形是可縮放的，在縮放或調整大小時不會丟失任何質量
SVG 受所有主要瀏覽器支援。
什麼是 SVG？
- SVG 代表可縮放向量圖形
- SVG 用於定義 Web 的向量圖形
- SVG 以 XML 格式定義圖形
- SVG 檔案中的每個元素和屬性都可以設定動畫
- SVG 是 W3C 的推薦標準
- SVG 與其他標準整合，如 CSS、DOM、XSL 和 JavaScript
the <svg> 元素
HTML <svg> 元素是 SVG 圖形的容器。
SVG 有多種繪製路徑、矩形、圓形、多邊形、文字等的方法。
SVG 圓形
示例
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
自己動手試一試 »
SVG 矩形
示例
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
自己動手試一試 »
帶透明度和圓角的 SVG 矩形
示例
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
自己動手試一試 »
SVG 星形
示例
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
自己動手試一試 »
SVG 漸變橢圓和文字
示例
<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
抱歉，您的瀏覽器不支援內嵌 SVG。
</svg>
自己動手試一試 »
SVG 和 Canvas 之間的區別
SVG 是用於在 XML 中描述 2D 圖形的一種語言，而 Canvas 則使用 JavaScript 即時繪製 2D 圖形。
SVG 基於 XML，這意味著 SVG DOM 中的每個元素都可用。您可以為 SVG 圖形附加 JavaScript 事件處理程式。
在 SVG 中，每個繪製的形狀都被記為一個物件。如果 SVG 物件的屬性發生更改，瀏覽器可以自動重新渲染形狀。
Canvas 是逐畫素渲染的。在 Canvas 中，一旦圖形被繪製，瀏覽器就會將其遺忘。如果需要更改其位置，則必須重繪整個場景，包括可能被該圖形覆蓋的任何物件。
SVG 和 Canvas 的比較
下表顯示了 Canvas 和 SVG 之間的一些重要區別
| SVG | 畫布 |
|---|---|
|
|
SVG 教程
要了解更多關於 SVG 的資訊，請閱讀我們的 SVG 教程。
