@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

A high-performance SVG renderer, powered by Rust based resvg and napi-rs.

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

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

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	✓	✓	✓

Build

You can set the name of the generated .node file in napi.name of package.json.

After npm run build command, you can see resvgjs.[darwin|win32|linux].node file in project root. This is the native addon built from lib.rs.

Develop requirements

• Install latest Rust
• Install Node.js@10+ which fully supported Node-API
• Install yarn@1.x

Test in local

• yarn
• yarn build
• yarn test

And you will see:

$ ava --verbose

  ✔ sync function from native code
  ✔ sleep function from native code (201ms)
  ─

  2 tests passed
✨  Done in 1.12s.

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

git push --follow-tags

License

MPLv2.0

Changelog

[1.0.3] - 2021-10-15

Added

• feat: update typescript types definition. @axelhzf
• feat: add logLevel option, the font loading log is no longer output by default. @axelhzf

Changed

• chore: provides a better error prompt when the options type is wrong

Fixed

• fix: loaded font faces time changed from milliseconds to ms

Removed

• fix: remove the path option because we never implemented it