Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
How to save SVG data to a file from a web browser
// This example was created using Protovis & jQuery
// Base64 provided by
function encode_as_img_and_link(){
// Add some critical information
$("svg").attr({ version: '1.1' , xmlns:""});
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>"));
Copy link

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...

Copy link

Gabr13dev commented Oct 27, 2020

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