npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kulbot-save-svg-as-png

v0.2.0

Published

Convert a browser SVG to PNG or dataUri

Downloads

4

Readme

saveSvgAsPng

Installation

npm install save-svg-as-png

Prerequisites

SaveSvgAsPng relies on JavaScript promises, so any browsers that don't natively support the standard Promise object will need to have a polyfill.

Usage

To save a PNG, include the script saveSvgAsPng.js in your page, then call the saveSvgAsPng function with an SVG node and a filename:

saveSvgAsPng(document.getElementById("diagram"), "diagram.png");

The filename is the preferred filename when saving the image to the file system. The browser may change the name of the file if there is already a file by that name in the target directory.

If you want to scale the image up or down, you can pass a scale factor in an options object:

saveSvgAsPng(document.getElementById("diagram"), "diagram.png", {scale: 0.5});

Other options are documented below.

If you just want a dataURI for an SVG, you can call svgAsDataUri, which returns a promise:

svgAsDataUri(document.getElementById("diagram"), options).then(uri => ...);

If you want a dataURI of a PNG generated from an SVG, you can call svgAsPngUri, which also returns a promise:

svgAsPngUri(document.getElementById("diagram"), options).then(uri => ...);

Compatible with browserify and requirejs.

If you want to use TypeScript, necessary type definitions are available in Typings public registry.

Options

  • backgroundColor — Creates a PNG with the given background color. Defaults to transparent.
  • canvg - If canvg is passed in, it will be used to write svg to canvas. This will allow support for Internet Explorer
  • encoderOptions - A Number between 0 and 1 indicating image quality. The default is 0.8
  • encoderType - A DOMString indicating the image format. The default type is image/png.
  • fonts - A list of {text, url, format} objects the specify what fonts to inline in the SVG. Omitting this option defaults to auto-detecting font rules.
  • height - Specify the image's height. Defaults to the viewbox's height if given, or the element's non-percentage height, or the element's bounding box's height, or the element's CSS height, or the computed style's height, or 0.
  • left - Specify the viewbox's left position. Defaults to 0.
  • modifyCss - A function that takes a CSS rule's selector and properties and returns a string of CSS. Supercedes selectorRemap and modifyStyle. Useful for modifying properties only for certain CSS selectors.
  • modifyStyle - A function that takes a CSS rule's properties and returns a string of CSS. Useful for modifying properties before they're inlined into the SVG.
  • scale — Changes the resolution of the output PNG. Defaults to 1, the same dimensions as the source SVG.
  • selectorRemap — A function that takes a CSS selector and produces its replacement in the CSS that's inlined into the SVG. Useful if your SVG style selectors are scoped by ancestor elements in your HTML document.
  • top - Specify the viewbox's top position. Defaults to 0.
  • width - Specify the image's width. Defaults to the viewbox's width if given, or the element's non-percentage width, or the element's bounding box's width, or the element's CSS width, or the computed style's width, or 0.
  • excludeUnusedCss - Exclude CSS rules that don't match any elements in the SVG.
  • excludeCss - Exclude all CSS rules

Testing

run tests with tape

npm test

Support

Chrome limits data URIs to 2MB, so you may have trouble generating PNGs beyod a certain size.

Internet Explorer will only work if canvg is passed in, otherwise it will throw a SecurityError when calling toDataURL on a canvas that's been written to. canvg may have it's own issues with SVG support, so make sure to test the output.