php - whatwg - w3c html standards

¿Cuál es la mejor manera de serializar SVG desde el DOM del cliente?

Question

Estoy trabajando en interfaces interactivas SVG / AJAX donde los usuarios crean y reposicionan elementos sobre la marcha. Me gustaría apoyar la capacidad de los usuarios para exportar su vista actual a una imagen PNG y / o un documento SVG. Realmente me gustaría que el documento SVG sea lo más simple posible (sin muchas transformaciones anidadas). ¿Hay algún marco que ya lo soporte?

Actualmente estoy pidiendo a mis usuarios que utilicen la técnica Ctrl + Alt + PrntScrn, y no quiero pedirles que instalen ningún software / complementos.

El código del lado del servidor se implementa en PHP ahora mismo, si eso ayuda. Ya he implementado la capacidad de generar una imagen PNG a partir del documento "original" (antes de que el cliente realice modificaciones) usando ImageMagick.

Answer 1

Opera tiene implementación del serializador DOM → XML del W3C . En el modo XML innerHTML devuelve XML bien formado en Gecko.

HTML5 <canvas> puede exportar su contenido como archivo PNG utilizando toDataURL() y es posible pintar cualquier elemento <img> en canvas utilizando drawImage() , por lo que debería ser posible crear <img src="data:application/svg+xml,…"> , pinte en lienzo y exporte como data: URL.

Answer 2

Supongo que necesita esto para que funcione solo en navegadores compatibles con SVG.

Firefox, Safari y Opera proporcionan la API XMLSerializer no estándar, por lo que podría hacer algo como esto:

var svg = document.getElementById(''svg_root''); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);

Desde allí, puede enviarlo al servidor y recibir un PNG a cambio.

Aquí está la página del desarrollador de Mozilla sobre la serialización de XML desde el DOM .