¿Método para convertir lienzo HTML5 a SVG?

Question

¿Necesita convertir un lienzo HTML5 a SVG para editarlo? Se observará puntero

Answer 1

lona SVG permite guardar 2d http://code.google.com/p/canvas-svg/ se puede hacer a la inversa con canvg http://code.google.com/p/canvg/

Answer 2

Véase también http://code.google.com/p/html5-canvas-svg/

Fabric.js anuncia que tiene un programa de análisis "-lona-a SVG", y tiene una demostración que aparentemente converts canvas to SVG. Mientras que los otros elementos funcionan si utilizas los controles y luego "Rasterizar lienzo para" SVG, tiene un problema al convertir la imagen predeterminada, por lo que deberías comprobar si esto es realmente capaz de convertir lienzos crudos a SVG o solo si crea elementos a través del editor.

Answer 3

Probar canvas2svg.js. [Demo]

Me encontré con la necesidad de esto y terminé escribiendo una biblioteca para esto. En ese momento, las otras bibliotecas eran un poco dispersas o no generaban un SVG válido.

El concepto básico es el mismo sin embargo. Crea un contexto 2D de lienzo simulado y luego genera un gráfico de escena SVG a medida que llama comandos de dibujo lienzo. Básicamente puede reutilizar la misma función de dibujo. Según el contexto que le pase, puede dibujar en un lienzo 2D estándar o generar un documento SVG que puede serializar.

No se puede "transformar" un elemento de lienzo atraído, ya que es solo un mapa de bits, así que tenlo en cuenta. Cuando exporta a SVG, en realidad solo está llamando a la misma función de dibujo utilizando un contexto falso.

Así como un ejemplo rápido:

//create a canvas2svg mock context 
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height 

var draw = function(ctx) { 
    //do your normal drawing 
    ctx.fillRect(0,0,200,200); 
    //etc... 
} 

draw(myMockContext); 
myMockContext.getSerializedSvg(); //returns the serialized SVG document 
myMockContext.getSvg(); //inline svg 

Answer 4

creo que el lienzo ya debe estar dibujando una SVG para este método, pero lo encontré en el curso de tratar de crear un botón de descarga SVG mí mismo, también funcionó en esta pregunta de desbordamiento de pila en la misma búsqueda, puede ser relevante.

de https://bramp.github.io/js-sequence-diagrams/

alrededor 200ish línea, pero que sabe que puede editar sitio en el futuro editor de

es sólo un elemento div, y para el propósito de este ruido, que es sólo el embalaje del material del svg fue generado fuera de en el svg descargado.

diagram_div es el lienzo del SVG real está sentado en.

function(ev) { 
    var svg = diagram_div.find('svg')[0]; 
    var width = parseInt(svg.width.baseVal.value); 
    var height = parseInt(svg.height.baseVal.value); 
    var data = editor.getValue(); 
    var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>'; 

    var a = $(this); 
    a.attr("download", "diagram.svg"); // TODO I could put title here 
    a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml)); 
}