SVG ファイルを HTML5 キャンバスに描画するデフォルトの方法はありますか? Google Chrome は SVG を画像として読み込むこと (および を使用するだけdrawImage) をサポートしていますが、開発者コンソールには という警告が表示されますresource interpreted as image but transferred with MIME type image/svg+xml。
SVGをキャンバスコマンドに変換するという方法もあることは知っています（この質問) ですが、それが必要ないことを願っています。古いブラウザについては気にしません (したがって、Firefox 4 と IE 9 が何かをサポートしていれば、それで十分です)。
ベストアンサー1
編集: 2019年12月
のパス2D()コンストラクタはすべての主要ブラウザ現在、「2D キャンバス サーフェス上でパス オブジェクトを宣言できるようになりました」。
編集: 2014年11月
ソースctx.drawImageを持つHTMLImageElementsを描画するために使用できるようになりました.svgで一部のブラウザ（すべてではない）(75% のカバレッジ: Chrome、IE11、Safari は動作し、Firefox はいくつかのバグを伴い動作しますが、nightly で修正されています)。
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
ライブサンプルはこちらキャンバスに緑色の四角形が表示されます。ページ上の 2 番目の緑色の四角形は、<svg>参照用に DOM に挿入された同じ要素です。
新しい Path2D オブジェクトを使用して SVG (文字列) パスを描画することもできます。つまり、次のように記述できます。
var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);
2010 年のオリジナルの回答:
キャンバスで SVG パスをネイティブに使用できるネイティブなものはありません。自分で変換するか、ライブラリを使用して変換する必要があります。
調べてみることをお勧めしますできる： （チェックホームページ＆デモ）
できるSVG ファイルへの URL または SVG ファイルのテキストを取得し、それを JavaScript で解析して結果を Canvas にレンダリングします。