2 |
3 | svg2png-wasm
4 |
5 | [](https://npmjs.com/svg2png-wasm)
6 | [](https://npmjs.com/svg2png-wasm)
7 |
8 | **[Demo site](https://ssssota.github.io/svg2png-wasm/)**
9 |
10 | SVG to PNG converter JS library made with WASM + [resvg](https://crates.io/crates/resvg).
11 |
12 | See [resvg](https://github.com/RazrFalcon/resvg#svg-support) for SVG support status.
13 |
14 | ## 💻 Usage
15 |
16 | ### Installation
17 |
18 | #### Node.js / Browser
19 |
20 | ```sh
21 | npm install svg2png-wasm
22 | # yarn add svg2png-wasm
23 | # pnpm add svg2png-wasm
24 | ```
25 |
26 | Or, using a script tag in the browser and load from unpkg.
27 |
28 | ```html
29 |
30 |
31 |
32 |
33 | ```
34 |
35 | #### Deno
36 |
37 | ```ts
38 | // from esm.sh
39 | export * from 'https://esm.sh/svg2png-wasm@0.6.1';
40 | // from skypack.dev
41 | export * from 'https://cdn.skypack.dev/svg2png-wasm@0.6.1?dts';
42 | ```
43 |
44 | ### Examples
45 |
46 | - Use in Web Worker [Demo site](https://ssssota.github.io/svg2png-wasm/) ([source](./site/))
47 | - Use with Cloudflare Workers [ssssota/svg2png-worker](https://github.com/ssssota/svg2png-worker)
48 | - Use with Deno Deploy [ssssota/svg2png-deno-deploy](https://github.com/ssssota/svg2png-deno-deploy)
49 | - Or [test directory](./test/)
50 |
51 | #### Node.js
52 |
53 | ```js
54 | import { svg2png, initialize } from 'svg2png-wasm';
55 | // const { svg2png, initialize } = require('svg2png-wasm');
56 | import { readFileSync, writeFileSync } from 'fs';
57 |
58 | await initialize(
59 | readFileSync('./node_modules/svg2png-wasm/svg2png_wasm_bg.wasm'),
60 | );
61 |
62 | /** @type {Uint8Array} */
63 | const png = await svg2png(
64 | '',
65 | {
66 | scale: 2, // optional
67 | width: 400, // optional
68 | height: 400, // optional
69 | backgroundColor: 'white', // optional
70 | fonts: [
71 | // optional
72 | readFileSync('./Roboto.ttf'), // require, If you use text in svg
73 | ],
74 | defaultFontFamily: {
75 | // optional
76 | sansSerif: 'Roboto',
77 | },
78 | },
79 | );
80 | writeFileSync('./output.png', png);
81 | ```
82 |
83 | #### Browser
84 |
85 | ```js
86 | import { createSvg2png, initialize } from 'svg2png-wasm';
87 |
88 | // put wasm to your assets directory
89 | await initialize(fetch('/assets/svg2png_wasm_bg.wasm'));
90 | const svgs = [
91 | '',
92 | '',
93 | '',
94 | // and more ...
95 | ];
96 | const font = await fetch('./Roboto.ttf').then((res) => res.arrayBuffer());
97 | const svg2png = createSvg2png({
98 | fonts: [new Uint8Array(font)], // require, If you use text in svg
99 | });
100 | /** @type {Uint8Array[]} */
101 | const pngs = await Promise.all(svgs.map((svg) => svg2png(svg, { scale: 2 })));
102 | svg2png.dispose(); // You should dispose svg2png, if you will not use it in the future
103 | ```
104 |
105 | Or, using a script tag in the browser and load from esm.sh.
106 |
107 | ```html
108 | svg2png-wasm
10 |Convert svg to png using WebAssembly.
11 |Demo
16 |Playground
21 |Runs in the browser, file is not sent to the server.
22 |%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/site/src/custom.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*?u8" {
2 | const content: Uint8Array;
3 | export default content;
4 | }
5 |
--------------------------------------------------------------------------------
/site/src/lib/components/Demos.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 | {#each Object.entries(imagesPromiseMap) as [url, promises] (url)}
17 |
59 |
60 |
73 |
--------------------------------------------------------------------------------
/site/src/lib/components/Header.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
18 |
57 | {/each}
58 | 20 | 39 |
40 |
41 | {#each promises as promise}
42 | {#await promise}
43 |
52 | {/if}
53 | {/await}
54 | {/each}
55 |
9 |
10 |
11 |
14 |
15 |
18 |
28 |
10 |
11 | 
12 |
13 |
14 |
15 |
18 |
19 |
24 |
9 |
11 |
12 |
26 |
--------------------------------------------------------------------------------
/site/src/lib/components/Playground.svelte:
--------------------------------------------------------------------------------
1 |
32 |
33 |
34 | 
56 | {/if}
57 | {/await}
58 | {:catch e}
59 |
63 |
64 |
70 |
--------------------------------------------------------------------------------
/site/src/lib/components/SelectableCodeSnippet.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 | {#each Object.keys(titleValueMap) as title (title)}
20 |
23 |
24 | {#if highlight !== undefined}
25 |
33 |
34 |
39 |
--------------------------------------------------------------------------------
/site/src/lib/components/markdown-plugins/code/Blockquote.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | 6 |15 | -------------------------------------------------------------------------------- /site/src/lib/components/markdown-plugins/code/BlockquoteAdapter.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |12 | 14 |13 |
{@render children?.()}7 | -------------------------------------------------------------------------------- /site/src/lib/components/markdown-plugins/code/Code.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
{@render children?.()}
7 |
--------------------------------------------------------------------------------
/site/src/lib/components/markdown-plugins/code/Pre.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | {#each get(getAstNode()).children?.[0].children ?? [] as astNode}
13 |
--------------------------------------------------------------------------------
/site/src/lib/components/markdown-plugins/code/index.ts:
--------------------------------------------------------------------------------
1 | import type { Plugin } from "svelte-exmarkdown";
2 | import Blockquote from "./BlockquoteAdapter.svelte";
3 | import Code from "./CodeAdapter.svelte";
4 | import Pre from "./PreAdapter.svelte";
5 |
6 | export const codePlugin: Plugin = {
7 | renderer: {
8 | pre: Pre,
9 | code: Code,
10 | blockquote: Blockquote,
11 | h1: "h2",
12 | h2: "h3",
13 | h3: "h4",
14 | h4: "h5",
15 | h5: "h6",
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/site/src/lib/components/markdown-plugins/highlight/index.ts:
--------------------------------------------------------------------------------
1 | import typescript from "highlight.js/lib/languages/typescript";
2 | import rehypeHighlight from "rehype-highlight";
3 | import type { Plugin } from "svelte-exmarkdown";
4 | import "highlight.js/styles/github.css";
5 |
6 | export const highlightPlugin: Plugin = {
7 | rehypePlugin: [rehypeHighlight, { languages: { typescript } }],
8 | };
9 |
--------------------------------------------------------------------------------
/site/src/lib/components/markdown-plugins/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./highlight";
2 | export * from "./code";
3 |
--------------------------------------------------------------------------------
/site/src/lib/stores/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./packageManager";
2 | export * from "./svg2png";
3 |
--------------------------------------------------------------------------------
/site/src/lib/stores/packageManager.ts:
--------------------------------------------------------------------------------
1 | import { browser } from "$app/environment";
2 | import { writable } from "svelte/store";
3 |
4 | export const packageManagers = ["npm", "yarn", "pnpm"] as const;
5 |
6 | export type PackageManager = (typeof packageManagers)[number];
7 |
8 | const storeKey = "packageManager";
9 | const npmOrYarnOrPnpm = (pm: unknown): PackageManager =>
10 | pm === "npm" || pm === "yarn" || pm === "pnpm" ? pm : "npm";
11 |
12 | export const packageManager = (() => {
13 | const { subscribe, set } = writable