@resvg/resvg-js

What is @resvg/resvg-js?

@resvg/resvg-js is an npm package that provides a JavaScript interface for the Resvg library, which is used for rendering SVG files. It allows you to convert SVG files to various formats, manipulate SVG elements, and perform other SVG-related tasks.

What are @resvg/resvg-js's main functionalities?

Render SVG to PNG

This feature allows you to render an SVG file to a PNG image. The code sample demonstrates how to load SVG data, render it using Resvg, and save the output as a PNG file.

const { Resvg } = require('@resvg/resvg-js');
const fs = require('fs');

const svgData = '<svg>...</svg>'; // Your SVG data here
const resvg = new Resvg(svgData);
const pngData = resvg.render().asPng();
fs.writeFileSync('output.png', pngData);

Render SVG to JPEG

This feature allows you to render an SVG file to a JPEG image. The code sample demonstrates how to load SVG data, render it using Resvg, and save the output as a JPEG file.

const { Resvg } = require('@resvg/resvg-js');
const fs = require('fs');

const svgData = '<svg>...</svg>'; // Your SVG data here
const resvg = new Resvg(svgData);
const jpegData = resvg.render().asJpeg();
fs.writeFileSync('output.jpeg', jpegData);

Render SVG to WebP

This feature allows you to render an SVG file to a WebP image. The code sample demonstrates how to load SVG data, render it using Resvg, and save the output as a WebP file.

const { Resvg } = require('@resvg/resvg-js');
const fs = require('fs');

const svgData = '<svg>...</svg>'; // Your SVG data here
const resvg = new Resvg(svgData);
const webpData = resvg.render().asWebp();
fs.writeFileSync('output.webp', webpData);

Other packages similar to @resvg/resvg-js

sharp

Sharp is a high-performance image processing library for Node.js. It supports a wide range of image formats, including SVG, and can convert SVG files to other formats like PNG, JPEG, and WebP. Compared to @resvg/resvg-js, Sharp offers more general image processing capabilities but may not be as specialized in SVG rendering.

svg2img

svg2img is a simple library for converting SVG files to various image formats such as PNG, JPEG, and WebP. It is similar to @resvg/resvg-js in terms of functionality but may not offer the same level of performance and customization options.

canvg

Canvg is a library that allows you to render SVG files on an HTML5 canvas. It can be used to convert SVG to raster images by drawing the SVG on a canvas and then exporting the canvas content. While it provides similar functionality to @resvg/resvg-js, it is more focused on web-based applications and may not be as efficient for server-side rendering.

README

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-js-wasm'
;(async function () {
  // The wasm must be initialized first
  await initWasm(fetch('./index_bg.wasm'))
  const opts = {
    fitTo: {
      mode: 'width',
      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	npm
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

Copyright (c) 2021-present, yisibl(一丝)

Changelog

[2.0.0-alpha.0] - 2022-02-15

resvg-js now supports WebAssembly 🎉 What can I do now?

• You can convert SVG to PNG in the browser or Web Worker
• We provide Playground for direct use: https://resvg-js.vercel.app

With WebAssembly, resvg-js gains broader cross-platform compatibility, all by loading only about 2MB of Wasm files. And, the API is consistent with the Node.js side.

The current version of Wasm does not support loading fonts, so please submit an issue if you have a request.

Added

• feat: support WebAssembly(wasm32 target) via wasm-bindgen (#51)
• feat: add WebAssembly playground
• feat: upgrade resvg to 0.21.0
• feat: upgrade to napi-rs 2.1.0 (#60)
• chore: improved error message when output PNG size is 0 (#58)
• doc: add Node.js and WebAssembly usage documentation (#63)