How to save an svg generated by raphael

Question

Is there a way to save the SVG generated by raphael as an svg file. Note it only need to work in chrome.

I presume you mean save at the client end? There must be a better way than this, but worst-case scenario, you could grab the XML with JavaScript/jQuery, send it to the server via AJAX, and then serve it to the user via your usual web framework with appropriate headers set. — halfer, Apr 12 '12 at 12:09
Ah, another way: you can encode an SVG file as a base64 string, then add it to a `data:` link. The user can click it to display, and use 'Save' in their browser. — halfer, Apr 12 '12 at 12:11

score 14 · Answer 1 · answered Apr 18 '12 at 20:51

14

I came up with a solution using Raphael.Export, which gives me an valid svg/xml String (something that I couldn't get from the simply from the innerHTML of the DOM object that holds the svg) and Blobbuilder to create a url for a link which will I fire a click event at the end to save the 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();

answered Apr 18 '12 at 20:51

Andreas Köberle

106,652
57
273
297

Sadly looks like BlobBuilder is obsolete. Blob appears to be the replacement but has no append method. – stef Jul 28 '13 at 12:28
Neema's answer has the current solution. – adam.baker Jul 30 '14 at 18:34

score 8 · Accepted Answer · edited May 23 '17 at 12:34

8

As stef commented, the BlobBuilder API is deprecated. Instead, use the Blob API.

Building on Andreas' answer, here is how I quickly got it to work:

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

edited May 23 '17 at 12:34

Community

1
1

answered Sep 06 '13 at 21:40

elbowpa

498
1
5
9

score 1 · Answer 3 · answered Aug 12 '15 at 11:16

If you don't want to use the Rapahel.Export, you can directly get the svg from the dom, like that:

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

"holder" is the id of the div where is loaded Raphael : r = Raphael("holder"); Note that I think it won't work on old browser that doesn't handle svg

score 0 · Answer 4 · answered Dec 01 '15 at 18:00

0

For the part where you save the blob, I'd recommend https://github.com/eligrey/FileSaver.js/

or https://www.npmjs.com/package/angular-file-saver if you're using AngularJs

answered Dec 01 '15 at 18:00

icyerasor

4,973
1
43
52

score 0 · Answer 5 · answered Jun 01 '21 at 09:16

At least for simple cases we can use the div that the Raphael plot is written to (usually 'canvas') and download the innerhtml from that. First, we need a javascript function which will copy the content of the div and create a download link (this function was from another page, not my work):

<script>
function downloadInnerHtml(filename, divId, mimeType) {
var elHtml = document.getElementById(divId).innerHTML;
console.log(elHtml); //useful for troubleshooting
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click(); 
}
</script>

Second, we need a button on the page to run the function

<button onclick="downloadInnerHtml('raphaelplot.svg', 'canvas','text/html')">save plot as svg</button>

How to save an svg generated by raphael

5 Answers5

Linked