Package detail

svg-crowbar

cy6erskunk2kMIT0.7.0

A library based on a Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file

svg-crowbar, png-crowbar

readme

SVG Crowbar Library

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'));

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

svgElement (required)

A DOM element selector for an SVG, e.g. document.querySelector('svg'). An error is thrown if no valid SVG element was provided.
filename (optional)

A string to set the filename. This is determined by element id, class or page title, when not provided explicitly.
options (optional)

An object literal. It presently has two configurable properties:
options.css (optional)

This setting determines how the SVG will be styled:
- 'inline'
  
  Default value. Inlines all computed styles on every element in the SVG. This setting best ensures that the exported SVG is accurate cross-browser.
- 'internal'
  
  Adds an internal block of styles containing only explicitly declared style rules (from document.styleSheets). This can drastically reduce file-sizes and build time in exported SVGs, but could be less accurate as it does not include styles from the browser's user agent stylesheet, or from cross-origin stylesheets (e.g. external webfonts).
- 'none'
  
  Doesn't add any CSS. This gives the smallest file-size, but you might need to manually add your own styles to exported SVGs to ensure an accurate output. You can do this by injecting a <style> block into the selected SVG before exporting.
Example:
```
const svg = document.querySelector('svg');

// Add inline styles on SVG elements:
downloadSvg(svg, 'my_svg'); 
downloadSvg(svg, 'my_svg', { css: 'inline' });

// Add a <style> block in the SVG:
downloadSvg(svg, 'my_svg', { css: 'internal' });

// Do not add CSS:
downloadSvg(svg, 'my_svg', { css: 'none' });
```

options.downloadPNGOptions.scale (optional)

This setting determines at which scale the final PNG image is created, for example when resolution is desired. The default scale is 1 (ie no scaling).

Example:

const svg = document.querySelector('svg');

// Download a normal-scaled PNG
downloadPng(svg, 'my_svg');
downloadPng(svg, 'my_svg', {downloadPNGOptions:{ scale: 1 }});

// Download a double-scaled PNG
downloadPng(svg, 'my_svg', {downloadPNGOptions:{ scale: 2 }});

UMD bundle

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.

changelog

Changelog

v0.6.0 (20/05/2020)

#153 feat(png): saved image uses device pixel ratio

<summary>Updated dependencies</summary>
#154 Update dependency electron to v9
#152 Update dependency electron to v8.3.0
#151 Update dependency eslint to v7
#150 Update jest monorepo to v26 (major)
#141 Update jest monorepo
#149 Update dependency @jest-runner/electron to v3
#148 Update dependency electron to v8.2.5
#147 Update babel monorepo to v7.9.6
#146 Update Node.js to v12.16.3
#145 Update dependency electron to v8.2.4
#122 Update dependency prettier to v2
#144 Pin dependency @babel/cli to 7.8.4

v0.5.0 (23/04/2020)

#119 Use transpiled but unbundled modules in published package

<summary>Updated dependencies</summary>
#143 Update dependency eslint-config-prettier to v6.11.0
#142 Update dependency webpack to v4.43.0
#140 Move all eslint config to one file
#139 Update to the latest Nodejs LTS
#138 Update dependency electron to v8.2.3
#137 Update dependency electron to v8.2.2
#136 Update dependency eslint-plugin-prettier to v3.1.3
#135 Update jest monorepo to v25.3.0
#134 Update dependency @babel/preset-env to v7.9.5
#133 Update dependency electron to v8.2.1
#132 Update dependency jest to v25.2.7
#131 Update jest monorepo to v25.2.6
#130 Update jest monorepo to v25.2.4
#129 Update jest monorepo to v25.2.3
#128 Update dependency jest to v25.2.2
#127 Update jest monorepo to v25.2.1
#126 Update jest monorepo to v25.2.0
#125 Update dependency electron to v8.2.0
#124 Update dependency webpack to v4.42.1

v0.4.0 (23/03/2020)

#118 Remove references to global window object to fix SSR builds

<summary>Updated dependencies</summary>
#123 Update dependency eslint-config-prettier to v6.10.1
#121 Update babel monorepo to v7.9.0
#117 Update dependency electron to v8.1.1

v0.3.1 (06/03/2020)

#114 Add test & build task to prepublishOnly script
#116 Update dependency electron to v8.1.0
#115 Update babel monorepo to v7.8.7
#112 Update dependency electron to v8.0.3
#111 Update dependency webpack to v4.42.0
#110 Update babel monorepo to v7.8.6
#109 Update dependency electron to v8.0.2
#108 Update dependency babel-eslint to v10.1.0

v0.3.0 (21/02/2020)

#87 Add 3rd CSS argument to allow inline/internal/none

<summary>Update dependencies:</summary>
#72 Update babel monorepo to v7.7.0
#71 Update dependency electron to v6.1.4
#70 Update dependency electron to v6.1.3
#69 Update dependency webpack-cli to v3.3.10
#68 Update dependency eslint-config-prettier to v6.5.0
#67 Update dependency eslint to v6.6.0
#66 Update dependency electron to v6.1.2
#65 Update dependency electron to v6.1.1
#64 Update dependency electron to v6.1.0
#62 Update dependency webpack to v4.41.2
#61 Update dependency webpack to v4.41.1
#60 Update dependency @babel/core to v7.6.4
#59 Update dependency electron to v6.0.12
#58 Update babel monorepo to v7.6.3
#104 Update dependency electron to v8
#107 Update dependency electron to v6.1.8
#106 Update dependency webpack-cli to v3.3.11
#105 Update dependency webpack to v4.41.6
#101 Update jest monorepo to v25 (major)
#103 Update babel monorepo to v7.8.4
#102 Update dependency eslint-config-prettier to v6.10.0
#100 Update babel monorepo to v7.8.3
#99 Update dependency @babel/preset-env to v7.8.2
#98 Update babel monorepo to v7.8.0
#94 Update dependency webpack to v4.41.5
#97 Update dependency eslint-config-prettier to v6.9.0
#96 Update dependency eslint-config-prettier to v6.8.0
#95 Update dependency eslint to v6.8.0
#93 Update babel monorepo to v7.7.7
#92 Update dependency electron to v6.1.7
#91 Update dependency webpack to v4.41.3
#90 Update dependency eslint-plugin-prettier to v3.1.2
#89 Update dependency electron to v6.1.6
#88 Update dependency @babel/preset-env to v7.7.6
#82 Update babel monorepo to v7.7.5
#86 Update dependency @jest-runner/electron to v2.0.3
#85 Update dependency eslint to v6.7.2
#83 Update dependency eslint to v6.7.1
#81 Update dependency eslint to v6.7.0
#80 Update dependency electron to v6.1.5
#79 Update dependency eslint-config-prettier to v6.7.0
#78 Update dependency eslint-config-prettier to v6.6.0
#77 Update dependency prettier to v1.19.1
#76 Update dependency prettier to v1.19.0
#74 Update dependency @babel/core to v7.7.2
#73 Update dependency @babel/preset-env to v7.7.1

v0.2.4 (07/10/2019)

<summary>Update dependencies:</summary>

#57 Update dependency eslint-config-prettier to v6.4.0
#56 Update dependency electron to v6.0.11
#55 Update dependency eslint to v6.5.1
#54 Update dependency eslint to v6.5.0
#53 Update dependency webpack to v4.41.0
#52 Update babel monorepo to v7.6.2
#51 Update dependency electron to v6.0.10
#50 Update dependency eslint-plugin-prettier to v3.1.1
#49 Update dependency webpack-cli to v3.3.9
#48 Update dependency eslint to v6.4.0
#47 Update dependency webpack to v4.40.2
#46 Update dependency webpack to v4.40.1
#45 Update dependency webpack to v4.40.0
#44 Update dependency electron to v6.0.9
#43 Update dependency eslint-config-prettier to v6.3.0
#42 Update dependency electron to v6.0.8
#41 Update babel monorepo to v7.6.0
#40 Update dependency webpack-cli to v3.3.8
#39 Update dependency eslint-config-prettier to v6.2.0
#38 Re-configure Renovate automerge
#30 Update dependency webpack-cli to v3.3.7
#29 Update jest monorepo to v24.9.0
#26 Update dependency webpack to v4.39.3
#32 Update dependency eslint-config-prettier to v6.1.0
#31 Update dependency eslint to v6.3.0
#34 Update dependency babel-eslint to v10.0.3
#37 Configure renovate auto-merge
#27 Update dependency electron to v6
#36 Bump mixin-deep from 1.3.1 to 1.3.2
#35 Bump eslint-utils from 1.4.0 to 1.4.2
#28 Update dependency electron to v5.0.9
#25 Update dependency electron to v5.0.8
#24 Update dependency eslint to v6.1.0
#23 Update babel monorepo to v7.5.5
#22 Update dependency webpack to v4.37.0
#21 Update dependency electron to v5.0.7
#20 Update dependency webpack-cli to v3.3.6
#19 Bump lodash from 4.17.11 to 4.17.14
#18 chore(deps): update babel monorepo to v7.5.4
#17 chore(deps): update dependency webpack to v4.35.3
#16 Bulk update devDependencies

v0.2.3 (24/06/2019)

Actually do the release as v0.2.2 is identical to v0.2.1 🤦

v0.2.2 (24/06/2019)

#2 Replace non-latin characters with hex codes before encoding

<summary>Update dependencies:</summary>
#8 Update dependency webpack-cli to v3.3.4
#9 Update dependency eslint-config-prettier to v5
#6 Update and lock dependencies
#5 Fix travis config
#1 Configure Renovate

v0.2.1 (07/02/2019)

fix(svg|png): generate files when filenames were not provided (1d23727)

v0.2.0 (13/01/2019)

feat: allow specify filename explicitly (7cc89e6)

v0.1.0 (26/12/2018)

No changelog for this release.