A Chrome-specific 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.
SVG Crowbar ← Drag this to your bookmarks bar.
After you’ve installed the bookmarklet, you can execute it on any page. Go ahead and try it out on this crazy map.
(You can click on the link instead to test it on this page immediately.)
Some users reported that styles were not stored with the SVG files, so we added a new version that should work everywhere. The new method is slower, so loading can take a while on pages with many SVG elements. Still in beta.
SVG Crowbar 2 ← Drag this to your bookmarks bar.
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.