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.
render(svg: string | BufferSource, options?: Options): Uint8Array;svg- The SVG data to render, either as a string orBufferSourceobject.options- An optional object withOptionsfor controlling the renderer.
The rasterized PNG image data as a Uint8Array.
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);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. | |
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" |
Bitteris the default and the serif font.Interis the sans-serif font.JetBrains Monois the monospace font.
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);