svpng

svpng

Converts SVGs to PNGs

This module uses Puppeteer to produce a PNG screenshot of an SVG at desired dimensions. The aspect ratio of the SVG will be maintained, and no distortion will occur if the desired width and height do not share the same aspect ratio as the SVG. For this reason, it is often necessary to pass only either a height or width value.

The module optionally trims the SVG to its path bounds by defining a viewbox dynamically based on the SVG's bounding box, removing the whitespace around the SVG.

The generated PNG renders with transparency by default. This can be disabled with the opaque option.

Installation

Install via npm for use as a Node module:

$ npm i svpng

Install globally for use as a command line utility:

$ npm i -g svpng

Usage

As a module:

const convert = require('svpng');

await convert('image.svg', 'image.png', {width: 1200, trim: true});

As a command line utility:

$ svpng -t -w 1200 image.svg image.png
PNG written to "image.png" in 0.358359246s

$ svpng -H

Usage: svpng [options] <source> <output>

Converts an SVG to a PNG

Options:
  -V, --version                    output the version number
  -h, --height <number>            set the height of the output image
  -w, --width <number>             set the width of the output image
  -f, --defaultSvgLength <number>  width and height to render output if SVG dimensions are invalid (default: 1000)
  -y, --overwrite                  overwrite output file if exists (default: false)
  -t, --trim                       trim the output image to the bounds of the SVG (default: false)
  -o, --opaque                     save the output image with an opaque background (default: false)
  -H, --help                       output usage information

Tests, Coverage, and Linting

Tests are written with tape, coverage reports are generated by nyc, and code linting from xo.

Run the tests via npm test:

$ npm test

Create a coverage report via npm run coverage:

$ npm run coverage

Lint code via npm run lint:

$ npm run lint

Documentation

jsdoc-based documentation can be generated via npm run docs:

$ npm run docs

Alternatives

There is a similar PhantomJS based module svg2png, but it runs slower (which I assume is due to performance gains from using Puppeteer) and does not provide the ability to trim the SVG.