Skip to main content

Function: toPNG()

toPNG(svg, __namedParameters?): Promise<Uint8Array<ArrayBufferLike>>

Defined in: packages/sdvplot/src/export/index.ts:287

Rasterize an SVG with @resvg/resvg-js (optional peer; Node only). Throws OptionalDependencyError when it is missing. An HTML-serialized figure (a DOM element or its outerHTML, as Observable Plot makes) gets the xmlns (and xmlns:xlink) declarations it lacks. Remote images are downloaded and drawn unless images is "skip". Text is drawn in the system fonts; on a host without any, pass fonts.files or every label comes out blank.

Parameters​

svg​

string | { outerHTML: string; }

__namedParameters?​

ToPNGOptions = {}

Returns​

Promise<Uint8Array<ArrayBufferLike>>

Example​

import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";
import { toPNG } from "@sportsdataverse/sdvplot/export";

// any .ttf/.otf on disk; this one is Source Sans 3 (OFL) from the sdvplot-js repo's examples/fonts
const font = join(dirname(fileURLToPath(import.meta.url)), "../../../../fonts/SourceSans3-Regular.ttf");
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="60"><text x="8" y="42" font-size="32">Giants 27</text></svg>`;
// the same pixels with or without system fonts: only the given file is loaded
await toPNG(svg, { background: "white", fonts: { files: [font], system: false } });