7

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

enter image description here

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!

VividD
  • 10,456
  • 6
  • 64
  • 111
John Leonard
  • 291
  • 2
  • 9
  • This is an interesting workflow, which I have no experience with (other than the d3 bit), so not really qualified to answer, but.... Your bullets.svg is not purely SVG, because it's wrapped in a `
    `. I'd expect that to be showstopper for Inkscape, no? Have you tried it without this div?
     – meetamit Nov 30 '12 at 22:04
  • Oh, and I just noticed that there are multiple SVGs (which I guess is why you wrapped them in a div), and I would similarly expect that to be a problem for Inkscape. If so, you'd have to modify mbostock's example to put them all in ``s within a single SVG. – meetamit Nov 30 '12 at 22:11
  • 1
    A possible way of working around this issue would be to use phantomjs to render to PDF and then convert the PDF to SVG. – Lars Kotthoff Nov 30 '12 at 23:02
  • @lars -Good thought on the PDF suggestion. I reran the code with a PDF output and the new file loaded into Inkscape without errors. I'd still like to see a native SVG solution, I guess I'm invested. Thanks! – John Leonard Dec 01 '12 at 13:26

2 Answers2

2

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.

Christopher Chiche
  • 15,075
  • 9
  • 59
  • 98
0

You can also use an open-source library I just released called SaveSVG.

Coola
  • 2,934
  • 2
  • 19
  • 43