@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 and toolkit, powered by Rust based resvg and napi-rs.

Features

• Fast, safe and zero dependencies.
• Convert SVG to PNG, includes cropping, scaling and setting the background color.
• Support system fonts and custom fonts in SVG text.
• v2: Gets the width and height of the SVG and the generated PNG.
• v2: Support for outputting simplified SVG strings, such as converting shapes(rect, circle, etc) to <path>.
• v2: Support WebAssembly.
• No need for node-gyp and postinstall, the .node file has been compiled for you.
• Cross-platform support, including Apple M Chips.

Installation

Node.js

npm i @resvg/resvg-js

Browser(Wasm)

<script src="https://unpkg.com/@resvg/resvg-wasm"></script>

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
CC BY 3.0: Niabot	CC BY 3.0: Niabot

Usage

Node.js

const { promises } = require('fs')
const { join } = require('path')
const { Resvg } = require('@resvg/resvg-js')

async function main() {
  const svg = await promises.readFile(join(__dirname, './text.svg'))
  const opts = {
    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',
    },
  }
  const resvg = new Resvg(svg, opts)
  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()

  console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
  console.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`)

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

main()

WebAssembly

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

Browser

<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
<script>
  ;(async function () {
    // The Wasm must be initialized first
    await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/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 resvgJS = new resvg.Resvg(svg, opts)
    const pngData = resvgJS.render(svg, opts) // Output PNG data, Uint8Array
    const pngBuffer = pngData.asPng()
    const svgURL = URL.createObjectURL(new Blob([pngData], { type: 'image/png' }))
    document.getElementById('output').src = svgURL
  })()
</script>

See playground, it is also possible to call Wasm in Node.js, but there is a performance penalty and this is not recommended.

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
  

  Normally wasm-pack will install wasm-bindgen automatically, but if the installation fails due to network reasons, please try to install it manually.

  cargo install wasm-bindgen-cli
  

  On computers with Apple M chips, the following error message may appear:

  Error: failed to download from https://github.com/WebAssembly/binaryen/releases/download/version_90/binaryen-version_90-x86_64-apple-darwin.tar.gz

  Please install binaryen manually:

  brew install binaryen
  

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
• Output usvg-simplified SVG string
• Support for getting SVG Bounding box
• 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.1.0] - 2022-07-03

Added

• Add imagesToResolve() and resolveImage() APIs to load image URL. By @zimond in #102

  • Supports PNG, JPEG and GIF formats.
  • This only works for xlink:href starting with http:// or https://.
  • See example for more details.

  In order to support loading image URL, we forked the rust side of resvg and made some improvements.

  Now please witness the magic moment:

  

• Add innerBBox() API. By @yisibl in #105

  Calculate a maximum bounding box of all visible elements in this SVG. (Note: path bounding box are approx values).

• Add getBBox() API. By @yisibl in #108

  We designed it to correspond to the SVGGraphicsElement.getBBox() method in the browser.

  This is different from the innerBBox() API, by default it does apply transform calculations and gets the BBox with curves exactly. This works well in most use cases, the only drawback is that it does not calculate BBoxes with stroke correctly.

• Add cropByBBox() API. By @yisibl in #108

  With this API, we can crop the generated bitmap based on the BBox(bounding box).

  <img width="550" alt="cropByBBox Demo" src="https://user-images.githubusercontent.com/2784308/177039185-5c1a8014-9e44-4c18-aae2-8f509163da56.gif">

  const fs = require('fs')
  const { Resvg } = require('@resvg/resvg-js')
  const svg = '' // some SVG string or file.
  const resvg = new Resvg(svg)
  const innerBBox = resvg.innerBBox()
  const bbox = resvg.getBBox()
  
  // Crop the bitmap according to bbox,
  // The argument to the `.cropByBBox()` method accepts `bbox` or `innerBBox`.
  if (bbox) resvg.cropByBBox(bbox)
  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()
  
  console.info('SVG BBox: ', `${bbox.width} x ${bbox.height}`)
  fs.writeFileSync('out.png', pngBuffer)
  

• feat: upgrade svgtypes to 0.8.1 to support 4 digits and 8 digits hex colors. By @yisibl in #127

Changed

• feat: return undefined if bbox is invalid. By @zimond in #110
• chore: use jimp-compact instead of jimp.
• fix(deps): update rust crate napi to 2.5.0.
• fix(deps): update rust crate mimalloc-rust to 0.2.
• chore: export AR in android pipeline.
• style: rust indent changed from 2 to 4 spaces.