### Browser WebAssembly Setup

Source: https://github.com/thx/resvg-js/blob/main/README.md

Include the resvg-wasm script and initialize the WebAssembly module. This example demonstrates loading custom fonts.

```html
<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
<script>
  ;(async function () {
    // The Wasm must be initialized first
    await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))

    const font = await fetch('./fonts/Pacifico-Regular.woff2')
    if (!font.ok) return

    const fontData = await font.arrayBuffer()
    const buffer = new Uint8Array(fontData)

    const opts = {
      fitTo: {
        mode: 'width', // If you need to change the size
        value: 800,
      },
      font: {
        fontBuffers: [buffer], // New in 2.5.0, loading custom fonts
      },
    }

    const svg = '<svg> ... </svg>' // Input SVG, String or Uint8Array
    const resvgJS = new resvg.Resvg(svg, opts)
    const pngData = resvgJS.render(svg, opts) // Output PNG data, Uint8Array
    const pngBuffer = pngData.asPng()
    const svgURL = URL.createObjectURL(new Blob([pngData], { type: 'image/png' }))
    document.getElementById('output').src = svgURL
  })()
</script>
```

--------------------------------

### Run resvg.js with Deno

Source: https://github.com/thx/resvg-js/blob/main/README.md

Execute the resvg.js example using Deno. Ensure you have Deno 1.26.1 or later installed and use the --unstable flag.

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

--------------------------------

### Run Deno example

Source: https://github.com/thx/resvg-js/blob/main/README.md

Execute the provided Deno example script with required permissions.

```shell
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
```

--------------------------------

### Run Node.js example

Source: https://github.com/thx/resvg-js/blob/main/README.md

Execute the provided Node.js example script.

```shell
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
```

--------------------------------

### Run example in Bun

Source: https://github.com/thx/resvg-js/blob/main/README.md

Execute the Node.js example script directly using the Bun runtime.

```shell
bun example/index.js
```

--------------------------------

### Install wasm-bindgen-cli

Source: https://github.com/thx/resvg-js/blob/main/README.md

Manually installs wasm-bindgen-cli if the automatic installation via wasm-pack fails due to network issues.

```bash
cargo install wasm-bindgen-cli
```

--------------------------------

### Build WebAssembly bindings

Source: https://github.com/thx/resvg-js/blob/main/README.md

Installs dependencies, builds the WebAssembly bindings, and runs their respective tests. Ensure Node.js and npm are installed.

```bash
npm i
npm run build:wasm
npm run test:wasm
```

--------------------------------

### Build Node.js bindings

Source: https://github.com/thx/resvg-js/blob/main/README.md

Installs dependencies, builds the Node.js bindings, and runs tests. Ensure Node.js and npm are installed.

```bash
npm i
npm run build
npm test
```

--------------------------------

### Install wasm-pack

Source: https://github.com/thx/resvg-js/blob/main/README.md

Installs wasm-pack using the provided script. Ensure Rust and Node.js are installed prior to running.

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

--------------------------------

### Install Benchmark Dependencies

Source: https://github.com/thx/resvg-js/blob/main/README.md

Install necessary packages for benchmarking resvg-js against other libraries like sharp and svg2img.

```shell
npm i benny@3.x sharp@0.x @types/sharp svg2img@0.x
npm run bench
```

--------------------------------

### Deno Usage Example

Source: https://context7.com/thx/resvg-js/llms.txt

Run resvg-js natively in Deno using FFI support. Requires unstable, read, write, and FFI permissions.

```javascript
// example/index-deno.js
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 opts = {
  fitTo: { mode: 'width', value: 1200 },
  font: {
    fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'],
    loadSystemFonts: false,
  },
}

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

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

// Run with: deno run --unstable --allow-read --allow-write --allow-ffi index-deno.js
```

--------------------------------

### Install Node.js package

Source: https://github.com/thx/resvg-js/blob/main/README.md

Use npm to add the package to your project.

```shell
npm i @resvg/resvg-js
```

--------------------------------

### Install binaryen on Apple M chips

Source: https://github.com/thx/resvg-js/blob/main/README.md

Installs binaryen using Homebrew for Apple M chip users experiencing download errors for binaryen.

```bash
brew install binaryen
```

--------------------------------

### resvg.js Deno Example

Source: https://github.com/thx/resvg-js/blob/main/README.md

This script uses Deno to read an SVG file, convert it to PNG using resvg.js, and write the output. It utilizes Deno's file system and path modules.

```javascript
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 opts = {
  fitTo: {
    mode: 'width',
    value: 1200,
  },
}

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

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

--------------------------------

### imagesToResolve() and resolveImage() Methods

Source: https://context7.com/thx/resvg-js/llms.txt

Methods to handle external images referenced in SVG via `<image>` elements with HTTP/HTTPS URLs. This involves getting the URLs, fetching them, and providing the image buffers back to resvg.

```APIDOC
## imagesToResolve() and resolveImage() Methods

### Description
Load external images referenced in the SVG via `<image>` elements with HTTP/HTTPS URLs. First get URLs to resolve, fetch them, then provide the image buffers back to resvg.

### Method
Not applicable (methods of a class instance)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const { Resvg } = require('@resvg/resvg-js')
const fetch = require('node-fetch')
const fs = require('fs').promises

async function renderSvgWithExternalImages() {
  const svg = `
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image href="https://example.com/logo.png" width="200" height="200"/>
    <image xlink:href="https://example.com/icon.gif" x="220" y="0" width="100" height="100"/>
  </svg>`

  const resvg = new Resvg(svg, {
    font: { loadSystemFonts: false },
    logLevel: 'off',
  })

  // Get list of external image URLs to resolve
  const imageUrls = resvg.imagesToResolve()
  console.log('Images to resolve:', imageUrls)
  // ['https://example.com/logo.png', 'https://example.com/icon.gif']

  // Fetch and resolve each image
  const resolved = await Promise.all(
    imageUrls.map(async (url) => {
      console.log('Fetching:', url)
      const response = await fetch(url)
      const buffer = await response.arrayBuffer()
      return { url, buffer: Buffer.from(buffer) }
    })
  )

  // Provide image data back to resvg
  for (const { url, buffer } of resolved) {
    resvg.resolveImage(url, buffer)
  }

  // Now render with resolved images
  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()

  console.log('Output Size:', `${pngData.width} x ${pngData.height}`)
  await fs.writeFile('./output-with-images.png', pngBuffer)
}

renderSvgWithExternalImages()
```

### Response
#### Success Response (200)
None (modifies the resvg instance in place)

#### Response Example
None
```

--------------------------------

### Render SVG String with resvg-js

Source: https://github.com/thx/resvg-js/blob/main/wasm/index.html

Render an SVG string using resvg-js. This example includes a complex SVG with paths and transformations.

```javascript
const svgList = [{
  name: 'Hello resvg-js',
  svgString: 
`<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="800.000000" height="800.000000" viewBox="0 0 800.000000 800.000000"><g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"><path d="M3770 6484 c-241 -29 -397 -62 -574 -121 -732 -242 -1303 -798 -1559 -1518 -103 -290 -142 -523 -141 -850 2 -409 78 -741 254 -1100 230 -470 595 -848 1051 -1089 261 -138 500 -216 824 -271 128 -22 462 -30 615 -16 783 76 1472 494 1885 1146 75 119 194 364 239 494 171 490 189 1021 52 1522 -19 69 -46 155 -60 189 -14 35 -26 67 -26 71 0 4 -24 59 -53 121 -125 264 -280 483 -491 693 -220 219 -393 344 -661 475 -236 115 -491 196 -745 236 -101 15 -525 28 -610 18z m515 -299 c345 -49 683 -173 955 -352 717 -471 1091 -1326 955 -2183 -141 -880 -782 -1570 -1659 -1786 -184 -45 -344 -64 -536 -64 -759 2 -1443 363 -1856 981 -190 285 -316 641 -355 1004 -14 134 -6 432 15 560 109 641 449 1160 992 1511 247 159 596 286 904 328 140 19 457 20 585 1z"/><path d="M3588 5860 c-248 -52 -453 -136 -654 -268 -116 -76 -146 -131 -110 -200 8 -15 203 -215 433 -444 l419 -418 45 0 c32 0 55 7 73 21 58 45 56 28 56 656 0 556 -1 579 -20 610 -39 65 -91 74 -242 43z"/><path d="M4221 5862 c-19 -10 -43 -34 -53 -53 -17 -31 -18 -71 -18 -602 0 -604 0 -608 49 -651 12 -11 42 -21 72 -24 l51 -5 419 419 c230 230 426 433 434 451 36 75 -4 135 -147 221 -192 116 -401 198 -617 241 -127 26 -147 26 -190 3z"/><path d="M2516 5180 c-41 -13 -79 -52 -141 -145 -135 -206 -256 -526 -272 -725 -5 -72 -4 -77 21 -107 15 -18 44 -37 64 -43 40 -11 1127 -15 1181 -4 37 8 87 56 94 91 12 61 -3 79 -436 511 -232 232 -430 422 -439 422 -9 0 -22 2 -30 4 -7 2 -26 0 -42 -4z"/><path d="M5405 5176 c-45 -21 -862 -845 -870 -878 -10 -40 12 -95 48 -120 l32 -23 580 -3 c379 -2 592 1 616 7 85 25 103 89 71 247 -42 202 -123 409 -234 592 -67 111 -120 169 -167 182 -44 12 -39 12 -76 -4z"/><path d="M2164 3831 c-72 -44 -79 -91 -40 -263 48 -208 139 -428 246 -593 93 -143 142 -179 213 -156 49 17 873 845 882 887 9 44 -17 99 -57 124 -32 19 -49 20 -623 20 -563 0 -591 -1 -621 -19z"/><path d="M4592 3830 c-40 -24 -66 -81 -58 -124 9 -46 846 -881 893 -891 64 -13 105 16 183 130 125 185 219 407 270 640 33 149 25 199 -39 242 l-34 23 -591 0 c-575 0 -592 -1 -624 -20z"/><path d="M3675 3460 c-11 -4 -208 -197 -437 -427 -458 -460 -450 -449 -412 -528 35 -74 310 -229 539 -304 112 -37 311 -81 363 -81 36 0 81 28 102 63 19 31 20 54 20 612 0 558 -1 581 -20 612 -32 53 -100 77 -155 53z"/><path d="M4212 3450 c-63 -39 -62 -31 -62 -656 0 -626 -1 -615 64 -655 41 -25 76 -24 215 7 214 47 400 119 573 220 156 91 209 163 174 235 -9 19 -202 220 -430 448 -403 403 -414 413 -457 418 -33 3 -52 -1 -77 -17z"/></g></svg>
` },
  {
    name: 'GitHub Octocat',
    svgString: 
`<svg xmlns="http://www.w3.org/2000/svg" width="430px" height="400px" viewBox="0 0 430 400" version="1.1">
 <g xmlns="http://www.w3.org/2000/svg" transform="translate(26.000000, 34.000000)" fill-rule="nonzero">
  <path d="M296.933,295.434202 C296.933,315.967202 249.373,332.610202 190.713,332.610202 C132.043,332.610202 84.483,315.967202 84.483,295.434202 C84.483,274.901202 132.041,258.254202 190.713,258.254202 C249.373,258.254202 296.933,274.904202 296.933,295.434202 Z" fill="#9CDAF1" />
  <g transform="translate(129.984364, 283.418209)" fill="#7DBBE6">
   <path d="M31.8586363,47.8059929 L31.8586363,21.3059929 C31.8586363,17.8839929 31.2396363,15.0219929 30.2056363,12.6049929 C37.0586363,17.9269929 37.5216363,31.2999929 37.5216363,31.2999929 L37.5216363,48.3039929 C43.6876363,48.7849929 50.0556363,49.0769929 56.5746363,49.1649929 L56.4026363,32.2449929 C55.4586363,9.11499286 35.6336363,6.28399286 35.6336363,6.28399286 C28.3886363,4.63899286 28.4966363,8.27499286 29.2246363,10.6239929 C22.1166363,-1.49800714 3.06663632,0.0679928633 3.06663632,0.0679928633 C-3.54436368,2.42499286 2.59163632,6.67499286 2.59163632,6.67499286 C12.9786363,10.4499929 13.9216363,21.7799929 13.9216363,21.7799929 L13.9216363,45.4019929 C19.6416363,46.3819929 25.6316363,47.1919929 31.8616363,47.8019929 L31.8586363,47.8059929 Z" />
   <path d="M115.408636,0.0659928633 C115.408636,0.0659928633 96.3556363,-1.5 89.2486363,10.6249929 C89.9766363,8.27499286 90.0876363,4.63599286 82.8406363,6.28199286 C82.8406363,6.28199286 63.0166363,9.11399286 62.0726363,32.2429929 L61.8986363,49.1889929 C68.4076363,49.1639929 74.7746363,48.9349929 80.9526363,48.

```

--------------------------------

### WebAssembly Usage (Node.js)

Source: https://context7.com/thx/resvg-js/llms.txt

Demonstrates how to initialize and use resvg-js via WebAssembly in a Node.js environment.

```APIDOC
## WebAssembly Usage (Node.js)

### Description
Initialize and use resvg-js in Node.js via WebAssembly. Requires initializing the Wasm module before use.

### Method
Not applicable (script execution)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Node.js Wasm usage
const fs = require('fs').promises
const { join } = require('path')
const { Resvg, initWasm } = require('@resvg/resvg-wasm')

async function main() {
  // Initialize Wasm from file
  await initWasm(fs.readFile(join(__dirname, 'node_modules/@resvg/resvg-wasm/index_bg.wasm')))

  const svg = await fs.readFile('./image.svg')
  const resvg = new Resvg(svg, {
    fitTo: { mode: 'width', value: 500 },
  })

  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()

  console.log('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
  console.log('Output PNG Size:', `${pngData.width} x ${pngData.height}`)

  await fs.writeFile('./output.png', pngBuffer)
}

main()
```

### Response
#### Success Response (200)
None (writes PNG data to a file)

#### Response Example
None
```

--------------------------------

### WebAssembly Usage (Browser)

Source: https://context7.com/thx/resvg-js/llms.txt

Demonstrates how to initialize and use resvg-js via WebAssembly in a browser environment, including loading custom fonts.

```APIDOC
## WebAssembly Usage (Browser)

### Description
Initialize and use resvg-js in browsers via WebAssembly. Requires initializing the Wasm module before use and supports custom fonts via font buffers.

### Method
Not applicable (script execution)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<!-- Browser usage -->
<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
<script>
;(async function() {
  // Initialize Wasm module first (required)
  await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))

  // Optionally load custom fonts
  const fontResponse = await fetch('./fonts/CustomFont.woff2')
  const fontBuffer = new Uint8Array(await fontResponse.arrayBuffer())

  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
    <text x="10" y="50" font-size="24">Hello World</text>
  </svg>`

  const opts = {
    fitTo: { mode: 'width', value: 800 },
    font: {
      fontBuffers: [fontBuffer],  // Wasm uses fontBuffers instead of fontFiles
      // defaultFontFamily: 'CustomFont', // Optional, auto-detected from fontBuffers
    },
  }

  const resvgInstance = new resvg.Resvg(svg, opts)
  const pngData = resvgInstance.render()
  const pngBuffer = pngData.asPng()  // Returns Uint8Array

  // Display in browser
  const blob = new Blob([pngBuffer], { type: 'image/png' })
  document.getElementById('output').src = URL.createObjectURL(blob)

  // Free memory when done (Wasm-specific)
  pngData.free()
  resvgInstance.free()
})()
</script>
```

### Response
#### Success Response (200)
None (renders PNG data to be displayed or saved)

#### Response Example
None
```

--------------------------------

### Benchmark Results

Source: https://github.com/thx/resvg-js/blob/main/README.md

Sample output from the benchmark script, showing operations per second for different SVG rendering libraries.

```shell
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
```

--------------------------------

### Initialize Resvg Instance

Source: https://context7.com/thx/resvg-js/llms.txt

Create a new Resvg instance from an SVG string or Buffer with optional rendering configuration.

```javascript
const { Resvg } = require('@resvg/resvg-js')
const fs = require('fs')

// Basic usage with SVG string
const svg = `<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect fill="green" x="0" y="0" width="100" height="100"/>
</svg>`
const resvg = new Resvg(svg)

// Full options example
const svgBuffer = fs.readFileSync('./image.svg')
const resvg = new Resvg(svgBuffer, {
  background: 'rgba(238, 235, 230, .9)',  // CSS3 color format
  fitTo: {
    mode: 'width',  // 'original' | 'width' | 'height' | 'zoom'
    value: 1200,
  },
  font: {
    fontFiles: ['./fonts/CustomFont.ttf'],  // Local font file paths
    fontDirs: ['./fonts/'],                  // Font directories
    loadSystemFonts: false,                  // Faster when disabled
    defaultFontFamily: 'Custom Font',
    defaultFontSize: 12,
    serifFamily: 'Times New Roman',
    sansSerifFamily: 'Arial',
    cursiveFamily: 'Comic Sans MS',
    fantasyFamily: 'Impact',
    monospaceFamily: 'Courier New',
  },
  dpi: 96,
  languages: ['en'],
  shapeRendering: 2,   // 0: optimizeSpeed, 1: crispEdges, 2: geometricPrecision
  textRendering: 1,    // 0: optimizeSpeed, 1: optimizeLegibility, 2: geometricPrecision
  imageRendering: 0,   // 0: optimizeQuality, 1: optimizeSpeed
  crop: {
    left: 20,
    top: 20,
    right: 100,
    bottom: 100,
  },
  logLevel: 'debug',  // 'off' | 'error' | 'warn' | 'info' | 'debug' | 'trace'
})

console.log('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
// Original SVG Size: 200 x 200
```

--------------------------------

### Initialize Select Options

Source: https://github.com/thx/resvg-js/blob/main/wasm/index.html

Populates a select dropdown element with options from a data list.

```javascript
function initSelectOptions(sltId, dataList, defaultVal) { const selectElement = document.querySelector('#' + sltId) let optionText = '' for (const [i, item] of dataList.entries()) { const optionElement = document.createElement('option') optionElement.value = item.name optionElement.innerText = item.name if (i === defaultVal) { optionElement.setAttribute('selected', true) } selectElement.appendChild(optionElement) } }
```

--------------------------------

### WebAssembly Initialization and Usage

Source: https://context7.com/thx/resvg-js/llms.txt

Initialize the Wasm module before rendering. Note that Wasm-based instances require manual memory management via .free() and use fontBuffers for custom fonts.

```javascript
// Browser usage
<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
<script>
;(async function() {
  // Initialize Wasm module first (required)
  await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))

  // Optionally load custom fonts
  const fontResponse = await fetch('./fonts/CustomFont.woff2')
  const fontBuffer = new Uint8Array(await fontResponse.arrayBuffer())

  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
    <text x="10" y="50" font-size="24">Hello World</text>
  </svg>`

  const opts = {
    fitTo: { mode: 'width', value: 800 },
    font: {
      fontBuffers: [fontBuffer],  // Wasm uses fontBuffers instead of fontFiles
      // defaultFontFamily: 'CustomFont', // Optional, auto-detected from fontBuffers
    },
  }

  const resvgInstance = new resvg.Resvg(svg, opts)
  const pngData = resvgInstance.render()
  const pngBuffer = pngData.asPng()  // Returns Uint8Array

  // Display in browser
  const blob = new Blob([pngBuffer], { type: 'image/png' })
  document.getElementById('output').src = URL.createObjectURL(blob)

  // Free memory when done (Wasm-specific)
  pngData.free()
  resvgInstance.free()
})()
</script>
```

```javascript
// Node.js Wasm usage
const fs = require('fs').promises
const { join } = require('path')
const { Resvg, initWasm } = require('@resvg/resvg-wasm')

async function main() {
  // Initialize Wasm from file
  await initWasm(fs.readFile(join(__dirname, 'node_modules/@resvg/resvg-wasm/index_bg.wasm')))

  const svg = await fs.readFile('./image.svg')
  const resvg = new Resvg(svg, {
    fitTo: { mode: 'width', value: 500 },
  })

  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()

  console.log('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
  console.log('Output PNG Size:', `${pngData.width} x ${pngData.height}`)

  await fs.writeFile('./output.png', pngBuffer)
}

main()
```

--------------------------------

### Resvg Constructor

Source: https://context7.com/thx/resvg-js/llms.txt

Initializes a new Resvg instance by parsing an SVG string or buffer and applying optional rendering configurations.

```APIDOC
## Constructor: new Resvg(svg, options)

### Description
Creates a new Resvg instance to prepare an SVG for rendering. The constructor parses the input and applies settings for background, scaling, fonts, and rendering quality.

### Parameters
#### Request Body
- **svg** (string|Buffer) - Required - The SVG content to render.
- **options** (object) - Optional - Configuration object:
  - **background** (string) - CSS3 color format for the background.
  - **fitTo** (object) - Scaling configuration (mode: 'original' | 'width' | 'height' | 'zoom', value: number).
  - **font** (object) - Font configuration (fontFiles, fontDirs, loadSystemFonts, defaultFontFamily, etc.).
  - **dpi** (number) - Dots per inch for rendering.
  - **languages** (array) - List of languages for font selection.
  - **shapeRendering** (number) - 0: optimizeSpeed, 1: crispEdges, 2: geometricPrecision.
  - **textRendering** (number) - 0: optimizeSpeed, 1: optimizeLegibility, 2: geometricPrecision.
  - **imageRendering** (number) - 0: optimizeQuality, 1: optimizeSpeed.
  - **crop** (object) - Cropping dimensions (left, top, right, bottom).
  - **logLevel** (string) - Logging verbosity ('off', 'error', 'warn', 'info', 'debug', 'trace').
```

--------------------------------

### Include Browser Wasm script

Source: https://github.com/thx/resvg-js/blob/main/README.md

Load the WebAssembly version of the library via script tag.

```html
<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
```

--------------------------------

### render() Method

Source: https://context7.com/thx/resvg-js/llms.txt

Renders the configured SVG instance into a RenderedImage object containing PNG data and pixel information.

```APIDOC
## Method: render()

### Description
Executes the rendering process based on the instance configuration and returns a RenderedImage object.

### Response
#### Success Response (RenderedImage object)
- **asPng()** (function) - Returns the rendered image as a PNG Buffer.
- **width** (number) - The width of the rendered output.
- **height** (number) - The height of the rendered output.
- **pixels** (Buffer) - Raw RGBA pixel data of the rendered image.
```

--------------------------------

### Upgrade Yarn

Source: https://github.com/thx/resvg-js/blob/main/README.md

Run this command to upgrade to the latest stable version of Yarn. It automatically downloads the new version and updates the yarnPath in .yarnrc.yml.

```bash
yarn set version stable
```

--------------------------------

### resvg-js Background and Crop Options

Source: https://context7.com/thx/resvg-js/llms.txt

Set PNG background color using CSS3 color formats and crop the output to specific regions. Supports various color formats and optional crop coordinates.

```javascript
const { Resvg } = require('@resvg/resvg-js')
const fs = require('fs')

const svg = `<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect fill="green" x="20" y="20" width="160" height="160"/>
</svg>`

// Background with alpha channel
const withBackground = new Resvg(svg, {
  background: 'rgba(255, 0, 0, 0.5)',  // Semi-transparent red
  // Also supports: '#ff0000', 'rgb(255,0,0)', 'hsl(0,100%,50%)', 'hsla(0,100%,50%,0.5)'
})
const pngWithBg = withBackground.render().asPng()
fs.writeFileSync('./with-background.png', pngWithBg)

// Crop to specific region
const cropped = new Resvg(svg, {
  background: '#ffffff',
  crop: {
    left: 20,    // Required: pixels from left
    top: 20,     // Required: pixels from top
    right: 180,  // Optional: pixels from left (not from right edge)
    bottom: 180, // Optional: pixels from top (not from bottom edge)
  },
})
const croppedPng = cropped.render()
console.log('Cropped Size:', `${croppedPng.width} x ${croppedPng.height}`)
// Cropped Size: 160 x 160

fs.writeFileSync('./cropped.png', croppedPng.asPng())
```

--------------------------------

### Initialize resvg-js and SVG conversion

Source: https://github.com/thx/resvg-js/blob/main/wasm/index.html

Initializes the WASM module and sets up the conversion pipeline for SVG strings. Includes logic for handling font buffers and rendering options.

```javascript
async function getFontBuffer() {
  if (fetchFontLock) return
  fetchFontLock = true
  const controller = new AbortController()
  const signal = controller.signal
  setTimeout(() => controller.abort(), 3000) // Cancel the fetch request
  try {
    const t = performance.now()
    const font = await fetch(fontFile)
    if (!font.ok) return
    const data = await font.arrayBuffer()
    const buffer = new Uint8Array(data)
    fetchFontLock = false
    console.info('✨ 字体请求用时:', performance.now() - t + 'ms')
    return {
      buffer,
      family_name: 'Source Han Serif CN Light',
    }
  } catch (error) {
    return console.error('fetch font error', error)
  }
}

(async function () {
  await resvg.initWasm(fetch('./index_bg.wasm'))
  initSelectOptions('slt-svg', svgList, defaultSvgNumber)
  initSelectOptions('slt-font', fontList, defaultFontNumber)
  const output = document.getElementById('output')
  const svgInputElement = document.querySelector('#input-svg')
  // 在 textarea 中输入 SVG 字符串
  svgInputElement.value = INIT_INPUT_SVG_STRING
  // INIT_INPUT_SVG_STRING to DOM
  const inputSvgElement = new DOMParser().parseFromString(INIT_INPUT_SVG_STRING, 'image/svg+xml').documentElement
  let resvgOpts = {
    font: {},
    fitTo: {
      mode: 'zoom',
      value: 2,
    },
  }
  if (checkHasText()) {
    const { buffer, family_name } = await getFontBuffer()
    resvgOpts.font.fontBuffers = [buffer]
    fontList[0].buffer = buffer
  }
  await svg2png(INIT_INPUT_SVG_STRING, resvgOpts, false, 20, false)

  async function svg2png(svgString, opts, hasCrop = false, bleedSize = 0, square = false) {
    const svg = svgString ? svgString : svgInputElement.value.trim()
    if (!svg) {
      alert('SVG is empty')
      return
    }
    const resvgJS = new resvg.Resvg(svg, opts)
    document.querySelector('#svg-info').textContent = 'Original SVG size: ' + resvgJS.width + ' x ' + resvgJS.height + ' px'
    const resolved = await Promise.all(
      resvgJS.imagesToResolve().map(async (url) => {
        const img = await fetch(url)
        const buffer = await img.arrayBuffer()
        return {
          url,
          buffer: new Uint8Array(buffer),
        }
      }),
    )
    if (resolved.l
```

--------------------------------

### Asynchronously Render SVG to PNG

Source: https://context7.com/thx/resvg-js/llms.txt

Use renderAsync for non-blocking SVG to PNG conversion in server environments. Supports AbortSignal for cancelling queued tasks. Requires SVG data and options for customization.

```javascript
const { renderAsync } = require('@resvg/resvg-js')
const fs = require('fs').promises

async function renderSvgAsync() {
  const svg = await fs.readFile('./image.svg')

  const options = {
    background: 'rgba(238, 235, 230, .9)',
    fitTo: { mode: 'width', value: 1200 },
    font: {
      fontFiles: ['./fonts/SourceHanSerif.ttf'],
      loadSystemFonts: false,
      defaultFontFamily: 'Source Han Serif CN Light',
    },
    logLevel: 'off',
  }

  // Basic async rendering
  const pngData = await renderAsync(svg, options)
  const pngBuffer = pngData.asPng()
  await fs.writeFile('./output.png', pngBuffer)

  console.log('Output PNG Size:', `${pngData.width} x ${pngData.height}`)
}

// With AbortSignal for cancellation
async function renderWithAbort() {
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="red" width="100" height="100"/></svg>'
  const controller = new AbortController()

  try {
    const renderPromise = renderAsync(svg, {}, controller.signal)
    // Cancel if needed (only works for queued, not yet started tasks)
    // controller.abort()
    const result = await renderPromise
    return result.asPng()
  } catch (err) {
    if (err.message === 'AbortError') {
      console.log('Rendering was cancelled')
    }
    throw err
  }
}

renderSvgAsync()
```

--------------------------------

### Render SVG to PNG in Node.js

Source: https://github.com/thx/resvg-js/blob/main/README.md

Load an SVG file, configure rendering options including custom fonts, and save the output as a PNG.

```javascript
const { promises } = require('fs')
const { join } = require('path')
const { Resvg } = require('@resvg/resvg-js')

async function main() {
  const svg = await promises.readFile(join(__dirname, './text.svg'))
  const opts = {
    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.
    },
  }
  const resvg = new Resvg(svg, opts)
  const pngData = resvg.render()
  const pngBuffer = pngData.asPng()

  console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
  console.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`)

  await promises.writeFile(join(__dirname, './text-out.png'), pngBuffer)
}

main()
```

--------------------------------

### renderAsync() Function

Source: https://context7.com/thx/resvg-js/llms.txt

Asynchronously renders an SVG to a PNG buffer. Supports non-blocking operations and cancellation via AbortSignal.

```APIDOC
## renderAsync(svg, options, signal)

### Description
Asynchronously render an SVG to PNG, useful for non-blocking operations in server environments. Supports AbortSignal for cancellation of queued rendering tasks.

### Parameters
#### Request Body
- **svg** (string/buffer) - Required - The SVG content to render.
- **options** (object) - Optional - Configuration for rendering (background, fitTo, font, logLevel).
- **signal** (AbortSignal) - Optional - Signal to cancel the rendering task.

### Response
- **pngData** (object) - Returns an object containing the rendered PNG data, width, height, and an asPng() method to retrieve the buffer.
```

--------------------------------

### SVG Size Input Event Listener

Source: https://github.com/thx/resvg-js/blob/main/wasm/index.html

Handles changes in the SVG size input. It updates the `fitTo` option in `resvgOpts` based on the provided value (width or original) and re-renders the PNG. Includes a confirmation dialog for large widths.

```javascript
svgSizeElement.addEventListener('change', function (event) {
  const value = event.target.value
  const hasCrop = cropElement.checked
  const square = squareElement.checked
  const bleedSize = bleedSizeElement.value
  if (!value) {
    Object.assign(resvgOpts, { fitTo: { mode: 'original' } })
  } else {
    const limitWidth = 3000
    const title = `The width(${limitWidth}) is larger and generating images will be slower.\nAre you sure to continue?`
    if (value >= limitWidth && !confirm(title)) {
      return
    }
    Object.assign(resvgOpts, {
      fitTo: {
        mode: 'width',
        value: parseInt(value, 10),
      },
    })
  }
  svg2png(null, resvgOpts, hasCrop, bleedSize, square)
})
```

--------------------------------

### Version Package (Minor)

Source: https://github.com/thx/resvg-js/blob/main/README.md

Use this command to increment the minor version of your npm package (e.g., 1.0.0 to 1.1.0).

```bash
npm version minor
```

--------------------------------

### Color Change Handler

Source: https://github.com/thx/resvg-js/blob/main/wasm/index.html

Updates the background color option for resvg and re-renders the PNG. It retrieves the computed color and converts it to RGBA format.

```javascript
function onChangeColor() {
  const hasCrop = cropElement.checked
  const square = squareElement.checked
  const bleedSize = bleedSizeElement.value
  const style = window.getComputedStyle(document.querySelector('html'), ':before')
  const color = style.getPropertyValue('color')
  const rgb_color = convertColorToRGBA(color)
  console.info('getComputedStyle color\n', color)
  console.info('convert to rgba()\n', rgb_color)
  resvgOpts.background = rgb_color
  svg2png(null, resvgOpts, hasCrop, bleedSize, square)
}
```

--------------------------------

### Convert SVG to Simplified Path String

Source: https://context7.com/thx/resvg-js/llms.txt

The toString() method converts various SVG shapes (rect, circle, ellipse) into <path> elements for optimization. Initialize Resvg with SVG content and options.

```javascript
const { Resvg } = require('@resvg/resvg-js')

// SVG with various shapes
const svg = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill="red"/>
  <circle cx="70" cy="25" r="15" fill="blue"/>
  <ellipse cx="25" cy="70" rx="20" ry="10" fill="green"/>
</svg>`

const resvg = new Resvg(svg, {
  font: { loadSystemFonts: false },
})

// Get simplified SVG with all shapes converted to paths
const simplifiedSvg = resvg.toString()
console.log('Simplified SVG:\n', simplifiedSvg)
// Output: SVG with <path> elements instead of rect, circle, ellipse
```

--------------------------------

### resvg-js fitTo Options

Source: https://context7.com/thx/resvg-js/llms.txt

Control output image dimensions using different scaling modes: original size, fit to width, fit to height, or zoom factor. Maintains aspect ratio when fitting.

```javascript
const { Resvg } = require('@resvg/resvg-js')

const svg = `<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect fill="blue" width="200" height="100"/>
</svg>`

// Original size (no scaling)
const original = new Resvg(svg, {
  fitTo: { mode: 'original' }
})
console.log('Original:', `${original.render().width} x ${original.render().height}`)
// Original: 200 x 100

// Fit to specific width (maintains aspect ratio)
const fitWidth = new Resvg(svg, {
  fitTo: { mode: 'width', value: 800 }
})
console.log('Fit Width:', `${fitWidth.render().width} x ${fitWidth.render().height}`)
// Fit Width: 800 x 400

// Fit to specific height (maintains aspect ratio)
const fitHeight = new Resvg(svg, {
  fitTo: { mode: 'height', value: 300 }
})
console.log('Fit Height:', `${fitHeight.render().width} x ${fitHeight.render().height}`)
// Fit Height: 600 x 300

// Zoom by factor
const zoom = new Resvg(svg, {
  fitTo: { mode: 'zoom', value: 2.5 }
})
console.log('Zoom 2.5x:', `${zoom.render().width} x ${zoom.render().height}`)
// Zoom 2.5x: 500 x 250
```

--------------------------------

### Version Package (Patch)

Source: https://github.com/thx/resvg-js/blob/main/README.md

Use this command to increment the patch version of your npm package (e.g., 1.0.0 to 1.0.1).

```bash
npm version patch
```

--------------------------------

### getBBox() Method

Source: https://context7.com/thx/resvg-js/llms.txt

Calculates the bounding box of all visible elements in the SVG, including applied transforms.

```APIDOC
## getBBox()

### Description
Calculate the bounding box of all visible elements in the SVG with transforms applied. Returns precise bounds including curves.

### Response
- **object** - Returns an object containing x, y, width, and height properties, or null if no visible content exists.
```

--------------------------------

### Helper Function for Multiple Event Listeners

Source: https://github.com/thx/resvg-js/blob/main/wasm/index.html

A utility function to add multiple event listeners to an element with the same handler.

```javascript
function addMultipleEventListener(element, events, handler) {
  events.forEach(e => element.addEventListener(e, handler))
}
```

--------------------------------

### toString() Method

Source: https://context7.com/thx/resvg-js/llms.txt

Converts an SVG to a simplified path-based string representation, transforming all shapes into <path> elements.

```APIDOC
## toString()

### Description
Convert the SVG to a simplified path-based string representation. This transforms all shapes (rect, circle, ellipse, etc.) to <path> elements, useful for optimizing SVG output.

### Response
- **string** - The simplified SVG string.
```