mexico - Cómo guardar un svg generado por raphael

svg to raphael

Question

¿Hay alguna manera de guardar el SVG generado por Raphael como un archivo svg? Tenga en cuenta que solo necesita trabajar en cromo.

Answer 1

Como comentó stef , la API de BlobBuilder está en desuso. En su lugar, utilice la API de Blob .

Sobre la base de la respuesta de Andreas , esta es la forma en que lo puse en funcionamiento rápidamente:

svgString = r.toSVG();
a = document.createElement(''a'');
a.download = ''mySvg.svg'';
a.type = ''image/svg+xml'';
blob = new Blob([svgString], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();

Answer 2

Para la parte donde guardas el blob, te recomiendo https://github.com/eligrey/FileSaver.js/

o https://www.npmjs.com/package/angular-file-saver si está utilizando AngularJs

Answer 3

Se me ocurrió una solución utilizando Raphael.Export , que me da una cadena svg / xml válida (algo que no pude obtener simplemente del HTML interno del objeto DOM que contiene el svg) y Blobbuilder para crear una url para un enlace en el que dispararé un evento de clic al final para guardar el archivo.

svgString = @paper.toSVG();
a = document.createElement(''a'');
a.download = ''mySvg.svg'';
a.type = ''image/svg+xml'';
bb = new(window.BlobBuilder || WebKitBlobBuilder);
bb.append(svgString);
blob = bb.getBlob(''image/svg+xml'');
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();

Answer 4

Si no quieres usar Rapahel.Export, puedes obtener directamente el svg desde el dom, así:

var svgString = document.getElementById(''holder'').innerHTML;
a = document.createElement(''a'');
a.download = ''mySvg.svg'';
a.type = ''image/svg+xml'';
blob = new Blob([svgString], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();

" titular " es el id del div donde se carga Rafael: r = Rafael ("titular"); Tenga en cuenta que creo que no funcionará en un navegador antiguo que no maneja svg