Come salvare un file SVG generato da raphael

Question

C'è un modo per salvare l'SVG generato da raphael come un file svg. Nota che è necessario lavorare solo in chrome.

Answer 1

Come stef commented, l'API BlobBuilder è obsoleta. Invece, use the Blob API.

Sulla Andreas' answer, ecco come ho subito capito di lavorare:

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

Mi è venuta una soluzione utilizzando Raphael.Export, che mi fornisce una stringa svg/xml valida (qualcosa che non ho potuto ottenere semplicemente dall'internoHTML dell'oggetto DOM che contiene lo svg) e Blobbuilder per creare un url per un collegamento che attiverò un evento click alla fine per salvare il file.

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

Se non si desidera utilizzare il Rapahel.Export, è possibile ottenere direttamente la svg dal Dom, come quello :

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(); 

"titolare" è l'id del div in cui è caricato Raphael: r = Raphael ("supporto"); Nota che penso che non funzionerà su vecchi browser che non gestisce svg

Answer 4

Per la parte in cui si salva il blob, io consiglierei di https://github.com/eligrey/FileSaver.js/

o https://www.npmjs.com/package/angular-file-saver se si sta utilizzando AngularJs