svg2png-wasm

SVG Support #

svg2png-wasm uses resvg for SVG conversion.

So, please check resvg document for SVG support status.

Getting Started #

You can use this library in Node.js, Deno and Browser.

Node.js

npm install svg2png-wasm
# yarn add svg2png-wasm
# pnpm add svg2png-wasm

Deno


	// Skypack

	export * 
	from 
	'https://cdn.skypack.dev/svg2png-wasm?dts';

	// or

	// esm.sh

	export * 
	from 
	'https://esm.sh/svg2png-wasm';

Browser

You can use npm (like Node.js) to bundle it with bundler (Webpack, Vite, etc.).

It can also be used directly as follows.


	<
	script 
	src=
	"https://unpkg.com/svg2png-wasm">
	</
	script>


	const { initialize, svg2png, createSvg2png } = svg2pngWasm;

Basic Usage #

1. Prepare wasm

You will need to prepare a wasm module.

e.g.


	// Node.js

	import { readFileSync } 
	from 
	'fs';

	const wasm = 
	readFileSync(
	'./node_modules/svg2png-wasm/svg2png_wasm_bg.wasm');


	// Deno (For example, fetch from unpkg CDN)

	const wasm = 
	await 
	fetch(
  
	'https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm',
).
	then(
	(
	res) => res.
	arrayBuffer());


	// browser (For example, we have a wasm file in the assets directory)

	const wasm = 
	await 
	fetch(
	'/assets/svg2png_wasm_bg.wasm').
	then(
	(
	res) =>
  res.
	arrayBuffer(),
);

2. Initialize wasm


	import { initialize } 
	from 
	'svg2png-wasm';

	await 
	initialize(wasm);

3. Convert SVG


	import { svg2png } 
	from 
	'svg2png-wasm';

	const png = 
	await 
	svg2png(svg);

Font Settings #

WebAssembly is run in a sandbox for safety reasons. Therefore, WebAssembly does not have access to system information, for example, it cannot use the system fonts.

For this reason, you must pass the fonts when you want to use text in SVG.

The first entry in the field array will be the fallback font.

The field is used when the font is specified as , etc.

Example


	import { svg2png, createSvg2png } 
	from 
	'svg2png-wasm';


	// Prepare font data

	const robotoFont = 
	await 
	fetch(
	'/assets/Roboto.ttf').
	then(
	(
	res) =>
  res.
	arrayBuffer(),
);


	// convert directly

	const png = 
	await 
	svg2png(svg, {
  
	fonts: [
	new 
	Uint8Array(robotoFont)],
  
	defaultFontFamily: { 
	sansSerifFamily: 
	'Roboto' },
  
	scale: 
	2,
});


	// OR

	// create font loaded svg2png

	const fontLoadedSvg2png = 
	createSvg2png({
  
	fonts: [
	new 
	Uint8Array(robotoFont)],
  
	defaultFontFamily: { 
	sansSerifFamily: 
	'Roboto' },
});

	// convert

	const png = 
	await 
	fontLoadedSvg2png(svg, { 
	scale: 
	2 });

Advanced usage #

Initialize only once

The function can be called only once.

If it is called more than once, will be rejected.

Initialize without buffer

The argument of the function can be something other than a buffer.

Types


	export type 
	InitInput =
  | 
	RequestInfo
  | 
	URL
  | 
	Response
  | 
	BufferSource
  | 
	WebAssembly.
	Module;

	export 
	const 
	initialize: 
	(
	mod: 
	Promise<InitInput> | InitInput) => 
	Promise<
	void>;

Examples


	// full code (WebAsembly.Module)

	const response = 
	await 
	fetch(
  
	'https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm',
);

	const buffer = 
	await response.
	arrayBuffer();

	const { 
	module } = 
	await 
	WebAssembly.
	instantiate(buffer);

	await 
	initialize(
	module);


	// BufferSource

	const response = 
	await 
	fetch(
  
	'https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm',
);

	const buffer = 
	await response.
	arrayBuffer();

	await 
	initialize(buffer);


	// Response

	const response = 
	await 
	fetch(
  
	'https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm',
);

	await 
	initialize(response);


	// Promise<Response>

	await 
	initialize(
	fetch(
	'https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm'));


	// in Deno (Promise<BufferSource>)

	await 
	initialize(
	Deno.
	readFile(
	'./svg2png_wasm_bg.wasm'));


	// in Deno and Browser (RequestInfo (=string/URL))

	await 
	initialize(
	'https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm');

Convert options

The output image can be adjusted by specifying an option as the second argument of the function .

Size option

You can specify output image size.

Specifying the width and height will not stretch the image.


	// 2x scale

	await 
	svg2png(svgData, { 
	scale: 
	2 });


	// Fit to 500px width

	await 
	svg2png(svgData, { 
	width: 
	500 });


	// Fit to 128px height

	await 
	svg2png(svgData, { 
	height: 
	128 });


	// Fit to 300px width (width and height have priority)

	await 
	svg2png(svgData, { 
	width: 
	300, 
	scale: 
	10 });

Background color option

You can specify background color of the output image when the SVG is transparent.


	// Compatible with CSS Color Module 3

	// with color keyword

	await 
	svg2png(svgData, { 
	backgroundColor: 
	'lightskyblue' });


	// with hex values

	await 
	svg2png(svgData, { 
	backgroundColor: 
	'#3cf' });


	// with hsla

	await 
	svg2png(svgData, { 
	backgroundColor: 
	'hsla(240, 100%, 50%, 0.5)' });

Custom svg2png

You can create a custom svg2png function.

Basically, you can use , but if you want to process a lot of data continuously, consider using . It can reduce the overhead of font loading. Converters generated by should be disposed of after use by calling the dispose method.


	const svgs = [
  
	'<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> ... </svg>',
  
	'<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> ... </svg>',
  
	'<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> ... </svg>',
  
	// and more ...
];

	const font = 
	await 
	fetch(
	'./Roboto.ttf').
	then(
	(
	res) => res.
	arrayBuffer());

	const svg2png = 
	createSvg2png({
  
	fonts: [
	new 
	Uint8Array(font)],
});


	const pngs = 
	await 
	Promise.
	all(svgs.
	map(
	(
	svg) => 
	svg2png(svg, { 
	scale: 
	2 })));
svg2png.
	dispose(); 
	// You should dispose svg2png, if you will not use it in the future