@cf-wasm/resvg

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

Powered by resvg-js.

Installation

npm install @cf-wasm/resvg       # npm
yarn add @cf-wasm/resvg          # yarn
pnpm add @cf-wasm/resvg          # pnpm

Usage

Because package.json includes conditional exports for node, workerd, and edge-light, you can usually import directly from @cf-wasm/resvg and let the runtime choose the correct entrypoint:

import { Resvg } from "@cf-wasm/resvg";

If you want to be explicit, import from a submodule instead:

• Cloudflare Workers / Pages (Wrangler):

  import { Resvg } from "@cf-wasm/resvg/workerd";
  // To use v2.4.1 of @resvg/resvg-wasm, use the below instead
  import { Resvg } from "@cf-wasm/resvg/legacy/workerd";

• Next.js Edge Runtime:

  import { Resvg } from "@cf-wasm/resvg/edge-light";
  // To use v2.4.1 of @resvg/resvg-wasm, use the below instead
  import { Resvg } from "@cf-wasm/resvg/legacy/edge-light";

• Node.js (inline):

  import { Resvg } from "@cf-wasm/resvg/node";
  // To use v2.4.1 of @resvg/resvg-wasm, use the below instead
  import { Resvg } from "@cf-wasm/resvg/legacy/node";

Documentation

It is recommended to use Resvg.async() async static method instead of new Resvg() constructor:

import { Resvg } from "@cf-wasm/resvg/legacy/node";

// this is recommended
await Resvg.async("<svg...</svg>");

// instead of
new Resvg("<svg...</svg>");

For API reference, read official documentation at resvg-js.