Git Product home page Git Product logo

svg2img's Introduction

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

svg2img's People

Contributors

fajarkim avatar dependabot[bot] avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.