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

130

SVGファイルをHTML5キャンバスに描画するデフォルトの方法はありますか？Google ChromeはSVGを画像としてロードすることをサポートしています（そして単にを使用していますdrawImage）が、開発者コンソールはそれを警告していresource interpreted as image but transferred with MIME type image/svg+xmlます。

（この質問のように）SVGをキャンバスコマンドに変換する可能性があることは知っていますが、それが必要ないことを願っています。私は古いブラウザは気にしません（つまり、FireFox 4とIE 9が何かをサポートするなら、それで十分です）。

html  canvas  svg 
— ランディ・ボエ
ソース
4
この質問は、ライブデモと答えてい stackoverflow.com/questions/5495952/...を
— ドリューLeSueur

回答:

121

編集2019年12月16日

Path2Dは現在、すべての主要ブラウザでサポートされています

編集2014年11月5日

これで、を使用ctx.drawImageして、すべてのブラウザではなく一部のブラウザで .svgソースを持つHTMLImageElementsを描画できます。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);

その例をここに示します。

古い後世の答え：

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

canvgを調べることをお勧めします。

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm

— サイモンサリス
ソース
4
なぜこれが必要なのですか？SVGはcanvaseで完全に描画するようですdrawImage。しかし、私はまだその警告を受けます。それはどこから来たのですか？
— シューシュー
1
サイモン、あなたの言っていることは正しくありません。第二に、これはChromeの確認済みのバグです。
— Mathias Lykkegaard Lorenzen、2011
4
ウィキメディアはあなたがSVGを使うことを好まないようです。私が最初に見つけた使用可能なSVGとして、snapsvg.io / assets / images / logo.svgを入れ替えました。FFで働いていました。jsfiddle.net/Na6X5/331
— Thomas
1
これを行うためにデータURIを使用することもできます：jsfiddle.net/020k543w
— Swivel
9
注：長い間FireFoxのバグがあったため、残念ながら、幅と高さのタグがないsvgはキャンバスにまったく表示されません。また、幅と高さはパーセンテージではいけません。
— はとうはると2016年
26

申し訳ありませんが、@ Matyasの回答にコメントする十分な評判はありませんが、svgの画像もbase64にある場合、出力に描画されます。

デモ：

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;
svg, img, canvas {
  display: block;
}
SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>
スニペットを展開

— ヘンリケカンポス
ソース
1
フォントについても同様で、SVGに埋め込む必要があります：jsfiddle.net/ykx7kp8L/121
— Sphinxxx
1
のimgタグを繰り返し処理し、svg後でキャンバスに画像を個別に描画できる場合があります。
— ラッキードナルド2018
24

簡単なsvgをキャンバスに簡単に描画できます。

  1. svgのソースをbase64形式の画像に割り当てる
  2. キャンバスに画像を描く

注：このメソッドの唯一の欠点は、に埋め込まれた画像を描画できないことsvgです。（デモを参照）

デモンストレーション：

（埋め込まれた画像はでのみ表示されることに注意してくださいsvg）

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);
svg, img, canvas {
  display: block;
}
SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>
スニペットを展開

— マティアス
ソース
2
あなたが言及した問題を修正する方法はありますか？SVGに埋め込まれた画像
— Vijay Baskaran 2016年
埋め込み画像の問題の解決策は見つかりませんでした。
— Matyas
はい。ありがとうMatyas :)
— Vijay Baskaran
6

Simonが前述したように、drawImageを使用しても機能しません。しかし、canvgライブラリーを使用して、

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

これは、サイモンが上記で提供しているリンクから来ています。リンクには、他の多くの提案があり、リンクするか、canvg.jsとrgbcolor.jsをダウンロードする必要があることを指摘しています。これらを使用すると、JavaScript関数内で、URLを介して、またはsvgタグ間のインラインSVGコードを使用して、SVGを操作およびロードできます。

— マックスウェスト
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.