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.
resvg-js
A high-performance SVG renderer, powered by Rust based resvg and napi-rs.
- Very 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
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 |
---|
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
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