Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

svg-crowbar

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svg-crowbar

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

  • 0.7.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
943
increased by37.46%
Maintainers
1
Weekly downloads
 
Created
Source

SVG Crowbar Library

NPM version code style: prettier 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

  • 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.

Keywords

FAQs

Package last updated on 09 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc