[解決済み] HTML5 の canvas に SVG ファイルを描画する

質問

HTML5のキャンバスにSVGファイルを描画するデフォルトの方法はありますか？Google Chrome は、SVG を画像として読み込むことをサポートしています（そして、単純に drawImage しかし、開発者コンソールでは resource interpreted as image but transferred with MIME type image/svg+xml .

可能性としては、SVGをcanvasコマンドに変換することでしょうが（例えば この質問 ) が、それは必要ないと思っています。古いブラウザは気にしない（だから、FireFox 4とIE 9が何かサポートしてくれればそれでいい）。

どのように解決するのですか？

EDIT：2019年12月

は パス2D() のコンストラクタがサポートされています。 主要ブラウザ これにより、2D canvas サーフェス上でパスオブジェクトを宣言することができるようになりました。

EDIT：2014年11月

を使用できるようになりました。 ctx.drawImage を持つHTMLImageElementを描画するために使用します。 .svg ソース で 一部のブラウザで表示されます。 (75%のカバー率。Chrome、IE11、Safariは動作します。Firefoxはバグがありますが、ナイトリーで修正されています）。

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年版のオリジナル回答です。

canvasでSVGパスをネイティブに使用できるものはありません。自分で変換するか、ライブラリを使って変換する必要があります。

を調べてみることをお勧めします。 キャンバジ : （チェック ホームページ & デモ )

カンバン は、SVG ファイルの URL、または SVG ファイルのテキストを受け取り、JavaScript で解析し、結果を Canvas 上に描画します。