1. Inicio
  2. Pregunta y respuesta
  3. ¿Hay alguna manera de convertir archivos SVG a los comandos compatibles con Canvas de HTML5?

¿Hay alguna manera de convertir archivos SVG a los comandos compatibles con Canvas de HTML5?

2010-05-25 23 views

Respuesta

4

No hay una solución al 100%, pero hay bibliotecas de scripts que pueden convertir un subconjunto de svg en canvas, por ejemplo, http://code.google.com/p/canvas-svg/. También está la API experimental Path2D que puede dibujar una cadena de datos de ruta de svg en el lienzo, aunque no está seguro de cuán bien es compatible con todos los navegadores.

Fuente

2010-05-26 10:44:50

+0

lago de la documentación, respuesta no explicada ... -1 –

-13

No. SVG es un formato vectorial (principalmente) estático y lienzo es una API para un mapa de bits dinámico. Convertir SVG en lienzo tiene tanto sentido como convertir SVG en MathML: ninguno.

Fuente

2010-05-26 08:52:57 Ms2ger

+4

formatos vectoriales se pueden rasterizar. –

17

canvg parece ser una solución mejor. Es un proyecto activo a partir de enero de 2012.

canvas-svg no se ha actualizado desde que se publicó en junio de 2009.

Fuente

2010-11-26 10:35:31 schellmax

4

recomiendo el proyecto Java SVGToCanvas si sólo desea generar estáticamente algunos javascript lienzo de una Archivo SVG.

Fuente

2011-02-01 17:45:04 emerix

+0

Perfecto. Justo lo que estaba buscando. Sabía que debe estar ahí, ya que las letras en los datos de 'ruta' representan los mismos comandos disponibles en el lienzo. –

0

Tenía el mismo requisito para un par de proyectos internos. Pensó que podría ayudar a otros, por lo que está disponible como un experimento SVG2Canvas.

Fuente

2012-09-03 19:03:30

3

La versión actual de Inkscape admite "guardar como: lienzo HTML5".

https://inkscape.org/en/

Produce código como este:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Inkscape Output</title> 
</head> 
<body> 
    <canvas id='canvas' width='200' height='200'></canvas> 
    <script> 
    var ctx = document.getElementById("canvas").getContext("2d"); 

// #layer1 

// #rect3336 
    ctx.beginPath(); 
    ctx.lineJoin = 'miter'; 
    ctx.lineCap = 'butt'; 
    ctx.lineWidth = 1.000000; 
    ctx.fillStyle = 'rgb(30, 144, 255)'; 
    ctx.rect(0.000000, 88, 64.000000, 64.000000); 
    ctx.fill(); 

// #path4138 
    ctx.beginPath(); 
    ctx.strokeStyle = 'rgb(255, 255, 255)'; 
    ctx.lineWidth = 1.494353; 
    ctx.arc(32.000000, 120, 29.252823, 0.000000, 6.28318531, 1); 
    ctx.stroke(); 

    </script> 
</body>

Fuente

2015-12-14 10:27:14 Kamil

Cuestiones relacionadas

 Cuestiones relacionadas