@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-js

Playground

https://resvg-js.vercel.app

License

MPLv2.0

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