@resvg/resvg-wasm

What is @resvg/resvg-wasm?

@resvg/resvg-wasm is an npm package that provides WebAssembly (Wasm) bindings for the Resvg library, which is used for rendering SVG files. This package allows you to convert SVG files to raster images (like PNG) or other vector formats, manipulate SVG elements, and perform various SVG-related operations directly in JavaScript environments, including Node.js and web browsers.

What are @resvg/resvg-wasm's main functionalities?

Convert SVG to PNG

This feature allows you to convert an SVG file to a PNG image. The code reads an SVG file, uses the Resvg library to render it, and then saves the output as a PNG file.

const { Resvg } = require('@resvg/resvg-wasm');
const fs = require('fs');

(async () => {
  const svgData = fs.readFileSync('example.svg', 'utf8');
  const resvg = new Resvg(svgData);
  const pngData = resvg.render().asPng();
  fs.writeFileSync('output.png', pngData);
})();

Convert SVG to JPEG

This feature allows you to convert an SVG file to a JPEG image. The code reads an SVG file, uses the Resvg library to render it, and then saves the output as a JPEG file.

const { Resvg } = require('@resvg/resvg-wasm');
const fs = require('fs');

(async () => {
  const svgData = fs.readFileSync('example.svg', 'utf8');
  const resvg = new Resvg(svgData);
  const jpegData = resvg.render().asJpeg();
  fs.writeFileSync('output.jpg', jpegData);
})();

Manipulate SVG Elements

This feature allows you to manipulate SVG elements, such as changing attributes like width and height. The code reads an SVG file, modifies its attributes, and then saves the modified SVG.

const { Resvg } = require('@resvg/resvg-wasm');
const fs = require('fs');

(async () => {
  const svgData = fs.readFileSync('example.svg', 'utf8');
  const resvg = new Resvg(svgData);
  resvg.setAttribute('width', '500');
  resvg.setAttribute('height', '500');
  const modifiedSvg = resvg.toSvgString();
  fs.writeFileSync('modified.svg', modifiedSvg);
})();

Other packages similar to @resvg/resvg-wasm

sharp

Sharp is a high-performance image processing library for Node.js. It supports various image formats, including SVG, and can convert SVG files to raster images like PNG and JPEG. Compared to @resvg/resvg-wasm, Sharp offers a broader range of image processing capabilities but may not be as specialized in SVG rendering.

svg2png

svg2png is a simple utility for converting SVG files to PNG images. It uses Puppeteer to render the SVG in a headless Chromium browser. While it provides a straightforward way to convert SVG to PNG, it may not be as performant or versatile as @resvg/resvg-wasm.

canvg

Canvg is a library that allows you to render SVG files on an HTML5 canvas. It can be used in both Node.js and browser environments. While it provides good support for rendering SVGs, it may not offer the same level of performance and output format flexibility as @resvg/resvg-wasm.

README

resvg-js

@resvg/resvg-wasm

resvg-js is a high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.

This is the WebAssembly binary for @resvg/resvg-js

Playground

https://resvg-js.vercel.app

License

MPLv2.0

Copyright (c) 2021-present, yisibl(一丝)

Changelog

[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