區別：1、canvas畫的是位圖，而svg畫的是矢量圖；2、canvas節點多時渲染較快，而svg節點多時渲染較慢；3、svg支持分層和事件，而canvas不支持；4、canvas依賴分辨率，而svg不依賴分辨率。

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3動畫效果屬性canvas和svg的區別是什么

Canvas主要是用筆刷來動態畫2D圖

SVG主要是用標簽來繪制不規則的矢量圖

兩個都主要是用來畫2D圖形的

不同點：

• Canvas畫的是位圖，但是SVG畫的是矢量圖

• SVG節點多時渲染慢，Canvas性能更好，但是寫起來比較復雜

• SVG支持分層和事件，Canvas不支持，但是可以用庫來實現

• Canvas依賴分辨率，SVG不依賴分辨率

• Canvas繪制出來的圖形不會出現在DOM當中，但是SVG繪制的會出現在DOM當中

Canvas優勢：

適合游戲等場所，同時Canvas繪制出來的圖形可以導出

SVG優勢：

因為是矢量圖，所以放大之后也不會失真，支持事件處理，文字獨立，可以進行編輯和搜索

（學習視頻分享：css視頻教程）