How to convert d3.js SVG to PDF

by Sergiy Nesterko on January 30th, 2012

Consider the following plot:


The image above is an SVG created using d3.js. I am going to use it in a paper, so need to convert it to PDF. It so happened that how to do this is not common knowledge, as is mentioned in this blog (which is, by the way, a good and balanced source of information relevant to our profession). Here is a short tutorial on how to do it:

  1. When creating an SVG, style it inside your .js source with Javascript, for example like this is done with d3 for the image above:
    // general styling
      svg.
        style("font-family", "Georgia").
        style("font-size", "15px").
        style("font-style", "normal").
        style("font-variant", "normal").
        style("font-weight", "normal").
        style("text-rendering", "optimizeLegibility").
        style("shape-rendering", "default");
    
    // style plot elements
      d3.selectAll("path.simpleline").
        style("opacity", "1").
        style("stroke-width", "2").
        style("stroke", "black").
        style("fill", "none");
    
    // style the axes
      d3.selectAll("path.domain").
        style("opacity", "0.4").
        style("stroke-width", "1").
        style("fill", "black");
    
      d3.selectAll(".tick").
        style("opacity", "0.4").
        style("stroke", "black").
        style("stroke-width", "1");
    
  2. Then open the webpage containing the SVG in your browser (I am using Chrome most of the time, for example), open Javascript console (use Alt-Command-i if you are on a Mac to open developer tools and click Console), paste in this code and press Enter:
    var html = d3.select("svg")
            .attr("title", "test2")
            .attr("version", 1.1)
            .attr("xmlns", "http://www.w3.org/2000/svg")
            .node().parentNode.innerHTML;
    d3.select("body").append("div")
            .attr("id", "download")
            .html("Right-click on this preview and choose Save as<br />Left-Click to dismiss<br />")
            .append("img")
            .attr("src", "data:image/svg+xml;base64,"+ btoa(html));
    

    Credit for this code snippet goes to Chris Viau. One caveat with this code is that it works only if there is a single svg element in your DOM. Also, the svg tag has to be inside a container (i.e. a div tag). The code above can be amended easily for other settings.

  3. Scroll down, you should see a copy of the SVG image at the bottom of the page. Right-click on it and select "Save As", save the SVG to your computer.
  4. Open the downloaded SVG in Chrome or Safari, press Command-p to print the file, and select Print to PDF. Set appropriate paper size so that your image is not printed to a letter-sized paper. After you print the SVG to PDF, you can open it in, say, Adobe Illustrator to edit whitespace margins that are automatically added around the image.

By the way, you can practice on this page.

I also thank the wonderful d3 community on the d3-js Google Group for always being sharp and helpful, and, of course, my advisor Joe Blitzstein for letting me work on exciting projects and learn new techniques in the process.

Tags: , , ,

5 Responses to “How to convert d3.js SVG to PDF”

  1. Helder Velez says:

    Very helpful
    Merci, Obrigado, Thanks.

  2. Bert Balcaen says:

    Nice!

    One caveat: this doesn't work with UTF-8 encoded text. btoa() does not support this. The solution is an external Base64 library, like this one: http://www.webtoolkit.info/javascript-base64.html.

  3. Ricardo Rojas says:

    Thanks a lot!

    Is there any way of specifying the image filename?

  4. [...] also saw Sergiy’s tutorial on producing pdfs out of D3 visualizations. However, his technique works if there is a single svg [...]

Leave a Reply