Saving D3.JS example "bullet.html" to SVG

Question

I'm working with the bullet graph example on the D3.JS site at http://bl.ocks.org/4061961:

My goal is to save the bullet graph itself as an SVG file for editing in Inkscape. Using the rasterize.js example with phantom.js, I was able modify the code to both save the bullet graph to a PNG file and to extract the SVG code programatically and save it to a file. Below is the amended rasterize.js file that saves the SVG code:

var page = require('webpage').create(), address, output, size;


if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                var results = page.evaluate(function(){
                   return document.getElementById('chart').innerHTML
                })
            console.log(results);
            phantom.exit();
        }, 200);
    }
});
}

The JS above is stored in "rasterize.js" and given to phantomjs.exe on the command line to create the SVG and PNG files.

> phantomjs.exe rasterize.js bullet.html bullet.png > bullet.svg

Here is a link to the "bullet.svg" file stored on GIST: https://raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg You can save this file to a local drive and view it in a browser.

However, as currently stored, this file doesn't load in Inkscape. I modified the resulting file by adding a ?xml header and amending the svg elements with xmlns as I also manually wrapped the individual elements into a single block.

What am I missing? Once I figure out how to make it work by hand, I'll need to amend the code that extracts the SVG to get the headers write.

Other ideas or tips for modifying rasterize.js (above) to write a clean SVG programatically? Thanks!

Answer 1

Svg crowbar does a pretty good job for single svg elements, it is just a bookmarklet you have to add (works only on chrome). It is developed by the New York Times.

A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint). It was created with d3.js in mind, but it should work fine no matter how you choose to generate your SVG.