Skip to content

Instantly share code, notes, and snippets.

@jweir
Created November 19, 2010 19:23
Show Gist options
  • Star 28 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save jweir/706988 to your computer and use it in GitHub Desktop.
Save jweir/706988 to your computer and use it in GitHub Desktop.
How to save SVG data to a file from a web browser
// 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>"));
}
@Gabr13dev
Copy link

Gabr13dev commented Oct 27, 2020

At line 7 will return nothing because not there html in a canvas element or i just crazy?

I have a chart in a canvas and i can exports to png but I did not make it to svg

@jweir
Copy link
Author

jweir commented Oct 27, 2020

That element, #chart-canvas, should be an SVG element. But this is all a big foggy as it was written 10 years ago.

There are many new API's for working with files, which will be a better option than the above...
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files

@Gabr13dev
Copy link

Thank you very much, i used canvas2svg.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment