How to save svg canvas to local filesystem

by

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

More Related Contents:

  1. Convert SVG to image (JPEG, PNG, etc.) in the browser
  2. jQuery SVG, why can’t I addClass?
  3. How to add a tooltip to an svg graphic?
  4. Changing SVG image color with javascript
  5. With JavaScript, can I change the Z index/layer of an SVG element?
  6. How to check if an embedded SVG document is loaded in an html page?
  7. How do you access the contents of an SVG file in an element?
  8. Go to local URL with Javascript
  9. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  10. How to draw a path smoothly from start point to end point in D3.js
  11. Is there some innerHTML replacement in SVG/XML?
  12. (Embed and) Refer to an external SVG via D3 and/or javascript
  13. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  14. How can I get png(base64) with images inside of svg in Google Charts?
  15. D3 – how to deal with JSON data structures?
  16. How do you detect support for VML or SVG in a browser
  17. Circles in Map Displayed Incorrect Location in D3 V4
  18. How to draw a vector path progressively? (Raphael.js)
  19. One JS File for Multiple Pages [closed]
  20. size of createElement(“svg”) is 0,0
  21. How to show SVG file on React Native?
  22. Creating SVG graphics using Javascript?
  23. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  24. How to get the width of an svg:g element
  25. Javascript: Get access to local variable or variable in closure by its name [duplicate]
  26. draw text in d3 arc javascript
  27. D3 put arc labels in a Pie Chart if there is enough space
  28. How to generate and prompt to save a file from content in the client browser? [duplicate]
  29. jQuery SVG vs. Raphael [closed]
  30. Create a table in SVG

Leave a Comment