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

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