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 WebAssembly backend.

Please use all lowercase resvg-js when referencing project names.

https://resvg-js.vercel.app

• 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.

npm i @resvg/resvg-js

<scriptsrc="https://unpkg.com/@resvg/resvg-wasm"></script>

• Node.js see index.d.ts
• Wasm see wasm/index.d.ts

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

const{ promises }=require('fs')const{ join }=require('path')const{ Resvg }=require('@resvg/resvg-js')asyncfunctionmain(){constsvg=awaitpromises.readFile(join(__dirname,'./text.svg'))constopts={background: 'rgba(238, 235, 230, .9)',fitTo: {mode: 'width',value: 1200,},font: {fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'],// Load custom fonts.loadSystemFonts: false,// It will be faster to disable loading system fonts.// defaultFontFamily: 'Source Han Serif CN Light', // You can omit this.},}constresvg=newResvg(svg,opts)constpngData=resvg.render()constpngBuffer=pngData.asPng()console.info('Original SVG Size:',`${resvg.width} x ${resvg.height}`)console.info('Output PNG Size :',`${pngData.width} x ${pngData.height}`)awaitpromises.writeFile(join(__dirname,'./text-out.png'),pngBuffer)}main()

Starting with Bun 0.8.1, resvg-js can be run directly in Bun without any modification to the JS files, and is fully compatible with the syntax in Node.js.

bun example/index.js

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*aspathfrom'https://deno.land/[email protected]/path/mod.ts'import{Resvg}from'npm:@resvg/resvg-js'const__dirname=path.dirname(path.fromFileUrl(import.meta.url))constsvg=awaitDeno.readFile(path.join(__dirname,'./text.svg'))constopts={fitTo: {mode: 'width',value: 1200,},}constt=performance.now()constresvg=newResvg(svg,opts)constpngData=resvg.render()constpngBuffer=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')awaitDeno.writeFile(path.join(__dirname,'./text-out-deno.png'),pngBuffer)

This package also ships a pure WebAssembly artifact built with wasm-bindgen to run in browsers.

<scriptsrc="https://unpkg.com/@resvg/resvg-wasm"></script><script>;(asyncfunction(){// The Wasm must be initialized firstawaitresvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))constfont=awaitfetch('./fonts/Pacifico-Regular.woff2')if(!font.ok)returnconstfontData=awaitfont.arrayBuffer()constbuffer=newUint8Array(fontData)constopts={fitTo: {mode: 'width',// If you need to change the sizevalue: 800,},font: {fontBuffers: [buffer],// New in 2.5.0, loading custom fonts},}constsvg='<svg> ... </svg>'// Input SVG, String or Uint8ArrayconstresvgJS=newresvg.Resvg(svg,opts)constpngData=resvgJS.render(svg,opts)// Output PNG data, Uint8ArrayconstpngBuffer=pngData.asPng()constsvgURL=URL.createObjectURL(newBlob([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.

npm i [email protected][email protected] @types/sharp [email protected] 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

	Node.js 12	Node.js 14	Node.js 16	Node.js 18	Node.js 20	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	✓	✓	✓	✓	✓

• Install latest Rust

• Install Node.js@10+ which fully supported Node-API

• Install wasm-pack

  curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

  Normally wasm-pack will install wasm-bindgen automatically, but if the installation fails due to network reasons, please try to install it manually.

  cargo install wasm-bindgen-cli

  On computers with Apple M chips, the following error message may appear:

  Error: failed to download from https://github.com/WebAssembly/binaryen/releases/download/version_90/binaryen-version_90-x86_64-apple-darwin.tar.gz

  Please install binaryen manually:

  brew install binaryen

npm i npm run build npm test

npm i npm run build:wasm npm run test:wasm

I will consider implementing the following features, if you happen to be interested, please feel free to discuss with me or submit a PR.

• Support async API
• Upgrade to napi-rs v2
• Support WebAssembly
• Output usvg-simplified SVG string
• Support for getting SVG Bounding box
• Support for generating more lossless bitmap formats, e.g. avif, webp, JPEG XL

We use GitHub actions to automatically publish npm packages.

# 1.0.0 => 1.0.1 npm version patch # or 1.0.0 => 1.1.0 npm version minor

Please use all lowercase resvg-js when referencing project names.

MPLv2.0

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