Button to download inpage SVG code as an SVG file? [closed]

Question

Given end users who don't want to inspect the code of D3js visualisations, nor copy-paste, etc.

Given a D3 <svg> element with all shapes and styles within itself (not within any external CSS).

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

The file should be valid to be opened with Inkscape and other SVG compliant softwares. This allow and empower the end user to fork the file, open it into an SVG editor and make some more advanced designs on it.

Answer 1

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

0) You need JQuery.

1) Define your button's CSS:

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

2) Define your button's HTML/JS:

<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 that 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're done. This produces an svg download that Inkscape can open.

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