SVGとCanvasの違いについて

どちらもウェブページに図形や画像を描画するために使用されますが、それぞれ異なる特徴や用途があります。今回では、SVGとCanvasの違いについて解説します。

SVG
Canvas
SVGとCanvasの違い
どちらを選ぶべきか
同じ矩形と円を描画する例
まとめ

SVG

SVGは、XMLベースのベクター画像フォーマットです。

ベクター画像は、数学的な形状や座標を使用して描画されるため、拡大・縮小しても画質が劣化しません。

SVGの主な特徴は以下のとおりです。

ベクターグラフィックスであるため、拡大・縮小しても画質が劣化しない
XMLベースであり、テキストエディタで編集可能
DOM（Document Object Model）を持ち、CSSやJavaScriptで操作できる
アニメーションやイベントハンドラをサポートしている

Canvas

Canvasは、ビットマップグラフィックスを描画するためのHTML5の要素です。

ピクセル単位で描画されるため、拡大すると画質が劣化することがあります。

Canvasの主な特徴は以下のとおりです。

ビットマップグラフィックスであるため、拡大すると画質が劣化することがある
JavaScriptを使用して描画するため、動的なコンテンツの作成に適している
パフォーマンスが高く、ゲームやアニメーションなどの高速描画が必要な場面で利用される
DOMを持たないため、CSSやイベントハンドラを直接使用できない

SVGとCanvasの違い

表現形式：SVGはベクター画像、Canvasはビットマップ画像
操作性：SVGはDOMを持ちCSSやJavaScriptで操作できるが、CanvasはJavaScriptのみで操作する
アニメーション：SVGはアニメーションやイベントハンドラをサポート、CanvasはJavaScriptでアニメーションを実装
パフォーマンス：SVGは複雑なグラフィックスやアニメーションでパフォーマンスが低下することがあるが、Canvasは高速描画が可能
用途：SVGは図形やアイコン、シンプルなアニメーションに適しているが、Canvasはゲームや複雑なアニメーション、動的なコンテンツに適している

どちらを選ぶべきか

SVGとCanvasの選択は、用途によって異なります。

以下のような場合には、SVGが適しています。

シンプルな図形やアイコンを描画する場合
イラストや図表などの拡大・縮小に対応した画像が必要な場合
CSSやJavaScriptで操作したい場合

一方、以下のような場合には、Canvasが適しています。

ゲームや複雑なアニメーションを実装する場合
大量の画像や図形を高速で描画する必要がある場合
ピクセル単位での画像操作が必要な場合

同じ矩形と円を描画する例

以下に、SVGとCanvasを使って同じ矩形と円を描画する例を示します。

SVGで矩形と円を描画する例：

 <svg width="200" height="200">
    <rect x="10" y="10" width="100" height="50" fill="#8cb4ff" />
    <circle cx="150" cy="40" r="30" fill="pink" />
  </svg>

Canvasで矩形と円を描画する例：

  <script>
    function draw() {
      var canvas = document.getElementById("20230319");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "#8cb4ff";
        ctx.fillRect(10, 10, 100, 50);

        ctx.fillStyle = pink";
        ctx.beginPath();
        ctx.arc(150, 40, 30, 0, Math.PI * 2, true);
        ctx.fill();
      }
    }

    window.onload = draw;
  </script>
 <div>
    <canvas id="20230319" width="200" height="200"></canvas>
  </div>

これらのコード例では、SVGとCanvasを使用して同じ矩形と円を描画しています。

SVGの場合は、<rect>と<circle>要素を使って図形を描画しています。

一方、Canvasの場合は、JavaScriptを使用して図形を描画しています。

どちらの方法でも、ウェブページ上に同じような図形が表示されますが、描画方法と操作性が異なります。

まとめ

HTML5のSVGとCanvasは、それぞれ異なる特徴と用途を持つグラフィックス技術です。

SVGはベクター画像を扱い、拡大・縮小に対応しやすく、CSSやJavaScriptで操作できる特徴があります。一方、Canvasはビットマップ画像を扱い、高速描画や動的なコンテンツに適しています。

はくです。お役に立てましたら幸いです。ご不明点やご質問がございましたら、お気軽にコメント欄よりお問い合わせください。