An example of creating a PNG from an SVG in D3.

This is an example of creating a PNG from an SVG. (You should notice that you’re able to right click on the last image and save it as a PNG image.) It has been Tested in Firefox and Chrome but doesn’t work in Safari as of 2014-07-20.

Normally, you’ll create your SVG in D3 but to make the example a bit more readable, the SVG is already placed in the document. There are a few important points. Namely:

1. All the styles of the SVG need to be self contained in side of the <defs> tags. (These styles should be escaped using the <![[CDATA[ ... ]] tag.)
2. The SVG needs to have the proper namespaces and document types.
3. The SVG needs to be saved to an image, then read from an canvas element, then saved to an image again.

Note: Portions of this demo where taken from The New York Times’ excellent Crowbar SVG extractor.