svg2img

A versatile Node.js library for converting SVG images to various formats, including PNG and JPEG, with customizable options and rendering capabilities.

Install

npm i @fajarkim/svg2img

Usage

Conversion

const fs = require('fs');
const svg2img = require('@fajarkim/svg2img');
const btoa = require('btoa');

const svgString = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="236" height="120" viewBox="0 0 236 120"><rect x="14" y="23" width="200" height="50" fill="#55FF55" stroke="black" stroke-width="1" /></svg>`;

//1. Convert from svg string
svg2img(svgString, function(error, buffer) {
    //returns a Buffer
    fs.writeFileSync('foo1.png', buffer);
});

//2. Convert from svg's base64 string
svg2img(
    'data:image/svg+xml;base64,' + btoa(svgString),
    function(error, buffer) {
        fs.writeFileSync('foo2.png', buffer);
});

fs.writeFileSync('foo.svg', new Buffer(svgString));

//3. Convert from a local file
svg2img(__dirname + '/foo.svg', function(error, buffer) {
    fs.writeFileSync('foo3.png', buffer);
});

//4. Convert from a remote file
svg2img(
    'https://upload.wikimedia.org/wikipedia/commons/a/a0/Svg_example1.svg',
    function(error, buffer) {
        fs.writeFileSync('foo4.png', buffer);
});

//5. Convert to jpeg file
svg2img(svgString, { format: 'jpg', 'quality': 75 }, function(error, buffer) {
    //default jpeg quality is 75
    fs.writeFileSync('foo5.jpg', buffer);
});

Scale

You can scale the svg by giving width or height, svg2img Always maintain aspect ratio.

svg2img(__dirname + '/foo.svg', {
    resvg: {
        fitTo: {
            mode: 'width', // or height
            value: 600,
        },
    }
} ,function(error, buffer) {
    fs.writeFileSync('foo.png', buffer);
});

More options

resvg-js supports more features, such as Loading fonts, setting background, crop, etc.

In svg2img, you can configure it with the resvg option.

export type ResvgRenderOptions = {
  font?: {
    loadSystemFonts?: boolean
    fontFiles?: string[]
    fontDirs?: string[]
    defaultFontFamily?: string
    defaultFontSize?: number
    serifFamily?: string
    sansSerifFamily?: string
    cursiveFamily?: string
    fantasyFamily?: string
    monospaceFamily?: string
  }
  dpi?: number
  languages?: string[]
  shapeRendering?:
    | 0 // optimizeSpeed
    | 1 // crispEdges
    | 2 // geometricPrecision
  textRendering?:
    | 0 // optimizeSpeed
    | 1 // optimizeLegibility
    | 2 // geometricPrecision'
  imageRendering?:
    | 0 // optimizeQuality
    | 1 // optimizeSpeed
  fitTo?:
    | { mode: 'original' }
    | { mode: 'width'; value: number }
    | { mode: 'height'; value: number }
    | { mode: 'zoom'; value: number }
  background?: string // Support CSS3 color, e.g. rgba(255, 255, 255, .8)
  crop?: {
    left: number
    top: number
    right?: number
    bottom?: number
  }
  logLevel?: 'off' | 'error' | 'warn' | 'info' | 'debug' | 'trace'
}

Run the Test

    npm i
    npm test