SVG Crowbar

A bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and enables you to download 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).

The Bookmarklet

SVG Crowbar → Drag this to your browser bookmarks bar.

After you’ve installed the bookmarklet, you can execute it on any page.

(You can click on the link instead to test it on this page immediately.)

A Sample SVG for testing purposes.

Notes

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.

Some styles won’t propogate down if they depend on markup outside 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.