resvg-js

resvg-js is a high-performance SVG renderer, powered by Rust based resvg and napi-rs.

Fast, safe and zero dependencies!
No need for node-gyp and postinstall, the .node file has been compiled for you.
Cross-platform support, including Apple M1.
Support system fonts and custom fonts in SVG text.
Support WebAssembly.

Installation

npm i @resvg/resvg-js
cnpm i @resvg/resvg-js
pnpm i @resvg/resvg-js

Example

This example will load Source Han Serif, and then render the SVG to PNG.

node example/index.js

Loaded 1 font faces in 0ms.
Font './example/SourceHanSerifCN-Light-subset.ttf':0 found in 0.006ms.
✨ Done in 55.65491008758545 ms

SVG	PNG

Usage

Node.js

const { promises } = require('fs')
const { join } = require('path')
const { performance } = require('perf_hooks')

const { render } = require('@resvg/resvg-js')

async function main() {
  const svg = await promises.readFile(join(__dirname, './text.svg'))
  const t = performance.now()
  const pngData = render(svg, {
    background: 'rgba(238, 235, 230, .9)',
    fitTo: {
      mode: 'width',
      value: 1200,
    },
    font: {
      fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'], // Load custom fonts.
      loadSystemFonts: false, // It will be faster to disable loading system fonts.
      defaultFontFamily: 'Source Han Serif CN Light',
    },
    logLevel: 'debug',
  })
  console.info('✨ Done in', performance.now() - t, 'ms')

  await promises.writeFile(join(__dirname, './text-out.png'), pngData)
}

main()

WebAssembly

Although we support the use of WASM packages in Node.js, this is not recommended. The native addon performs better.

Browser(ES Modules)

import { render, initWasm } from '@resvg/resvg-wasm'
;(async function () {
  // The wasm must be initialized first,
  await initWasm(fetch('/your/path/index_bg.wasm'))
  const opts = {
    fitTo: {
      mode: 'width', // If you need to change the size
      value: 800,
    },
  }

  const svg = '<svg> ... </svg>' // input svg, String or Uint8Array
  const png = render(svg, opts) // PNG data, Uint8Array
  const svgUrl = URL.createObjectURL(new Blob([png], { type: 'image/png' }))
  document.getElementById('output').src = svgUrl
})()

See playground.

Benchmark

Running "resize width" suite...
  resvg-js(Rust):
    12 ops/s, ±22.66%   | fastest 🚀

  sharp:
    9 ops/s, ±64.52%    | 25% slower

  skr-canvas(Rust):
    7 ops/s, ±3.72%    | 41.67% slower

  svg2img(canvg and node-canvas):
    6 ops/s, ±16.94%    | slowest, 50% slower

Support matrix

	node12	node14	node16
Windows x64	✓	✓	✓

Windows x32	✓	✓	✓

Windows arm64	✓	✓	✓

macOS x64	✓	✓	✓

macOS arm64(M1)	✓	✓	✓

Linux x64 gnu	✓	✓	✓

Linux x64 musl	✓	✓	✓

Linux arm gnu	✓	✓	✓

Linux arm64 gnu	✓	✓	✓

Linux arm64 musl	✓	✓	✓

Android arm64	✓	✓	✓

Android armv7	✓	✓	✓

Test or Contributing

Install latest Rust
Install Node.js@10+ which fully supported Node-API

Install wasm-pack

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Build Node.js bindings

npm i
npm run build
npm test

Build WebAssembly bindings

npm i
npm run build:wasm
npm run test:wasm

Roadmap

I will consider implementing the following features, if you happen to be interested, please feel free to discuss with me or submit a PR.

Support async API
Upgrade to napi-rs v2
Support WebAssembly(.wasm)
Support for getting SVG Bounding box
Output usvg-simplified SVG string
Support for generating more lossless bitmap formats, e.g. avif, webp, JPEG XL

Release package

We use GitHub actions to automatically publish npm packages.

# 1.0.0 => 1.0.1
npm version patch

# or 1.0.0 => 1.1.0
npm version minor

License

MPLv2.0

JoKalliauer/resvg-js