Convert JavaScript-generated SVG to a file

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.

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:

<i class="download" href="https://stackoverflow.com/questions/8435537/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</i>

Here’s a closer look at that same 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.