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.
Installation
npm i @resvg/resvg-js
cnpm i @resvg/resvg-js
pnpm i @resvg/resvg-js
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
Operating Systems
| 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 | ✓ | ✓ | ✓ |
FreeBSD x64 | ✓ | ✓ | ✓ |
Ability
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.
Test
With ava, run npm run test
to testing native addon. You can also switch to another testing framework if you want.
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
npm version [xxx]
git push --follow-tags
GitHub actions will do the rest job for you.
License
MPLv2.0