svg-crowbar
Advanced tools
svg-crowbar - npm Package Compare versions
Comparing version 0.2.4 to 0.3.0-0
| { | ||
| "name": "svg-crowbar", | ||
| "version": "0.2.4", | ||
| "version": "0.3.0-0", | ||
| "description": "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", | ||
@@ -27,17 +27,17 @@ "main": "./dist/main.js", | ||
| "devDependencies": { | ||
| "@babel/core": "7.6.2", | ||
| "@babel/preset-env": "7.6.2", | ||
| "@babel/core": "7.8.4", | ||
| "@babel/preset-env": "7.8.4", | ||
| "@cyberskunk/eslint-config": "1.0.0", | ||
| "@jest-runner/electron": "2.0.2", | ||
| "@jest-runner/electron": "2.0.3", | ||
| "babel-core": "7.0.0-bridge.0", | ||
| "babel-eslint": "10.0.3", | ||
| "babel-jest": "24.9.0", | ||
| "electron": "6.0.11", | ||
| "eslint": "6.5.1", | ||
| "eslint-config-prettier": "6.4.0", | ||
| "eslint-plugin-prettier": "3.1.1", | ||
| "jest": "24.9.0", | ||
| "prettier": "1.18.2", | ||
| "webpack": "4.41.0", | ||
| "webpack-cli": "3.3.9" | ||
| "babel-jest": "25.1.0", | ||
| "electron": "8.0.1", | ||
| "eslint": "6.8.0", | ||
| "eslint-config-prettier": "6.10.0", | ||
| "eslint-plugin-prettier": "3.1.2", | ||
| "jest": "25.1.0", | ||
| "prettier": "1.19.1", | ||
| "webpack": "4.41.6", | ||
| "webpack-cli": "3.3.11" | ||
| }, | ||
@@ -44,0 +44,0 @@ "babel": { |
@@ -8,3 +8,3 @@ # SVG Crowbar Library | ||
| The library provides functionality to trigger a download of a given SVG file having alle the styles inlined, | ||
| 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. | ||
@@ -18,3 +18,3 @@ | ||
| downloadSvg(document.querySelector('svg'), 'my_svg'); | ||
| downloadSvg(document.querySelector('svg')); | ||
| ``` | ||
@@ -25,7 +25,53 @@ or | ||
| downloadPng(document.querySelector('svg')); | ||
| downloadPng(document.querySelector('svg'), 'my_svg', { css: 'internal' }); | ||
| ``` | ||
| Filename is determined by element id, class or page title, when not provided explicitly. | ||
| The `downloadSVG`/`downloadPNG` functions each have three arguments: | ||
| An error is thrown in case no valid SVG element was provided. | ||
| ```javascript | ||
| downloadSVG(svgElement, [filename], [options]) | ||
| downloadPNG(svgElement, [filename], [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 just a single configurable property: | ||
| - **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 if the styles are not consistent cross-browser, as it does not include styles from the browser's user agent stylesheet. | ||
| - **`'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: | ||
| ```javascript | ||
| 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' }); | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.67%
9591
- Number of lines in readme file
- increased by155.17%
74
No dependency changes