Convert JavaScript-generated SVG to a file

Question

I am using d3.js to visualize some data. I would like to be able to take the SVG code that it generates and store it as a .svg image file (for editing in Inkscape/Illustrator).

I have tried simply copying the contents of the svg tag i.e.

<svg>
<!--snip-->
</svg>

into a file called image.svg, but this misses out on the color/styling information, which is in two separate CSS files.

I'm working with this example.

Is there a simple way to do this?

Answer 1

I think SVG Crowbar may be the best way to deal with this.

Documentation

Answer 2

This is late, but with D3.js it would be simple to inline the CSS. You would do something like:

d3.json("../data/us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("fill", data ? quantize : null)
      .attr("d", path);
});

d3.json("unemployment.json", function(json) {
  data = json;
  counties.selectAll("path")
      .attr("fill", quantize);
});

function quantize(d) {
  return "hsla(120, 50%, 50%, " + Math.min(8, ~~(data[d.id] * 9 / 12)) + ")";
}

My function quantize is just a quick hack for demonstration, but you could look at colorbrewer to work out the logic for applying quantiles to colors.

Answer 3

There's an extension called "svg-grabber" (svg export is another option) you can try it, it works by just clicking the extension icon, this is the result for stackoverflow page:

Answer 4

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="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.

Answer 5

This works for me in Chrome v16b and Safari v5.1 on Windows: http://phrogz.net/SVG/chloropleth.html

All I did was use the Developer Tools to Copy as HTML the SVG node, paste it into a blank document, and add the links to the two CSS files. Does this appear correctly for you in Safari?

Edit: Here it is as a standalone SVG file: http://phrogz.net/SVG/chloropleth.svg
For this I added the xmlns attribute to the <svg> and the external links:

<?xml-stylesheet href="http://mbostock.github.com/d3/ex/choropleth.css" type="text/css"?>
<?xml-stylesheet href="http://mbostock.github.com/d3/ex/colorbrewer.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"><!-- 1MB of data --></svg>

Again, verified to work in Chrome and Safari.