canvas與svg特性和使用對比
阿新 • • 發佈：2018-12-17
什麼是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域，您可以控制其每一畫素。
canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。
什麼是SVG？
- SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
- SVG 用於定義用於網路的基於向量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 影象在放大或改變尺寸的情況下其圖形質量不會有損失
- SVG 是全球資訊網聯盟的標準
SVG 的優勢
與其他影象格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
- SVG 影象可通過文字編輯器來建立和修改
- SVG 影象可被搜尋、索引、指令碼化或壓縮
- SVG 是可伸縮的
- SVG 影象可在任何的解析度下被高質量地列印
- SVG 可在影象質量不下降的情況下被放大
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪製的圖形均被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
Canvas
Canvas 通過 JavaScript 來繪製 2D 圖形。
Canvas 是逐畫素進行渲染的。
在 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>