HTML5 SVG與Canvas的區別

Gckkoo發表於2017-10-08
HTMLSVGCanvas

SVG和Canvas的區別

什麼是SVG？

（1）SVG指可伸縮向量圖形(Scal able Vector Graphics)

（2）SVG用於定義用於網路的基於向量的圖形

（3）SVG使用XML格式定義圖形

（4）SVG影像在放大或改變尺寸的情況下其圖形質量不會有損失

（5）SVG是全球資訊網的標準


SVG的優勢

（1）SVG影像可通過文字編輯器來建立和修改

（2）SVG影像可被搜、指令碼化或壓縮索、索引

（3）SVG是可伸縮的

（4）SVG影像可在任何的解析度下被高質量地列印

（5）SVG影像可在任何的解析度被高質量的列印

（6）SVG可在影像質量不下降的情況下被放大


canvas和SVG的區別：


Canvas

SVG

依賴解析度

不依賴解析度

不支援事件處理

支援事件處理

弱的文字渲染能力

最適合帶有大型渲染區域的應用程式

能夠以.png或.jpg格式儲存結果影像

複雜度高會減慢渲染速度（任何過度使用DOM的應用都不快）       

最適合影像密集型的遊戲，其中的許多物件會被頻繁重繪        

 不適合遊戲應用

相關文章