svg-crowbar

Extracts an SVG with accompanying styles from an HTML document and allows to download it as an SVG or a PNG file


Project maintained by cy6erskunk Hosted on GitHub Pages — Theme by mattgraham

SVG Crowbar Library

NPM version code style: Biome Build status Copy README to gh-pages branch

A standalone 3.5Kb JS client library based on Chrome bookmarklet.

The library provides functionality to trigger a download of a given SVG file having all the styles inlined, to make it look the same when opened independently from the original HTML page.

It is also possible to use this library to convert an SVG to a PNG before downloading.

Usage

import downloadSvg from 'svg-crowbar';

downloadSvg(document.querySelector('svg'));

or

import { downloadPng } from 'svg-crowbar';

downloadPng(document.querySelector('svg'), 'my_svg', { css: 'internal' });

The downloadSVG/downloadPNG functions each have three arguments:

downloadSVG(svgElement, [filename], [options])
downloadPNG(svgElement, [filename], [options])

Options

Thanks to @richardwestenra there’s UMD bundle available in the package: simply add

<script src="node_modules/svg-crowbar/dist/main.js"></script>

to get downloadSvg and downloadPng global function.

Playwright tests

Currently Chrome with deviceScaleFactor: 2 is run agains manual-tests, comparing screenshots.