Export an image from a d3.js page as a SVG or bitmap

The following post is a portion of the D3 Tips and Tricks book which is free to download. To use this post in context, consider it with the others in the blog or just download the the book as a pdf / epub or mobi .

---------------------------------------------------------- 

At some point you will want to take your lovingly crafted D3 graphical masterpiece and put it in a
(close your eyes if you're squeamish) Power Point presentation or Word document or export it for sharing in some other way.

There could be many reasons for wanting to do this and some may be more complicated than I will be willing to explore, but for the occasional conversion of images I have found what I regard as a fairly easy process.

Before we begin our exporting odyssey, let's cover a little bit of housekeeping and describe the difference between a vector graphic (in this case specifically Scalable Vector Graphics) and a bitmap. Please skip ahead if you're comfortable with the terms.

Bitmaps

 A bitmap (or raster) image is one that is composed of lots of discrete individual dots (let's call them pixels) which, when joined together (and zoomed out a bit) give the impression of an image.

If we use the example of the force layout example we developed, and look at a screen shot (and it's important to remember that this is a screen shot) of the image we see a picture that looks fairly benign.

 However, as we enlarge the image by doubling it's size (x 2) we begin to see some rough edges appear.

 And if we enlarge it by doubling again (x 4) , it starts to look decidedly rough.

 Doubling again (x 8), starts to show the pixels pretty clearly.

 Doubling again for the last time (x 16) and the pixels are plainly evident.

 Bitmaps can be saved in a wide range of formats depending on users requirements including compression, colour depth, transparency and a host of other attributes. Typically they can be identified by the file suffix .jpg, .png or .bmp (and there are an equally large number of other suffixes).

This will be the type of format that most people will be familiar with for images and their ubiquity with the advent of digital cameras almost makes it redundant to describe them.

However, there is another type of image and it is even more important to d3.js users.

Vector Graphics (Specifically SVG)

Scalable Vector Graphics (SVG) use a technique of drawing an image that relies more on a description of an image than the final representation that a user sees. Instead of arranging individual pixels on an image is created by describing the way the image is created.

For instance, drawing a line would be accomplished by defining two sets of coordinates and specifying a line of a particular width and colour be drawn between the points.

This might sound a little long winded, and it does create a sense of abstraction, but it is a far more powerful mechanism for drawing as there is no loss of detail with increasing scale. Changes to the image can be simply carried out by adjusting the coordinates, colour description, line width or curve diameter. If this all sounds a little familiar, you have *definitely* been paying attention, because this is the heart of the way that d3.js draws images in a browser. It uses a combination of coordinates, shapes and attributes to create vector images in a web page.

As a demonstration of the difference, here is the same original picture which I have saved as a SVG image.

 Enlarged by doubling it's size (x 2) everything looks smooth.

 If we enlarge it by doubling again (x 4) , it still looks good.

 Doubling again (x 8) and we can see that the text 'James' is actually composed of a fill colour and a border.

 Doubling again for the last time (x 16) everything still retains it's clear sharp edges.

Let's get exporting!

We'll use a three stage process for exporting our image (assuming the desired end result is a bitmap) and usefully, the first stage will result in us having a vector image as well!

The sequence will go as follows:

1. Copy the image from the web page and save it as a SVG file
2. Open the SVG image in a program designed to use vector images and edit it if required.
3. Export that image as a bitmap

Copying the image off the web page

Getting the image out of a web page is made easy by using 'SVG Crowbar'. This is a "*A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file*". What that means is that once you drag the bookmarklet from the web page to your bookmarks (You need to be using Google Chrome, and I'm told that about 60% of the people who visit d3noob.org do) you're ready to go.

Now when you have a web page open that's displaying a D3 creation, all you need to do is click on the SVG Crowbar bookmark and you will be prompted for a location to save a svg image.

Really. It's that simple.

Open the SVG Image and Edit

Obviously now that you have a SVG image, you need to be able to do something with it. My preferred software for this is Inkscape.

 Inkscape is "*An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format*".

It really is an extremely capable drawing program and it is capable of a lot more than the job we're going to use it for, so you may find it has other uses that may be valuable.

Once installed, you can open the saved file directly into Inkscape.

While here you can edit the drawing to your hearts delight. I particularly recommend ungrouping the diagram and removing or adjusting individual elements if required.

Once you have finished editing, you are ready for the final step.

Saving as a bitmap

While still in Inkscape, go to the 'File', 'Export Bitmap...' menu.

This will open a dialog box where you can select an appropriate resolution and location for your bitmap and then press the export button.

There you go.

It is worth knowing that the default settings here will export the diagram with a transparent background (using *.png) which will fit in nicely with a wide range of graphical end uses.

The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).