Home / Rust / Game development

A high-performance SVG renderer, powered by Rust based resvg and napi-rs.

resvg-js A high-performance SVG renderer, powered by Rust based resvg and napi-rs. Very fast, safe and zero dependencies! Cross-platform support, incl
Information
Category: Rust / Game development
Watchers: 3
Star: 33
Fork: 3
Last update: Oct 13, 2021
Resource links
https://github.com/yisibl/resvg-js

resvg-js

GitHub CI Status npm version

A high-performance SVG renderer, powered by Rust based resvg and napi-rs.

  • Very fast, safe and zero dependencies!
  • Cross-platform support, including Apple M1.
  • No need for node-gyp and postinstall, the .node file has been compiled for you.
  • Support system fonts and custom fonts in SVG text.

Installation

npm i @resvg/resvg-js
cnpm i @resvg/resvg-js
pnpm i @resvg/resvg-js

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
SVG PNG

Support matrix

node12 node14 node16 npm
Windows x64 ✓ ✓ ✓ npm version
Windows x32 ✓ ✓ ✓ npm version
Windows arm64 ✓ ✓ ✓ npm version
macOS x64 ✓ ✓ ✓ npm version
macOS arm64(M1) ✓ ✓ ✓ npm version
Linux x64 gnu ✓ ✓ ✓ npm version
Linux x64 musl ✓ ✓ ✓ npm version
Linux arm gnu ✓ ✓ ✓ npm version
Linux arm64 gnu ✓ ✓ ✓ npm version
Linux arm64 musl ✓ ✓ ✓ npm version
Android arm64 ✓ ✓ ✓ npm version

Build

You can set the name of the generated .node file in napi.name of package.json.

After npm run build command, you can see resvgjs.[darwin|win32|linux].node file in project root. This is the native addon built from lib.rs.

Develop requirements

Test in local

  • yarn
  • yarn build
  • yarn test

And you will see:

$ ava --verbose

  ✔ sync function from native code
  ✔ sleep function from native code (201ms)
  ─

  2 tests passed
✨  Done in 1.12s.

Release package

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

git push --follow-tags

License

MPLv2.0

2 Open More issues
Closed

Support WebAssembly (wasm)

This looks like a really great project, thanks!

I saw wasm on the roadmap in the readme so I thought I would create an issue to show support for this feature request 🙂

I'm interested in running resvg with a browser, with Node.js, and with other edge-compute tools.

opened Jan 18, 2022 by styfle 10
Closed

text is not added when using this library, it works fine when using resvg directly from terminal

i am assuming I am doing something wrong with fonts, in any case here is a link to the svg I tried to convert, this is my configuration

const options = {
	background: 'rgba(0, 0, 0, 0.0)',
	font: {
		fontFiles: [
			'https://ubexuegkqzaitvqqwbeq.supabase.co/storage/v1/object/public/fonts/Chadva.ttf',
			...this.fontUrls
		], // Load custom fonts.
		loadSystemFonts: false, // It will be faster to disable loading system fonts.
		defaultFontFamily: 'Pirate Scroll'
	}
};

const resvg = new Resvg(src, options).render().asPng();

I am getting an (almost) perfect image but without any of the text, this.fontUrls is a list of remote fonts, everything is either ttf or otf the svg is generated by a function that generates a string, so I did run into some issues before where the svg was simply corrupt but this one specifically seems like it's not and it works in chrome and with resvg

help wanted 
opened Feb 19, 2023 by isaacfink 9
Closed

Electron MacOS Universal Build not working

Hi @yisibl, first of all, thanks for this excellent library, it is working really well. I just have the following problem:

I have an Electron app which uses resvg-js. For MacOS it is packaged using electron-builder. The configuration creates a universal build, which means, that the application is packaged for x86 and for arm64 (M1) and then bundled into a single .dmg file. This is done using a GitHub Action running macos-latest.

The problem now is, that when I try to start the App on a M1 Mac, I get the following error: grafik As you can see, the binary for darwin arm64 is missing. It also does not help to add that package to the dependencies manually, because it is not being installed on the build system (the arch in the package.json does not match).

Can I somehow "force" this package to be installed / included?

opened Sep 13, 2022 by hrueger 9
Closed

feat: add wasm file to exports

require.resolve and bundlers like vite are unable to resolve the wasm file.

Cheers

opened Jan 4, 2023 by hadeeb 8
Closed

sharp is faster for me when mass converting SVGs to HQ PNGs

I was interested in using resvg-js in-place of sharp for its advertised performance benefits, but I'm finding that it's actually much slower. In addition, resvg-js crashes for me when processing more than ~400 SVGs at once, and the produced DPI is not accurate.

Please let me know if there's anything I can improve/fix in the configuration.

Reproduction

https://github.com/privatenumber/sharp-vs-resvgjs

Comparison evaluation

sharp is much faster

When converting 400 SVG icons from simple-icons to 2500 DPI 800px width PNGs, sharp is 3x faster than resvg-js.

resvg: { duration: '5472ms', icons: 400 }
sharp: { duration: '1569ms', icons: 400 }
sharp is faster by 3.49x

resvg-js crashes on too many icons

The number of icons is limited to 400 because when processing too many icons at once, resvg-js crashes the whole Node.js process:

$ pnpm benchmark

> node scripts/benchmark

thread '<unnamed>' panicked at 'the previous segment must be M/L/C', /Users/runner/.cargo/git/checkouts/resvg-4b7e4ee32ad6d954/cab0b15/usvg/src/pathdata.rs:160:17
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
fatal runtime error: failed to initiate panic, error 5

rsvg-js doesn't yield expected DPI

After benchmarking, the resulting PNGs are saved to pngs/. When comparing icons between sharp and rsvg, the DPI on sharp is 2400 (as expected), but the DPI on resvg-js is 72.

Zoom in to compare difference

| resvg-js - 11.1 KB - 72 DPI | sharp - 16.6 KB - 2400 DPI | | - | - | | 500px svg | 500px svg |

opened Aug 10, 2022 by privatenumber 8
Closed

Error: `No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-musl/resvgjs.linux-x64-musl.node` with Vite 4 and Netlify

Hi, apologies if this is the wrong repo for this error but I am following https://geoffrich.net/posts/svelte-social-image/ and it works locally, but fails when I try to deploy to Netlify:

image

Full error message

10:10:26 PM: ✘ [ERROR] No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-musl/resvgjs.linux-x64-musl.node
10:10:26 PM:     node_modules/@resvg/resvg-js/js-binding.js:1:2980:
10:10:26 PM:       1 │ ...Binding=require("@resvg/resvg-js-linux-x64-musl")}catch(e){loadE...
10:10:26 PM:         ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10:10:26 PM: ✘ [ERROR] No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-gnu/resvgjs.linux-x64-gnu.node
10:10:26 PM:     node_modules/@resvg/resvg-js/js-binding.js:1:3212:
10:10:26 PM:       1 │ ...eBinding=require("@resvg/resvg-js-linux-x64-gnu")}catch(e){loadE...
10:10:26 PM:         ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I'm not sure where this message comes from but you can see the error in this branch https://github.com/sw-yx/swyxkit/tree/addOgimage when deployed to Netlify: https://app.netlify.com/sites/swyxkit/deploys/63954a072248cf0008f384ae

blocking https://github.com/sw-yx/swyxkit/pull/145 right now with this error message

opened Dec 10, 2022 by swyxio 7
Open

ARMv6 support

Hi, Is there any plan to support armv6?

This project would be a good replacement for converting SVG to PNG without puppeteer on the Raspberry pi zero

opened May 12, 2023 by NelsonBrandao 6
Open

Image resolver blob urls

Hi, i was trying to run the following demo, but it seems that by #102 it only resolves http(s) images.

Is there any reason why not blob ones? Are you open to a PR allowing them?

opened Apr 27, 2023 by pudymody 1
Open

能不能支持转jpg

png有点大，能否支持svg转jpg？

opened Apr 26, 2023 by ppjjzz 1
Open

feat: support loading woff2 font in Wasm

null

opened Mar 23, 2023 by yisibl 1
Open

Wasm32 target custom font loading

Heyo!

I know there is an opened but a bit stale PR that improves font handling, but I feel like ResvgJS lacks a direct, essential font-loading support on the wasm32 target before going into some more complicated APIs.

What do you think about the solution presented in this PR? Dead simple, with no API breaking change, just new optional font options and the possibility to pass an array of font data.

Works like this:

let resvg_wasm = await fetch("./index_bg.wasm");
await initWasm(resvg_wasm);

// Load font as buffer
const req = new XMLHttpRequest();
req.open("GET", "./Roboto-Regular.ttf", true);
req.responseType = "arraybuffer";

// Make sure it's a Uint8Array
const arrayBuffer = req.response;
const font = new Uint8Array(arrayBuffer);

const opts = {
  font: {
    fontsBuffers: [font],
  },
};

const resvgJS = new Resvg(svg, opts);

In the future, more complex API can be built on top of it or just, well, replaced if there is a better solution at one point.

opened Mar 20, 2023 by antmelnyk 7
Open

Possible Memory Leak

Hi. I'm using with Node.js and I need to loop through many svg frames and convert them to a png sequence. I'm seeing memory usage continually increase and stay very high even after the job is complete. The heap is not increasing, only the rss. I found that Node users experiencing similar issues usually trace it back to a leak in native code. I've reduced the script down to the simplest possible code where all I do is create a new Resvg and call render().asPng() on it. The demo script includes an http server to run the test, but the result is the same if you call it directly. The service set values from the console match my activity monitor for the node process and show a memory usage close to 3G at the end of the loop. This was also confirmed when running on the server where we have limited memory, about 1G. This will reliably trigger an out of memory termination. leak-test.zip

opened Mar 16, 2023 by DSalman 6

Contents

    RazrFalcon resvg — An SVG rendering library.
    antoniomuso Fastest lz4 compression library in Node.js, powered by napi-rs and lz4-flex.
    takahirox A tiny WebGPU renderer written in Rust
    tunabrain High performance physically based renderer in C++11
    canvg Javascript SVG parser and renderer on Canvas
    lmgonzalves An experimental slider using SVG clip-path feature and animations powered by Snap.svg
    anup-a 🌊 SVG Wave is a tiny, free and beautiful SVG gradient waves generator for your UI or website desgin. It offers dead simple UI to customize, and style your waves based on your theme specifications.
    aykutkardas SVG Quick Editor is a free and open-source SVG editing tool.
    egoist Convert SVG to React/Vue components
    utopszkij recept és napi menü kezelő program. Anyag szükséglet számítás, bevásárló lista készítés
    jest-community Take a React component tree, and render it into an SVG.
    kai-oswald vue-svg-transition Create 2-state, SVG-powered transitions
    nitin42 Tutorial on how to make a custom React renderer
    spatie Server side rendering JavaScript in a PHP application
    raphamorim 🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
    software-mansion SVG library for React Native, React Native Web, and plain React web projects.
    chrvadala :eyes: A React component that adds pan and zoom features to SVG
    svgdotjs The lightweight library for manipulating and animating SVG
    astrit 700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
    damianstasik vue-svg-loader - webpack loader that lets you use SVG files as Vue components
    biigpongsatorn vue-svg-filler - Vue component for custom your svg file 🖍 🎨 (vue 2.x).
    Share this repo

    Related Repos


    Game development
    5
    Simplified Find command made with Rust.
    LyonSyonII Hunt Hunt is a (highly-opinionated) simplified Find command made with Rust. It searches a file/folder by name on the entire drive. If the --first flag
     
    Game development
    17
    🌳 A lightning-fast system fetch tool made with Rust.
    angelofallars 🌳 treefetch A lightning-fast minimalist system fetch tool made in Rust. Even faster than pfetch. Made to practice my new Rust skills 🦀 . A great pai
     
    Game development
    442
    A small path tracing renderer written in Rust.
    termhn rayn This is a CPU-based path tracing renderer focused on rendering SDFs, specifically fractals. It was originally based on the book "Ray tracing in o
     
    Game development
    5
    A high-performance renderer to render glTF models that use the `KHR_materials_transmission...
    expenses This is a high-performance renderer designed among other things to render glTF models that use the KHR_materials_transmission and KHR_materials_volume
     
    Game development
    4
    Study of differential geometry with Rust + WebGL
    mattatz Differential Geometry Study Study of differential geometry with Rust + WebGL. Build setup # change working directory to www $ cd www # install depend
     
    Game development
    3
    Pong-like videogame made with Rust and Bevy
    HectorPulido Rust pong Pong-like videogame made with Rust and Bevy Features Correct Physics AI Score Wasm TO DO Score Wasm Multiplayer How to run For the desktop v
     
    Game development
    5
    💤 Put your Minecraft server to rest when idle.
    timvisee lazymc Note: this is a prototype and currently incomplete. lazymc puts your Minecraft server to rest when idle, and wakes it up when players connect.
     
    Game development
    14
    A simple, efficient spring animation library for smooth, natural motion in Rust
    ziyasal Natura A simple, efficient spring animation library for smooth, natural motion in Rust Usage Natura is framework-agnostic and works well in 2D and 3D
     
    Game development
    12
    A procedural sky plugin for bevy
    JonahPlusPlus bevy_atmosphere A procedural sky plugin for bevy Example use bevy::prelude::*; use bevy_atmosphere::*; fn main() { App::build() .insert_re
     
    Game development
    33
    A high-performance SVG renderer, powered by Rust based resvg and napi-rs.
    yisibl resvg-js A high-performance SVG renderer, powered by Rust based resvg and napi-rs. Very fast, safe and zero dependencies! Cross-platform support, incl
     
    Game development
    21
    Unbalanced Brawl: autochess made for the LD49.
    yopox Unbalanced Brawl Unbalanced Brawl is an autochess made for LD49. See the entry page for gameplay details. Play on itch.io. Setup Put ChevyRay - Bird S
     
    Game development
    65
    Synchronize games from other platforms into your Steam library
    PhilipK BoilR Description This little tool will synchronize games from other platforms into your Steam library, using the Steam Shortcuts feature. The goal is
     
    Game development
    25
    Fast prototyping 3D engine
    kvark baryon Baryon is a compact 3D engine focused on fast prototyping in code. No big dependencies, no fancy run-times, GUI editors, or other magic. Depend
     
    Game development
    328
    A minecraft-like multi version client implemented in Rust.
    Lea-fish Multi-version Minecraft-compatible client written in Rust, forked from Stevenarella.
     
    Game development
    17
    Minimising Oxygen Wastage
    TCTD-IIT-Bombay Overview There is currently an acute shortage of medical grade oxygen in large parts of India, as a consequence of a big surge in the number of critic