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
resvg-js is a high-performance SVG renderer and toolkit, powered by Rust based resvg, with Node.js backend using napi-rs, also a pure WebAssmebly backend.
Features
- Fast, safe and zero dependencies, with correct output.
- 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.v2
: Support to get SVG bounding box and crop according to bounding box.v2
: Support for loading images of external links in <image>
.- No need for node-gyp and postinstall, the
.node
file has been compiled for you. - Cross-platform support, including Apple M Chips.
- Support for running as native addons in Deno.
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
deno run --unstable --allow-read --allow-write --allow-ffi example/index-deno.js
[2022-11-16T15:03:29Z DEBUG resvg_js::fonts] Loaded 1 font faces in 0.067ms.
[2022-11-16T15:03:29Z DEBUG resvg_js::fonts] Font './example/SourceHanSerifCN-Light-subset.ttf':0 found in 0.001ms.
Original SVG Size: 1324 x 687
Output PNG Size : 1200 x 623
✨ Done in 66 ms
SVG | PNG |
---|
| |
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'],
loadSystemFonts: false,
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()
Deno
Starting with Deno 1.26.1, there is support for running Native Addons directly from Node.js.
This allows for performance that is close to that found in Node.js.
deno run --unstable --allow-read --allow-write --allow-ffi example/index-deno.js
import * as path from 'https://deno.land/std@0.159.0/path/mod.ts'
import { Resvg } from 'npm:@resvg/resvg-js'
const __dirname = path.dirname(path.fromFileUrl(import.meta.url))
const svg = await Deno.readFile(path.join(__dirname, './text.svg'))
const opts = {
fitTo: {
mode: 'width',
value: 1200,
},
}
const t = performance.now()
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}`)
console.info('✨ Done in', performance.now() - t, 'ms')
await Deno.writeFile(path.join(__dirname, './text-out-deno.png'), pngBuffer)
WebAssembly
This package also ships a pure WebAssembly artifact built with wasm-bindgen
to run in browsers.
Browser
<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
<script>
(async function () {
await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))
const opts = {
fitTo: {
mode: 'width',
value: 800,
},
}
const svg = '<svg> ... </svg>'
const resvgJS = new resvg.Resvg(svg, opts)
const pngData = resvgJS.render(svg, opts)
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 it is slower.
Sample Benchmark
npm i benny@3.x sharp@0.x @types/sharp svg2img@0.x
npm run bench
Running "resize width" suite...
resvg-js(Rust):
12 ops/s
sharp:
9 ops/s
skr-canvas(Rust):
7 ops/s
svg2img(canvg and node-canvas):
6 ops/s
Support matrix
| Node.js 12 | Node.js 14 | Node.js 16 | Node.js 18 | 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
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.
Release package
We use GitHub actions to automatically publish npm packages.
npm version patch
npm version minor
License
MPLv2.0
Copyright (c) 2021-present, yisibl(一丝)
[2.4.0] - 2023-02-09
This is a brand new version with 2-3x faster performance. It also resolves an issue with a specific SVG causing an error, and all users are advised to upgrade to this version.
resvg-js(Rust):
39.6 ops/s, ±1.72% | fastest
sharp:
10.9 ops/s, ±31.43% | 72.47% slower
svg2img(canvg + node-canvas):
10.8 ops/s, ±28.52% | slowest, 72.73% slower
The upgrade will be hard due to the big changes made to upstream resvg. resvg 0.28.0 started with the removal of the ability to output SVG string, and we had to backport that functionality to a new crate: usvg-writer
.
Eventually, we upgraded resvg for 2 successive versions, and are now at the latest 0.29.0.
Changed
- feat: upgrade resvg/usvg to 0.28.0. #194 Thanks to @zimond
- feat: upgrade resvg/usvg to 0.29.0. #199 Thanks to @zimond
- chore: upgrade rust-toolchain to nightly-2023-02-01. #199 Thanks to @yisibl
- chore: remove bench-related dependencies. #200 Thanks to @yisibl
Fixed
-
fix: 'the previous segment must be M/L/C' error. #204 Thanks to @yisibl
This is a normal error thrown by resvg when parsing Path Command and has been confirmed as fixed in resvg 0.30.0(see commit).
Add a test to ensure it is now fixed.
thread 'main' panicked at 'the previous segment must be M/L/C', usvg/src/pathdata.rs:219:17
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
fatal runtime error: failed to initiate panic, error 5