<canvas> / <svg>

対応:		HTML5（2014）

『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を再利用する際に使います。

サンプルコード

sample_canvas_svg.html

<!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"); // 『getContext("2d")』はキャンバスの2D描画機能を取得します。返される『ctx』オブジェクトを通じて図形や文字を描画します。

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

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

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

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1.5 以降 ○

0.5 以前 ×

Safari

2 以降 ○

1 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9 以降 ○

モバイル

iOS Safari

1 以降 ○

Android Browser

37 以降 ○

36 以前 ×

Chrome Android

canvasの主要な描画API

『canvas』の2D描画コンテキストで使用できる主要なメソッド・プロパティです。

API	概要
fillRect(x, y, w, h)	塗りつぶした矩形を描画します
strokeRect(x, y, w, h)	矩形の枠線を描画します
arc(x, y, r, start, end)	円弧または円を描画します
fillText(text, x, y)	テキストを塗りつぶして描画します
drawImage(img, x, y)	画像をキャンバスに描画します
clearRect(x, y, w, h)	指定領域を消去します（透明にします）
fillStyle	塗りつぶしの色・グラデーションを設定します
strokeStyle	枠線の色を設定します
lineWidth	線の太さを設定します

SVGのviewBoxとレスポンシブ対応

SVGを画面サイズに合わせてスケールするには、『viewBox』属性とCSSを組み合わせます。

<!-- viewBox を使ったレスポンシブなSVG -->
<!-- viewBox="minX minY width height" で内部座標系を定義 -->
<svg viewBox="0 0 200 100"
     style="width: 100%; height: auto;">
  <rect x="10" y="10" width="180" height="80" fill="#4488ff" rx="8"/>
  <text x="100" y="55" text-anchor="middle" fill="white" font-size="20">Responsive SVG</text>
</svg>

<!-- SVGスプライト: symbolで定義してuseで再利用 -->
<svg style="display: none;">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
  </symbol>
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M20.84,4.61a5.5,5.5,0,0,0-7.78,0L12,5.67l-1.06-1.06a5.5,5.5,0,0,0-7.78,7.78L12,21.23l8.84-8.84A5.5,5.5,0,0,0,20.84,4.61Z"/>
  </symbol>
</svg>

<!-- useで複数回再利用できる -->
<svg width="24" height="24"><use href="#icon-star"/></svg>
<svg width="32" height="32"><use href="#icon-star"/></svg>
<svg width="24" height="24" style="fill: red;"><use href="#icon-heart"/></svg>

SVGにはCSSでスタイルを適用できます。ただし、外部ファイルとして読み込んだSVG（imgタグやbackground-image）はCSSで色変更ができないため、アイコンなど動的にスタイルを変えたい場合はインラインSVGかSVGスプライトを使いましょう。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典