Turning a SVG element to a downloadable file

Using D3 to create visualizations is incredibly powerful, however I occasionally like to export these out so that I can put the final touches in Illustrator.

Just pass in the SVG element in which the visualization is being rendered and the function appends a preview image and a download link on the page.

function create_downloadable_svg($svg_elem) { var $svg_elem = $($svg_elem[0]); // Add some critical information $svg_elem.attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"}); var svg = $svg_elem[0].outerHTML; var encodedSVG = window.btoa(unescape(encodeURIComponent(svg))); $container = $("<div>").addClass("svg-download-container").appendTo($("body")); $container.append($("<img src='data:image/svg+xml;base64,\n"+encodedSVG+"' alt='preview_svg.svg'/>")); $container.append($("<a download href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+encodedSVG+"' title='svg_for_download.svg'>Download</a>")); }

Meekal Bajaj

Turning a SVG element to a downloadable file