SVGとCanvas

SVGとCanvasとは

ブラウザで図形やグラフを描く方法には、大きく SVG と Canvas の2つがあります。

  • SVG(Scalable Vector Graphics)— 図形をタグで記述するベクター画像。拡大しても劣化しない
  • Canvas — <canvas> タグの領域に [[JavaScript]] でピクセルを直接描画する仕組み
<!-- SVG: 図形が要素として存在する -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="tomato" />
</svg>

// Canvas: JSで描画命令を実行する
const ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'tomato';
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fill();

比較と使い分け

SVGCanvas
実体[[DOM]] 要素(タグ)ただの描画領域(ピクセルの塊)
拡大縮小劣化しない(ベクター)拡大するとぼやける(ラスター)
個別操作図形ごとにクリックイベントやCSSを適用できる領域全体で1要素。個別操作は自前で計算
得意な規模要素数が少〜中程度大量の描画・毎フレーム更新
向いている用途アイコン、ロゴ、グラフ、地図ゲーム、パーティクル、画像加工

判断の軸は「図形を個別に操作したいか、大量に高速描画したいか」です。SVG は図形が DOM 要素なので扱いやすい反面、数千個を超えると [[ブラウザレンダリングの仕組み]] 上の負荷が重くなります。Canvas は描いた後はただのピクセルなので軽い代わりに、当たり判定などをすべて自前で計算します。

初学者向けポイント

  • アイコンは SVG が定番です。CSS の fill: currentColor で色をテキストに合わせるテクニックがよく使われます
  • SVG はテキストファイルなので、[[HTML]] に直接インラインで埋め込むことも、img タグで読み込むこともできます
  • Canvas でのアニメーションは requestAnimationFrame で毎フレーム描き直すのが基本形です
  • 3D描画には Canvas 上で動く WebGL / WebGPU という仕組みがあります

関連技術とのつながり

  • [[DOM]] — SVG の図形は DOM の一部として操作できる
  • [[HTML]] — どちらもHTMLに埋め込んで使う
  • [[JavaScript]] — Canvas 描画と SVG の動的操作の両方を担う
  • [[ブラウザレンダリングの仕組み]] — SVG要素数と描画負荷の関係を理解する鍵
Q: SVGの特徴として正しいのはどれ?
- [x] タグで記述するベクター画像で、拡大しても劣化しない
- [ ] ピクセルを直接描画するため拡大するとぼやける
- [ ] JavaScriptからは一切操作できない
解説: SVGは図形をタグで記述するベクター形式で、拡大縮小しても劣化しません。

Q: 大量の図形を毎フレーム高速に描画する用途に向いているのはどれ?
- [ ] SVG
- [x] Canvas
- [ ] HTMLのtableタグ
解説: Canvasは描いた後はただのピクセルで軽いため、ゲームやパーティクルなど大量・高頻度の描画に向きます。

Q: SVGの図形を個別にクリックイベントで扱えるのはなぜ?
- [ ] ブラウザが自動で座標計算APIを提供するから
- [ ] 画像ファイルにイベント情報が埋め込まれているから
- [x] 図形が1つ1つDOM要素として存在するから
解説: SVGの図形はDOM要素なので、通常のHTML要素と同じようにイベントやCSSを適用できます。