views:

518

answers:

6

Is there a way to allow a user, after he has created a vector graph on a javascript svg canvas using a browser, to download this file to their local filesystem?

SVG is a total new field for me so please be patient if my wording is not accurate.

kind regards, Jeroen.

+2  A: 

It might be possible using the regular "Save" browser command, but it won't just save the SVG canvas, it will save the whole page.

I believe your best bet is to use AJAX and send the whole SVG XML data as POST data to a server script, and have that script just send back the POST data with the header Content-Disposition: attachment; filename=yourfile.svg.

(Under PHP, you can get the raw POST contents with file_get_contents('php://input').)

zneak
+1  A: 

Most compatible way would be a round-trip to the server. You could also use a data: URI in some browsers.

Dark Falcon
All the browsers that support SVG support data uri:s too, afaik.
Erik Dahlström
+1  A: 

You can't save anything with javascript to the local filesystem, what you should do is send the contents of the canvas to the server and make the user download and save that.

voyager
+3  A: 
open("data:image/svg+xml," + encodeURIComponent(SVG_DATA_HERE));
Eli Grey
How does this answer the question? it's not saving the SVG on the local filesystem is it?
Scott Evernden
Scott: This opens the SVG in it's own page, where the user can save it to their filesystem by themself.
Eli Grey
+1  A: 

To answer my own question:

Another possibility though not the nicest is to display the serialized contents on the webpage and have the user select, copy and paste that. This after investigating eli grey's solution.

dr jerry
A: 

Yes is it possible. Use jquery.svg http://keith-wood.name/svgRef.html and post the svg xml data using the function svg.toSVG() (writing into a hidden field on submit). Have the php save and convert to raster using imagemagick (convert image.svg image.png) then force the file to download using header("Content-Type: application/octet-stream") and readfile the image.

Nood