canvas與svg特性和使用對比

什麼是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。css

畫布是一個矩形區域,您能夠控制其每一像素。html

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。html5

什麼是SVG?

  • SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
  • SVG 用於定義用於網絡的基於矢量的圖形
  • SVG 使用 XML 格式定義圖形
  • SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失
  • SVG 是萬維網聯盟的標準

SVG 的優點

與其餘圖像格式相比(好比 JPEG 和 GIF),使用 SVG 的優點在於:canvas

  • SVG 圖像可經過文本編輯器來建立和修改
  • SVG 圖像可被搜索、索引、腳本化或壓縮
  • SVG 是可伸縮的
  • SVG 圖像可在任何的分辨率下被高質量地打印
  • SVG 可在圖像質量不降低的狀況下被放大

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。瀏覽器

SVG 基於 XML,這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。網絡

在 SVG 中,每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化,那麼瀏覽器可以自動重現圖形。dom

Canvas

Canvas 經過 JavaScript 來繪製 2D 圖形。編輯器

Canvas 是逐像素進行渲染的。svg

在 canvas 中,一旦圖形被繪製完成,它就不會繼續獲得瀏覽器的關注。若是其位置發生變化,那麼整個場景也須要從新繪製,包括任何或許已被圖形覆蓋的對象。性能

二者比較一覽

Canvas Svg
基於像素的(動態png) 基於形狀的
單個html元素 多種多樣的形狀dom元素
只能經過script修改 script和css均可以修改
事件模型和用戶交互須要使用像素(x, y) 事件模型和用戶交互抽象到元素(rect, path)
繪圖面積小或者對象大於10k時性也能很好 繪圖面積很大或者對象小於10k的時候性能很好

使用場景舉例

  • svg
    1.靜態圖像
    2.高保真文檔(用於展現和打印)
  • canvas
    1.處理視頻
    2.複雜場景、實時複雜數學動畫
    3.基於圖像位置的快速計算處理

圖表和圖形

svg和canvas均可以表現圖表(如柱狀圖, 散點圖, 餅圖等等), 在選擇開源的第三方庫繪圖的時候應該要注意根據使用場景來選擇

如下狀況使用svg爲佳:

  • 數據源是或者相似xml(svg)文檔
  • 須要用戶交互
  • 使用到css就能夠知足大部分樣式需求

可是若是須要更高的速度, 那麼須要使用canvas:

  • 地圖交互: 查找路徑
  • 複雜工程流程圖
  • 網頁遊戲

Canvas和SVG的不一樣:

Canvas

  • 依賴分辨率
  • 不支持事件處理器
  • 弱的文本渲染能力
  • 可以以 .png 或 .jpg 格式保存結果圖像
  • 最適合圖像密集型的遊戲,其中的許多對象會被頻繁重繪
  • 是新出的html5標籤

SVG

  • 不依賴分辨率
  • 支持事件處理器
  • 最適合帶有大型渲染區域的應用程序(好比谷歌地圖)
  • 複雜度高會減慢渲染速度(任何過分使用 DOM 的應用都不快)
  • 不適合遊戲應用
  • 是xml標籤,很早就已經有了

在HTML5中的直接使用

     <!--老版本的svg的用法-->
     <iframe src="01.svg" width="300" height="100"></iframe>
     <!-- H5 新增了svg的標籤-->
        <svg width="400px" height="400px">
            <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="10" />
            <rect x="120" y="120" width="100" height="100" style="fill:green;stroke:red;stroke-width: 20;"/>
        </svg>
相關文章
相關標籤/搜索