Cómo guardar un svg generado por raphael

Question

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

Answer 1

Como stef commented, la API de BlobBuilder está obsoleta. En cambio, use the Blob API.

Sobre la base de Andreas' answer, aquí es la rapidez con que lo tengo para trabajar:

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

Se me ocurrió una solución usando Raphael.Export, lo que me da una cadena svg/xml válida (algo que no pude obtener desde el innerHTML del objeto DOM que contiene el svg) y Blobbuilder para crear un url para un enlace que activaré 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 3

Si no desea utilizar el Rapahel.Export, se puede obtener directamente el SVG desde el dom, al igual que :

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 de la div donde se carga Raphael: r = Raphael ("soporte"); Nota que creo que no va a funcionar en el navegador de edad que no maneja SVG

Answer 4

Para la parte donde se guarda la representación de nota, me gustaría recomendar https://github.com/eligrey/FileSaver.js/

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