How to save svg canvas to local filesystem

Question

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.

Answer 1

You can avoid a round trip to the server.

Base64 encode your SVG xml.

Then generate a link to that data. The user can right click on to save it locally.

// This example was created using Protovis & jQuery // Base64 provided by http://www.webtoolkit.info/javascript-base64.html // Modern web browsers have a builtin function to this as well 'btoa' function encode_as_img_and_link(){  // Add some critical information  $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});   var svg = $("#chart-canvas").html();  var b64 = Base64.encode(svg); // or use btoa if supported   // Works in recent Webkit(Chrome)  $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));   // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri  $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>")); } 

The img tag works in Webkit, the link works in Webkit & Firefox, and may work in any browser which supports data-uri

Answer 2

Using FileSaver.js

saveAs(new Blob([SVG_DATA_HERE], {type:"image/svg+xml"}), "name.svg")