HTML入門 | HTML5グラフィック | Canvas vs SVG
Canvas vs SVG
canvas要素とsvg要素は、ほぼ同じ結果を得られる似た動作をする要素である。
場合によってはcanvas要素を使う方がよく、別の場合にはsvg要素を使う方がよいことがある。
作業環境による選択基準
次の図は、画面サイズとピクセル数によるレンダリング時間(rendering time)を示している。
レンダリング(rendering)とは、プログラムを使ってモデルから映像や画面を作り出す過程を指す。
したがってレンダリング時間とは、コードを実行してその結果が画面に表示されるまでの時間を意味する。
CanvasとSVGの性能比較
- canvas要素の性能は、画面が小さい場合やピクセル数が多い場合(>10k)に優れている。
- svg要素の性能は、画面が大きい場合やピクセル数が少ない場合(<10k)に優れている。
したがって、各作業環境に合ったグラフィック要素を選択して使うのが最もよい。
作業種類による選択基準
次の図は、canvas要素とsvg要素を使うときの選択基準を示している。
- canvas要素は、複雑で高性能なアニメーション(animation)作業や動画操作などに適している。
- svg要素は、高品質な文書作業や静的画像の操作などに適している。
したがって、各作業種類に合ったグラフィック要素を選択して使うのが最もよい。
CanvasとSVGの違い
| Canvas | SVG |
|---|---|
| ピクセル(pixel)ベース | 形状(shape)ベース |
| 単一のHTML要素 | DOMの一部になる複数のグラフィック要素 |
| スクリプト(script)からのみ修正できる。 | スクリプト(script)およびCSSからも修正できる。 |
| グラフィックが主作業であるゲームに適している。 | レンダリング領域が広いアプリケーション(application)に適している。 |