How to save SVG data to a file from a web browser

protovis_to_link.js

(function(){

  var button_id = "download"

  // include this code in your page
  // you must have jQuery installed
  // you must have a link element with an id of "download"
  // this is limited to only one chart on the page (the first)
  function encode_as_link(){
    // Add some critical information
    $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

    var svg      = $("svg").parent().html(),
        b64      = Base64.encode(svg),
        download = $("#download"),
        html     = download.html();

    download.replaceWith(
      $("<a id='"+button_id+"' href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"'></a>").html(html));
  }

  $(function(){
    $("div").delegate("#"+button_id, "mouseover", encode_as_link);
  });

})();

save_svg.js

// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/
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);

 // 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>"));
}