HTML5キャンバスにSVGファイルを描画する方法

HTML5の<canvas>要素にSVGファイルを描画したい場合、標準のdrawImage()メソッドを利用します。SVGはベクター形式のため、拡大・縮小しても画質が劣化せず、キャンバス上で高品質なグラフィックを扱えるのが大きなメリットです。

基本的な手順

手順はシンプルで、次の流れになります。

1. Imageオブジェクトを生成し、srcプロパティにSVGファイルのURLを指定します。
2. 画像の読み込みが完了したタイミングで発火するonloadイベント内でdrawImage()を呼び出します。

サンプルコード

var myImg = new Image();
myImg.onload = function() {
    ctx.drawImage(myImg, 0, 0);
}
myImg.src = "https://www.example.com/files/sample.svg";

コードの解説

• new Image(): 新しい画像オブジェクトを作成します。
• onload: 画像の読み込みが完了してから描画処理を実行するために必須です。読み込み完了前にdrawImage()を呼び出すと、何も描画されないかエラーになることがあります。
• drawImage(myImg, 0, 0): 第1引数に画像オブジェクト、第2・第3引数に描画開始位置（X座標、Y座標）を指定します。この例ではキャンバスの左上（0, 0）に描画されます。

注意点

• 外部ドメインからSVGを読み込む場合、CORS（オリジン間リソース共有）の設定が必要です。同一オリジンのファイルを使用するか、サーバー側で適切なヘッダーを設定してください。
• サイズを指定して描画したい場合は、drawImage(myImg, x, y, width, height)のように幅と高さを追加の引数として渡すことができます。