@nick/resvg

TypeScript + WebAssembly bindings for resvg.

---

API

render

Renders a string or BufferSource object containing an SVG into a PNG image, optionally with a custom set of options to control the rendering behavior.

Returns a Uint8Array containing the rasterized PNG image data.

Signature

render(svg: string | BufferSource, options?: Options): Uint8Array;

Parameters

• svg - The SVG data to render, either as a string or BufferSource object.
• options - An optional object with Options for controlling the renderer.

Returns

The rasterized PNG image data as a Uint8Array.

Example

import { render } from "jsr:@nick/resvg";

const data = render(`<?xml version="1.0" encoding="UTF-8"?>
<svg width="820px" height="312px" viewBox="0 0 820 312" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Testing</title>
    <g id="testing" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect fill="#FFFFFF" x="0" y="0" width="820" height="312"></rect>
        <text id="test-text" font-family="sans-serif" font-size="32" font-weight="bold" fill="#111827">
            <tspan x="51" y="90">Testing Testing Testing</tspan>
        </text>
        <text id="monospace" font-family="monospace" font-size="32" font-weight="normal" fill="#2D53A4">
            <tspan x="502" y="233">Monospace</tspan>
        </text>
    </g>
</svg>`);

await Deno.writeFile("example.png", data);

---

Options

The Options interface provides numerous options for customizing the rendering process. All the options from the resvg crate are available, as well as some additional options specific to this package.

Option	Type	Description	Default
autofix	boolean	Automatically fix common SVG issues.	true
defaultSize	Size	The default size of the SVG.	See Size below.
dpi	number	The DPI (dots per inch) of the output.	96
fontFamily	string	The default font family to use.	sans-serif
fontFamilies	FontFamilies	Maps generic font types to their specific font families.	See FontFamilies below.
fontSize	number	The default font size to use if one isn't specified.	12
fontFaces	Array<FontFace>	An array of FontFace objects to preload in the renderer.	[]
languages	string[]	An array of language tags to use for font selection.	["en"]
styles	string, string[]	A string or array of CSS styles to apply to the SVG.	[]
shapeRendering	ShapeRendering	The default shape-rendering value (when set to auto).	"crispEdges"
textRendering	TextRendering	The default text-rendering value (when set to auto).	"optimizeLegibility"
imageRendering	ImageRendering	The default image-rendering value (when set to auto).	"optimizeQuality"

---

Fonts

• Bitter is the default and the serif font.
• Inter is the sans-serif font.
• JetBrains Mono is the monospace font.

---

Examples

Basic Usage

Advanced Usage

Custom Fonts

import { type Options, render } from "jsr:@nick/resvg";

const fontFaces = [
  {
    kind: "monospace",
    name: "Operator Mono",
    weight: 400,
    style: "normal",
    data:
      await (await fetch("./fonts/OperatorMonoNerd/OperatorMonoNerd-Book.ttf"))
        .bytes(),
  },
];

const options = {
  fontFaces,
  fontFamily: "OperatorMono Nerd Font",
  styles: [
    `.monospace {
      font-family: "OperatorMono Nerd Font", monospace;
      font-size: 32px;
      font-weight: 400;
      fill: #2D53A4;
    }`,
  ],
} satisfies Options;

const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="820px" height="312px" viewBox="0 0 820 312" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Testing</title>
    <g id="testing" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect fill="#FFFFFF" x="0" y="0" width="820" height="312"></rect>
        <text id="test-text" font-family="sans-serif" font-size="32" font-weight="bold" fill="#111827">
            <tspan x="51" y="90">Testing Testing Testing</tspan>
        </text>
        <text class="monospace">
            <tspan x="502" y="233">Monospace</tspan>
        </text>
    </g>
</svg>`;

const data = render(svg, options);

await Deno.writeFile("./monospace.png", data);

---

MIT © Nicholas Berlette. All rights reserved.

GitHub · Issues · JSR · Docs