insertar - Dibujar un archivo SVG en un lienzo HTML5

svg sintaxis

Question

¿Hay alguna forma predeterminada de dibujar un archivo SVG en un lienzo 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 lienzo (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).

Answer 1

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 lienzo. El segundo recuadro verde en la página es el mismo elemento <svg> 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 lienzo. 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

Answer 2

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 etiquetas svg, dentro de las funciones de JavaScript.

Answer 3

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
<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/>

Answer 4

Mozilla tiene una forma simple de dibujar SVG en un lienzo llamado " Dibujar objetos DOM en un lienzo "

Answer 5

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

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

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
<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/>