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:
- 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.) - The SVG needs to have the proper namespaces and document types.
- 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.