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 output image can also have padding applied via the padding option. This reduces the size of the rendered SVG within the generated output image so that the dimensions match the desired width and height, inclusive of padding.

The generated PNG renders with transparency by default. This can be disabled with the opaque option, or by setting the backgroundColor option to any valid CSS color declaration.

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

await convert('image.svg', 'image.png', {
    backgroundColor: 'rgba(245,255,100,0.5)',
    overwrite: true,
    padding: 20,
    height: 500,
    trim: true
});

As a command line utility:

$ svpng --trim --width 1200 image.svg image.png
PNG written to "image.png" in 0.358359246s

$ svpng -t -h 500 -p 20 -y -b "rgba(245,255,100,0.5)" image.svg image.png
PNG written to "image.png" in 0.428329412s

$ svpng --trim --height 500 --padding 20 --overwrite --backgroundColor "rgba(245,255,100,0.5)" image.svg image.png
PNG written to "image.png" in 0.458329244s


$ svpng -H

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

Converts SVGs to PNGs

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
  -p, --padding <number>           set the amount of padding around output image (default: 0)
  -b, --backgroundColor <color>    set the background color of the output image as any valid CSS color
  -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