Dessiner un fichier SVG sur une canvas HTML5

Existe-t-il un moyen par défaut de dessiner un fichier SVG sur une canvas HTML5? Google Chrome prend en charge le chargement du SVG en tant qu’image (et utilise simplement drawImage ), mais la console du développeur avertit que cette resource interpreted as image but transferred with MIME type image/svg+xml .

Je sais qu’une possibilité serait de convertir le SVG en commandes de canevas (comme dans cette question ), mais j’espère que ce n’est pas nécessaire. Je me fous des navigateurs plus anciens (donc, si FireFox 4 et IE 9 supportent quelque chose, ça suffit).

EDIT 5 novembre 2014

Vous pouvez maintenant utiliser ctx.drawImage pour dessiner HTMLImageElements qui ont une source .svg dans certains navigateurs, mais pas tous . Chrome, IE11 et Safari fonctionnent, Firefox fonctionne avec certains bogues (mais tous les soirs les ont corrigés).

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

Exemple en direct ici . Vous devriez voir un carré vert dans la canvas. Le deuxième carré vert de la page est le même élément inséré dans le DOM pour référence.

Vous pouvez également utiliser les nouveaux objects Path2D pour dessiner des chemins SVG (chaînes uniquement ). En d’autres termes, vous pouvez écrire:

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

Exemple vivant de cela ici.


Ancienne postérité répond:

Il n’y a rien de natif qui vous permet d’utiliser nativement des chemins SVG dans canvas. Vous devez vous convertir ou utiliser une bibliothèque pour le faire pour vous.

Je suggère de regarder dans:

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

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

Vous pouvez facilement dessiner des svg s simples sur une canvas en:

  1. Assigner la source du svg à une image au format base64
  2. Dessiner l’image sur une canvas

Remarque: Le seul retrait de la méthode est qu’il ne peut pas dessiner des images incorporées dans le svg . (voir la démo)

Manifestation:

(Notez que l’image intégrée est uniquement visible dans le svg )

 var svg = document.querySelector('svg'); var img = document.querySelector('img'); var canvas = document.querySelector('canvas'); // get svg data var xml = new XMLSerializer().serializeToSsortingng(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

Désolé, je n’ai pas assez de réputation pour commenter la réponse @Matyas, mais si l’image de svg est également en base64, elle sera dessinée en sortie.

Démo:

 var svg = document.querySelector('svg'); var img = document.querySelector('img'); var canvas = document.querySelector('canvas'); // get svg data var xml = new XMLSerializer().serializeToSsortingng(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 a un moyen simple de dessiner SVG sur une canvas appelée ” Dessiner des objects DOM dans une canvas ”

Comme dit Simon ci-dessus, utiliser drawImage ne devrait pas fonctionner. Mais, en utilisant la bibliothèque canvg et:

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

Cela vient du lien fourni par Simon ci-dessus, qui contient un certain nombre d’autres suggestions et indique que vous souhaitez créer un lien vers, ou télécharger canvg.js et rgbcolor.js. Celles-ci vous permettent de manipuler et de charger un fichier SVG, via une URL ou en utilisant un code SVG en ligne entre des balises svg, dans les fonctions JavaScript.