Button to download inpage SVG code as an SVG file?

Question

For end users who do not want to check the D3js visualization code, rather than copy-paste, etc.

Given the D3 <svg> element with all the forms and styles within itself (not inside any external CSS).

Is there a library / code that allows this end user to click on a button to download the code as a standalone SVG file.

The file must be valid for opening with Inkscape and other SVG compatible programs. This allows and enables the end user to branch the file, open it in the SVG editor and create more complex developments on it.

Answer 1

Here's a good way to use svg-crowbar.js to provide a button on your site to allow your users to load your visualization as svg.

0) You need jQuery.

1) Define your CSS button:

 .download { background: #333; color: #FFF; font-weight: 900; border: 2px solid #B10000; padding: 4px; margin:4px; } 

2) Define your HTML / JS button:

 <a class="download" href="javascript:(function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"> <!--⤋--><big>⇩</big> Download </a> 

Here's a closer look at this javascript:

 javascript:(function (){ var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })(); 

3) You are done. . This creates an svg download that Inkscape can open.

Note. svg-crowbar.js is downloaded from https://rawgit.com or http://nytimes.github.com ; You may prefer to integrate it into your website / folder.

Answer 2

If you want to do everything on the client, then one option would be to use Javascript to create an HTML blog object using SVG content, then encode this blob as the data uri associated with the button or <a> tag.