Desenhando um arquivo SVG em uma canvas HTML5

Existe uma maneira padrão de desenhar um arquivo SVG em uma canvas HTML5? O Google Chrome suporta o carregamento do SVG como uma imagem (e simplesmente o uso de drawImage ), mas o console do desenvolvedor avisa esse resource interpreted as image but transferred with MIME type image/svg+xml .

Eu sei que uma possibilidade seria converter os comandos SVG para canvas (como nesta pergunta ), mas espero que isso não seja necessário. Eu não me importo com navegadores mais antigos (então se o FireFox 4 e o IE 9 suportarem algo, isso é bom o suficiente).

EDITAR 5 de novembro de 2014

Agora você pode usar ctx.drawImage para desenhar HTMLImageElements com uma fonte .svg em alguns, mas não em todos os navegadores . Chrome, IE11 e Safari funcionam, o Firefox funciona com alguns bugs (mas todas as noites os corrigiu).

 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"; 

Exemplo vivo aqui . Você deve ver um quadrado verde na canvas. O segundo quadrado verde na página é o mesmo elemento inserido no DOM para referência.

Você também pode usar os novos objects Path2D para desenhar caminhos SVG (string) ( só funciona no Chrome agora ). Em outras palavras, você pode escrever:

 var path = new Path2D('M 100,100 h 50 v 50 h 50'); ctx.stroke(path); 

Exemplo vivo disso aqui.


Resposta da posteridade antiga:

Não há nada nativo que permita que você use nativamente caminhos SVG na canvas. Você deve se converter ou usar uma biblioteca para fazer isso por você.

Eu sugiro olhar para o canvg:

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

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

Você pode facilmente desenhar svg s simples em uma canvas:

  1. Atribuindo a origem do svg a uma imagem no formato base64
  2. Desenhar a imagem em uma canvas

Nota: O único backdraw do método é que ele não pode desenhar imagens embutidas no svg . (veja demo)

Demonstração:

(Observe que a imagem incorporada é visível apenas no 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     

IMAGE

CANVAS

Desculpe, eu não tenho reputação suficiente para comentar sobre a resposta do @Matyas, mas se a imagem do svg também estiver na base64, ela será desenhada para a saída.

Demonstração:

 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     

IMAGE

CANVAS

O Mozilla tem uma maneira simples de desenhar o SVG na canvas, chamado ” Desenhar objects DOM em uma canvas ”

Como Simon diz acima, usar drawImage não deveria funcionar. Mas, usando a biblioteca canvg e:

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

Isso vem do link que o Simon fornece acima, que tem várias outras sugestões e aponta que você deseja vincular ou fazer o download de canvg.js e rgbcolor.js. Estes permitem que você manipule e carregue um SVG, seja via URL ou usando código SVG embutido entre tags svg, dentro das funções JavaScript.