SVGとCanvasについて、概念と違いを理解する

フロントエンド開発では、グラフィックやアニメーションを処理する必要があることがあります。そのために、HTML5は主に2つの技術、SVGとCanvasを提供しています。この記事では、それらの概念と違いを紹介し、コード例を通じて理解を深めます。

SVGとは?

SVG(Scalable Vector Graphics)は、XMLベースのベクターグラフィックフォーマットです。スケーラブルであり、拡大や縮小しても劣化しません。SVG画像は、パス、線、テキストなどの基本的なグラフィック要素で構成され、これらの要素はDOM操作で変更できます。

SVGの例

1
<svg width="100" height="100">
2
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
3
</svg>

上記のコードは、赤い円形を描画し、黒い縁取りを施しています。この円の中心は座標(50, 50)にあり、半径は40です。

Canvasとは?

Canvas はHTML5で導入された、グラフィックを描画するための要素です。ピクセル単位の描画面であり、JavaScriptを使ってグラフィック描画操作を行います。SVGとは異なり、Canvasは大量のピクセル操作を処理するのに適しています。例えば、ゲーム内の画像レンダリングなどです。

Canvasの例

1
<canvas id="myCanvas" width="100" height="100"></canvas>
2
<script>
3
var canvas = document.getElementById("myCanvas");
4
var ctx = canvas.getContext("2d");
5
ctx.beginPath();
6
ctx.arc(50, 50, 40, 0, 2 * Math.PI);
7
ctx.fillStyle = "red";
8
ctx.fill();
9
ctx.lineWidth = 3;
10
ctx.strokeStyle = "black";
11
ctx.stroke();
12
</script>

この例では、Canvasを使用して赤い塗りつぶしの円を描画し、黒い縁取りを追加しています。

SVGとCanvasの違い

SVGとCanvasはどちらもグラフィック描画に使用できますが、いくつかの顕著な違いがあります。以下は両者の主要な違いです:

特徴SVGCanvas
描画方法ベクターグラフィックに基づくピクセルに基づく
拡大縮小グラフィックの品質を保ち、劣化しない拡大するとピクセル化する可能性
イベント処理DOMイベント(クリック、ホバーなど)をサポート直接サポートせず、手動計算が必要
アニメーションCSSやJavaScriptでアニメーション制御JavaScriptで手動更新が必要
ファイルサイズ通常は小さめ画像の複雑さによって異なり、大きくなる可能性
適用シーンチャート、グラフィック、地図、アイコンゲーム、データ可視化、画像処理

結論

SVGとCanvasはそれぞれ異なる利点を持っており、どちらの技術を選ぶかは具体的なアプリケーションシーンによります。高品質なベクターグラフィックとインタラクティビティが必要な場合はSVGが適しています。一方、大量のピクセル画像の処理や複雑なアニメーションの作成が必要な場合はCanvasが適しています。

この記事がSVGとCanvasの違いをより良く理解する手助けとなることを願っています。