A fork of the nytimes svg-crowbar bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint). It was created with d3.js in mind, but it should work fine no matter how you choose to generate your SVG.
Code is on github here.
Can use to download specific svg, which can be incorporated into buttons for exporting images. See example below.
Allows specification of custom file names.
Handles embedded raster images.
Has convenience method for embedding raster images.
Pixels will map to points when opening in Illustrator.
Dimensions of the document will be the same as the dimensions of your SVG element.
All colors are RGB, which is not ideal for print documents, but CMYK is not supported in SVG 1.1.
It only works in Chrome.
Currently the https version of the script is being served from raw.github.com, which might break in the future. If the script stops running on https pages, check back here—you might have to re-install the bookmarklet at that time.
Descendent ">" CSS selectors will crash Adobe Illustrator, therefore those styles are stripped out. Be warned.
Adobe Illustrator also chokes on fonts that it doesn’t recognize. Font-family assigments like “sans-serif” (or if you're using webfonts like “nyt-franklin”) will cause Illustrator to give this error when opening the file: “The operation cannot complete because of an unknown error. [CANT]”. This is fixed in Illustrator version 17.1. Other SVG viewers are pretty okay with them though.
Some styles won’t propogate down if they depend on markup outside of the svg element. For instance, if you use CSS that targets an SVG path element by an id on the div surrounding the SVG ("#map svg path") then those styles won’t show up in the resulting file.