web-dev-qa-db-fra.com

Dessiner un fichier SVG sur une toile HTML5

Existe-t-il un moyen par défaut de dessiner un fichier SVG sur un canevas HTML5? Google Chrome permet de charger le fichier SVG sous forme d'image (et d'utiliser simplement drawImage.)), Mais la console du développeur avertit que resource interpreted as image but transferred with MIME type image/svg+xml.

Je sais qu'une possibilité serait de convertir le SVG en commandes canvas (comme dans cette question ), mais j'espère que ce n'est pas nécessaire. Je me fiche des anciens navigateurs (donc si FireFox 4 et IE 9 prend en charge quelque chose, c'est assez bien).

html5canvassvg
104
Randy Voet

EDIT le 5 novembre 2014

Vous pouvez maintenant utiliser ctx.drawImage pour dessiner HTMLImageElements ayant une source .svg dans certains navigateurs, mais pas dans tous les navigateurs . Chrome, IE11 et Safari fonctionnent, Firefox fonctionne avec quelques bugs (mais tous les soirs les a 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 toile. Le deuxième carré vert de la page est le même <svg> élément inséré dans le DOM pour référence.

Vous pouvez également utiliser les nouveaux objets Path2D pour dessiner des chemins SVG (chaîne) ( ne fonctionne que dans Chrome pour le moment ) 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.

Réponse ancienne postérité:

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

Je suggérerais de regarder dans la sollicitation:

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

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

94
Simon Sarris

Vous pouvez facilement dessiner svgs simple sur une toile en:

  1. Affectation de la source du svg à une image au format base64
  2. Dessiner l'image sur une toile

Note: Le seul tirage en arrière de la méthode est qu'elle ne peut pas dessiner d'images incorporées dans le svg. (voir démo)

Manifestation:

(Notez que l'image incorporée n'est visible que dans 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/>
20
Matyas

Désolé, je n'ai pas assez de réputation pour commenter la réponse de @Matyas, mais si l'image du svg est également en base64, elle sera dessinée vers la 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().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/>
16
Henrique Campos

Mozilla a un moyen simple de dessiner des SVG sur une toile appelée " Dessiner des objets DOM dans une toile "

7
Nati Krisi

Comme Simon le dit plus haut, utiliser drawImage ne devrait pas marcher. 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 provient du lien que Simon fournit 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 du code SVG intégré entre les balises svg, au sein de fonctions JavaScript.

5
Max West