How to save an svg generated by raphael

svg raphael
Andreas Köberle picture Andreas Köberle · Apr 12, 2012 · Viewed 9.3k times · Source

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

Answer

Andreas Köberle picture Andreas Köberle · Apr 18, 2012

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

Related questions

How to access SVG elements with Javascript

I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript. Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning …

Read More
jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I …

Read More
Photoshop Custom Shape to SVG path string

Is there any way to get the SVG path string off a Photoshop custom shape or path? Or is there another way to get/construct similar data? I'm looking to do something similar to this: http://raphaeljs.com/icons/

Read More