svg2img
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.2 • Public • Published

    node-svg2img

    CircleCI npm version

    A high-performance in-memory convertor to convert SVG to png/jpeg images for Node.js.

    Starting with v1.0, we switched to resvg-js for better performance and compatibility to render SVG.

    Please notice: this library is only for Node.js, can not run in browsers. (If your Node.js version is lower, you can npm i svg2img@0.6.3 instead which only required Node.js v4)

    Install

    npm i svg2img@next

    Usage

    Conversion

    const fs = require('fs');
    const svg2img = require('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

    Keywords

    none

    Install

    npm i svg2img

    DownloadsWeekly Downloads

    5,583

    Version

    1.0.0-beta.2

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • yisi
    • fuzhenn