resvg-js

To use resvg-js in a browser, you must first initialize the Wasm module using resvg.initWasm().

1. Fetch the .wasm file (e.g., from https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm).
2. Initialize with await resvg.initWasm(wasmBuffer).
3. Create a new resvg.Resvg instance.
4. Call .render(svg, opts) to get the PNG data as a Uint8Array.

For custom fonts in the browser, use the font.fontBuffers option with an array of ArrayBuffer objects.

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

To render an SVG to PNG in Node.js, import Resvg from @resvg/resvg-js. You can pass an options object to configure background color, scaling (fitTo), and fonts.

Key options:

• background: A color string (e.g., 'rgba(238, 235, 230, .9)').
• fitTo: An object with mode ('width' or 'height') and value to scale the output.
• font: Configuration for fonts, including fontFiles (array of paths) and loadSystemFonts (boolean).

After calling resvg.render(), use pngData.asPng() to get the buffer.

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.
    },
  }
  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()