<svg> 跟 <canvans> 有一些相同之處，
它們都是處理網頁上的圖像，並且標籤本身只是個像是畫布的容器，必須寫入內容才會顯示畫面。

<svg> 跟 <canvans> 的不同為以下幾點：

<canvans> 是由 javascript 控制圖形的產生，
<svg> 則是使用類似標籤的方式去控制圖形。

<canvans> 是以畫素處理，所以當 javascript 將圖形畫好，
會把圖形轉存成圖片，並且瀏覽器的畫面不會主動隨文件更新。

<svg> 所繪製的圖形是向量格式，可以自由縮放不會造成圖形鋸齒與模糊，
甚至在更動文件之後，圖形會隨之改變。

兩個有各自的用途，熟悉不同之處就可以妥善的運用，
以下為 <svg> 的用法 :

<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:orange;stroke:yellow;stroke-width:5;" />
</svg>

rect 代表繪製方形，將 X、Y 軸以及寬高設定好後，就能用 CSS 去修改圖形樣式。

再示範個比較複雜的圖形 :

<svg width="400" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:yellow;stroke:none;stroke-width:5;fill-rule:evenodd;" />
</svg>

polygon points 是以點來連接圖形，只要標出每個點的 X、Y 軸並用空格隔開即可。

CSS 裡屬性 - fill : 填色。
stroke : 筆畫。
stroke-width : 筆畫寬度。
fill-rule : 填色方式， 共有 nonzero 、 evenodd 、inherit 三種方式，都可以嘗試看看。