HTML5での描画を実現するSVGとCanvasを改めて比較する ｜ SiTest (サイテスト) ブログ

こんにちは、SiTest事業部エンジニアの森永です。

HTML5において描画を行う方法としてサポートされており、よく使われているものとしてSVGとCanvasが挙げられます。これらが正式にサポートされWebサイトにおける描画が行えるようになり、幅広く使われるようになりました。

HTML5の正式勧告前から使用できるブラウザも多かったため既にご存じの方も多いかと思いますが、今回は改めてSVGとCanvasについて比較してみます。

SVGとCanvasでは描画の仕方、記述の仕方が違います。

【SVG】

• ベクター形式で描画
• 図形一つ一つが<svg>タグの子要素であるDOM要素として記載される
• 図形の組み合わせを拡張子”.svg”の外部ファイルとして扱うことも可能
• SVGファイルはAdobe Illustratorで読み出し、保存が可能
• 図形がDOM要素なのでJavaScriptでの変形などが行いやすい

SVG サンプルコード

<svg width="200px" height="200px">
  <rect width="100px" height="100px" fill="#0000ff"/>
</svg>

【Canvas】

• ラスター形式(ビットマップ形式)で描画
• <canvas>要素で描画領域(キャンバス)を確保し、JavaScriptを用いて描画する
• 描画した画像を別形式(PNGなど)で保存しやすい

Canvas サンプルコード

●HTML

<canvas id="canvas" width="200" height="200"></canvas>

●JavaScript

var canvas=document.getElementById("canvas");
car context=canvas.getContext("2d");
context.fillStyle="rgb(0,0,255)";
context.fillRect(0,0,100,100);

サンプルコードではSVG、Canvasいずれも幅、高さ100pxの青色の正方形が描画されます。

「SVGとCanvasのどちらを使うべきか？」についての議論は以前からしばしばされており、ネット上でも多数の記事がありますが、結局のところ、どちらを使うべきかは一概には言えず、SVGの方が適しているケース、Canvasの方が適しているケースがあるといえます。

SVGの方が適しているケース

• 円、四角形などの図形の組み合わせで構成されているケース
• ベクター形式なので拡大、縮小で図形の劣化が少ない方が良いケース
• 外部ファイルとして受け渡しを行い、別のHTML上でも表示させたいケース

Canvasの方が適しているケース

• ビットマップ形式なのでピクセル単位での細かい描画を行いたいケース
• 描画した画像を別形式の画像(PNGなど)で保存したいケース

SVGもCanvasもそれぞれのメリットを活かしたサイトが数多くあります。

【SVG】

SVGは外部ファイルとして扱いやすいので、独立した画像として設置しているサイトやアイコンなどでよく利用されています。

例えば、以前紹介したStylusの公式サイトでは、StylusのロゴをSVGで実現しています。また、Iconfinderのように、数多くのアイコンがSVG形式で公開されておりダウンロード可能なサイトも有ります。

【Canvas】

一方Canvasでは、細かい描画を活かしたいサイトに向いています。描画機能とJavaScriptなどを組み合わせて、pacman-canvasなどCanvasを使ったゲームも数多く公開されております。

弊社のSiTestでもシーンに応じて使い分けており、例えばゲイズプロットではSVGを、

マウスグラフィではCanvasを使用しています。

先日の記事で紹介したHTML5.1においても、もちろん引き続きSVG/Canvasは使用され続けることになります。

シーンに応じて使い分けて、HTML5での描画を効果的に行いましょう！

【参考】

SVG と Canvas: どちらを選ぶか
https://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx

svg vs canvas @html5
http://qiita.com/Itomaki/items/9d3872f89e1fa07404d6