Dibujar un archivo SVG en un canvas HTML5

¿Hay alguna forma predeterminada de dibujar un archivo SVG en un canvas HTML5? Google Chrome admite cargar el SVG como una imagen (y simplemente usar drawImage ), pero la consola del desarrollador advierte ese resource interpreted as image but transferred with MIME type image/svg+xml .

Sé que una posibilidad sería convertir el SVG en comandos de canvas (como en esta pregunta ), pero espero que no sea necesario. No me importan los navegadores más antiguos (así que si FireFox 4 e IE 9 soportan algo, eso es suficiente).

EDITAR 5 de noviembre de 2014

Ahora puede usar ctx.drawImage para dibujar elementos HTMLImageElements que tengan un origen .svg en algunos, pero no en todos los navegadores . Chrome, IE11 y Safari funcionan, Firefox funciona con algunos errores (pero todos los días los ha solucionado).

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

Ejemplo en vivo aquí . Deberías ver un cuadrado verde en el canvas. El segundo recuadro verde en la página es el mismo elemento insertado en el DOM como referencia.

También puede usar los nuevos objetos Path2D para dibujar rutas SVG (cadenas) ( solo funciona en Chrome ahora mismo ). En otras palabras, puedes escribir:

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

Ejemplo vivo de eso aquí.


Vieja respuesta de la posteridad:

No hay nada nativo que le permita usar de forma nativa las rutas SVG en el canvas. Debes convertirte o usar una biblioteca para hacerlo por ti.

Sugeriría mirar hacia canvg:

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

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

Puedes dibujar fácilmente svg s simples en un canvas de la siguiente manera:

  1. Asignando el origen de la svg a una imagen en formato base64
  2. Dibujando la imagen en un canvas

Nota: El único backdraw del método es que no puede dibujar imágenes incrustadas en svg . (ver demostración)

Demostración:

(Tenga en cuenta que la imagen incrustada solo está visible en 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

Lo siento, no tengo suficiente reputación para comentar la respuesta de @Matyas, pero si la imagen de svg también está en base64, se dibujará en la salida.

Manifestación:

 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

Mozilla tiene una forma simple de dibujar SVG en un canvas llamado ” Dibujar objetos DOM en un canvas ”

Como dice Simon arriba, usar drawImage no debería funcionar. Pero, usando la biblioteca canvg y:

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

Esto proviene del enlace que Simon proporciona arriba, que tiene una serie de otras sugerencias y señala que desea vincular a, o descargar canvg.js y rgbcolor.js. Estos le permiten manipular y cargar un SVG, ya sea a través de la URL o usando el código SVG en línea entre las tags svg, dentro de las funciones de JavaScript.