title: Saving D3.JS example "bullet.html" to SVG
body: <p>I'm working with the bullet graph example on the D3.JS site at <a href="http://bl.ocks.org/4061961" rel="nofollow noreferrer">http://bl.ocks.org/4061961</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/Zx0nz.gif" alt="enter image description here"></p>
  
  <p>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:</p>
  
  <pre><code>var page = require('webpage').create(), address, output, size;
  
  
  if (phantom.args.length &lt; 2 || phantom.args.length &gt; 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);
      }
  });
  }
  </code></pre>
  
  <p>The JS above is stored in "rasterize.js" and given to phantomjs.exe on the command line to create the SVG and PNG files.</p>
  
  <pre><code>&gt; phantomjs.exe rasterize.js bullet.html bullet.png &gt; bullet.svg
  </code></pre>
  
  <p>Here is a link to the "bullet.svg" file stored on GIST: <a href="https://raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg" rel="nofollow noreferrer">https://raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg</a>  You can save this file to a local drive and view it in a browser.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Other ideas or tips for modifying rasterize.js (above) to write a clean SVG programatically?  Thanks!</p>