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.
Should the
new Blob
technique work in Safari? What I'm experiencing is that it works in FF/Chrome but not in Safari. By using the technique described here it'll work in Safari as well.Edit: should've read the readme :D. Yep, you were already aware of this.