Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<canvas> / <svg>

『canvas』はJavaScriptで図形・画像・アニメーションを描画するための領域を定義する要素で、『svg』はXMLベースのベクター画像をHTML内に直接記述するための要素です。

構文

<!-- canvas: JavaScriptで描画する領域 -->
<canvas id="myCanvas" width="400" height="200"></canvas>

<!-- SVG: ベクターグラフィックをHTMLに直接記述 -->
<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="10" y="10" width="180" height="80" fill="#4488ff" rx="8"/>
  <text x="100" y="55" text-anchor="middle" fill="white">Hello SVG</text>
</svg>

<!-- 外部SVGファイルを参照する -->
<svg>
  <use href="icons.svg#star"/>
</svg>

主な属性

属性	概要
width（canvas）	キャンバスの描画領域の横幅をピクセルで指定します。CSSの幅とは別物で、省略すると300pxになります。
height（canvas）	キャンバスの描画領域の縦幅をピクセルで指定します。省略すると150pxになります。
width（svg）	SVGの表示横幅を指定します。ピクセルまたは相対値（%など）で指定できます。
height（svg）	SVGの表示縦幅を指定します。
viewBox	SVGの内部座標系を「x y width height」の形式で定義します。レスポンシブなSVGに必須の属性です。
use / href	SVGシンボルや外部ファイルのSVGを再利用する際に使います。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>canvas / SVGサンプル</title>
</head>
<body>

  <!-- canvasにJavaScriptで円を描く -->
  <canvas id="myCanvas" width="300" height="150"
    style="border: 1px solid #ccc;"></canvas>

  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // 青い円を描画
    ctx.beginPath();
    ctx.arc(150, 75, 60, 0, Math.PI * 2);
    ctx.fillStyle = "#4488ff";
    ctx.fill();

    // テキストを描画
    ctx.fillStyle = "white";
    ctx.font = "bold 20px sans-serif";
    ctx.textAlign = "center";
    ctx.fillText("Canvas", 150, 83);
  </script>

  <!-- SVGで星形を描く -->
  <svg width="100" height="100" viewBox="0 0 100 100">
    <polygon
      points="50,10 61,35 90,35 67,57 76,82 50,65 24,82 33,57 10,35 39,35"
      fill="#ffcc00"
      stroke="#cc8800"
      stroke-width="2"/>
  </svg>

</body>
</html>

実行結果

「Canvas」と書かれた青い円がキャンバス領域に描画されます。その横には黄色い星形のSVGが表示されます。

┌──────────────────────────────┐
│                              │
│         ( Canvas )           │
│                              │
└──────────────────────────────┘

  ★ （黄色い星が表示される）

概要

『canvas』と『svg』はどちらもブラウザ上でグラフィックを描画できますが、仕組みが異なります。『canvas』はピクセルベースのビットマップ描画で、JavaScriptで命令を実行するたびに画面に直接書き込みます。ゲームやリアルタイムアニメーションなど、毎フレーム描画が変化するような用途に向いています。『canvas』の内容はDOMに残らないため、アクセシビリティ対応が難しい点に注意してください。

一方、『svg』はXMLベースのベクターグラフィックで、描画した図形がDOMの要素として存在します。拡大しても画質が劣化しないため、アイコン・ロゴ・グラフなどに最適です。CSSでスタイルを変更したりJavaScriptでアニメーションさせたりも簡単にできます。

アイコンを使い回したい場合は、SVGスプライト（『defs』内に『symbol』を定義して『use』で参照）を活用すると効率的です。単純な図形の繰り返しや、サイズが変わっても綺麗に表示したいものには『svg』、フレームレートが重要な描画処理には『canvas』というように使い分けましょう。