什麼是SVG？
- SVG表示可縮放矢量圖形
- SVG是用來定義網頁圖形
- SVG是W3C推薦
可縮放矢量圖形（SVG）是用於二維圖形具有用於交互和動畫支持一個基於XML的矢量圖像格式。 SVG規範是自1999年以來由萬維網聯盟（W3C）開發的開放標準。
SVG圖像及其行為以XML文本文件中定義。 這意味著它們可以被搜索，索引，腳本和壓縮。 為XML文件，可以創建SVG圖像，並用任何文本編輯器，以及與繪圖軟件編輯。
所有主要的現代Web瀏覽器，包括Mozilla的Firefox，IE瀏覽器，谷歌Chrome，歌劇，Safari和微軟邊沿有SVG渲染支持。
的HTML <svg>元
的HTML <svg>元件(introduced in HTML5)是用於SVG圖形的容器。
SVG有吸引路徑，矩形，圓形，文本和圖形圖像的幾種方法。
瀏覽器支持
在表中的數字指定完全支持所述第一瀏覽器版本<svg>元素。
| 元件 | |||||
|---|---|---|---|---|---|
| <svg> | 4 | 9 | 3.0 | 3.2 | 10.1 |
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矩形
RGB（0,0,0）“>
例
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
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。
例
<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對不起，您的瀏覽器不支持嵌入式SVG。
例
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</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>
Sorry, your browser does not support inline SVG.
</svg>
SVG和差異Canvas
SVG是一種用XML描述二維圖形的語言。
Canvas繪製2D圖形，上飛(with a JavaScript)
SVG是基於XML的，這意味著每一個元素是SVG DOM內可用。 您可以將JavaScript事件處理程序的元素。
在SVG中，每個繪製形狀記住作為一個對象。 如果SVG對象的屬性被改變時，瀏覽器可以自動重新呈現的形狀。
畫布是由像素渲染像素。 在畫布上，一旦圖形繪製，它是由瀏覽器遺忘。 如果它的位置應該改變，整個場景需要重新繪製，包括可能已覆蓋圖形的任何對象。
Canvas和SVG的比較
下表顯示了Canvas和SVG之間的重要差別：
| Canvas | SVG |
|---|---|
|
|
要了解更多有關SVG，請閱讀我們的SVG教程 。