svg-crowbar
A Chrome bookmarklet that extracts SVG nodes and styles from HTML documents and downloads them as editable SVG files.
What is svg-crowbar?
SVG Crowbar is a Chrome bookmarklet that extracts SVG elements and their styles from web pages, enabling users to download them as editable SVG files. It solves the problem of needing to export web-based vector graphics for high-resolution printing or further editing in design software. The tool is especially useful for preserving the visual integrity of complex SVG visualizations created with libraries like d3.js.
Web developers, data visualization engineers, and designers who create SVG graphics in the browser and need to export them for print or professional editing.
Developers choose SVG Crowbar for its simplicity—it requires no installation and works directly in Chrome—and its ability to accurately capture both SVG structure and styles, ensuring exported graphics look exactly as they do in the browser.
Overview
Extracts an SVG node and accompanying styles from an HTML document and allows you to download it all as an SVG file.
Use Cases
Best For
- Exporting d3.js visualizations for print or presentations
- Converting interactive web graphics into editable vector files
- Preserving SVG styles when moving from web to design software
- Creating high-resolution print materials from web-based SVGs
- Extracting SVG charts or diagrams for offline use
- Debugging or analyzing SVG structure and styles from live web pages
Not Ideal For
- Projects requiring cross-browser SVG extraction tools
- Automated workflows that need batch SVG export without manual intervention
- Teams using browsers other than Chrome for development and testing
Pros & Cons
Pros
Runs as a bookmarklet with no installation required, making it instantly accessible for quick exports directly in Chrome, as highlighted in the README.
Extracts both SVG nodes and their computed styles, ensuring the downloaded file maintains visual fidelity for editing in software like Adobe Illustrator.
Specifically designed for d3.js graphics, making it highly effective for exporting complex data visualizations, as noted in the project description.
Generates standalone SVG files that can be opened in professional design tools, bridging the gap between web-based graphics and print media.
Cons
Only works in Chrome, excluding users of other browsers and limiting its applicability in diverse development environments.
Requires user interaction via a bookmarklet for each export, making it inefficient for automated, batch, or server-side workflows.
Captures SVGs as they exist at the time of clicking, so dynamic changes or animations after page load are not preserved in the exported file.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.