@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.2.0] - 2022-11-18

Now resvg-js can be run natively (not Wasm) directly in Deno, this allows to get close to the performance of Node.js native addons in Deno.

deno run --unstable --allow-read --allow-write --allow-ffi example/index-deno.js

See Deno Example

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 resvg = new Resvg(svg, opts)
const pngData = resvg.render()
const pngBuffer = pngData.asPng()

await Deno.writeFile(path.join(__dirname, './text-out-deno.png'), pngBuffer)

In addition, resvg-js can return the raw pixels data of the PNG, which can be very convenient for scenes where only pixels need to be processed.

Added

• feat: add .pixels() API for returning PNG pixels data (#123).
• chore: upgrade to resvg v0.25.0 (by @zimond in #156).
  • Partial paint-order attribute support. Markers can only be under or above the shape.
  • CSS3 writing-mode variants vertical-rl and vertical-lr. Thanks to @yisibl.
  • (tiny-skia) AArch64 Neon SIMD support. Up to 3x faster on Apple M1.
  • Path bbox calculation scales stroke width too. Thanks to @growler.
  • (tiny-skia) Round caps roundness. Fixes #155.

Changed

• build: x86_64-linux-gnu and aarch64-linux-gnu are no longer compiled using Zig. (#165)
• doc: the dpi option is not the DPI in the PNG file. (#146)
• chore: add deno example and docs. (#154)
• feat: upgrade napi-rs to 2.10.0 and Node.js v18. (#157)
• test: add image resolver API test case. (#164)
• feat: remove the infer crate, this reduced the size of the Wasm file by about 4.3%. (#165)
  • Before: 1360609 bytes
  • After: 1302173 bytes
• feat: error code UnrecognizedBuffer changed to UnsupportedImage. (#165)

Fixed

• fix: ignore png crate in renovate.json. (by @CGQAQ in #161)