Button to download inpage SVG code as an SVG file?

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.

Possible duplicate: http://stackoverflow.com/questions/8435537/convert-javascript-generated-svg-to-a-file — Scott Cameron, Aug 28 '13 at 16:36
I clarified my idea. What I ask for is not a kind of addon/system that the end user have to install, and that other question accepted. I look for a solution ready to fire at the first visit by the end user, without addon/bookmark installation — Hugolpz, Aug 28 '13 at 16:40
Crowbar is just a JavaScript file so there's no install required. The bookmarklet it refers to simply loads the JS file, which you could do yourself in your code. The way the code is now, it runs as soon as it loads and grabs all SVG's it finds on the page, but it should be easy to change it to be more targeted and integrate it with whatever your code does. The whole JS is only just over 200 lines long. — Scott Cameron, Aug 28 '13 at 18:40
So i need a button which when clicked load Crowbar.js, which then grasp the SVG. — Hugolpz, Aug 29 '13 at 04:04
I've modified the svg-crowbar script to be a function downloadSVG() that can be called from within your script. The function downloads the *first* SVG on the webpage. To use it, add ".on("click", function() { downloadSVG(); });" to your div button d3 code. The downloadSVG() function is found at: https://bitbucket.org/mas29/public_resources/raw/ed7a469df79bdcc0b06dcd8b60a174194da9ae14/scripts/js/svg_download/downloadSVG.js. — maia, Apr 13 '16 at 19:18

score 5 · Accepted Answer · edited Aug 08 '16 at 15:35

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.

score 1 · Answer 2 · answered Aug 28 '13 at 15:52

1

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

answered Aug 28 '13 at 15:52

Stephen Thomas

13,843
2
32
53

3

This answer would be so much better if it actually showed "how" to do that.. – ftrotter Feb 24 '16 at 19:36

Button to download inpage SVG code as an SVG file?

2 Answers2