{"id":18210165,"url":"https://github.com/thx/resvg-js","last_synced_at":"2026-01-28T09:04:49.036Z","repository":{"id":37097193,"uuid":"414895317","full_name":"thx/resvg-js","owner":"thx","description":"A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.","archived":false,"fork":false,"pushed_at":"2026-01-09T10:04:46.000Z","size":92707,"stargazers_count":1861,"open_issues_count":61,"forks_count":75,"subscribers_count":13,"default_branch":"main","last_synced_at":"2026-01-12T17:53:36.785Z","etag":null,"topics":["nodejs","rust","svg","wasm"],"latest_commit_sha":null,"homepage":"https://resvg-js.vercel.app/","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-10-08T07:51:05.000Z","updated_at":"2026-01-12T12:29:00.000Z","dependencies_parsed_at":"2022-07-15T16:37:24.434Z","dependency_job_id":"7aca3945-f92b-49c0-bf93-535e027bd332","html_url":"https://github.com/thx/resvg-js","commit_stats":{"total_commits":357,"total_committers":14,"mean_commits":25.5,"dds":"0.38655462184873945","last_synced_commit":"f4fbff0633549bd4737db3bd05d88dd1eca2b940"},"previous_names":["thx/resvg-js"],"tags_count":35,"template":false,"template_full_name":null,"purl":"pkg:github/thx/resvg-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thx%2Fresvg-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thx%2Fresvg-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thx%2Fresvg-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thx%2Fresvg-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thx","download_url":"https://codeload.github.com/thx/resvg-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thx%2Fresvg-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28661874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nodejs","rust","svg","wasm"],"created_at":"2024-11-03T15:00:53.029Z","updated_at":"2026-01-22T10:31:24.018Z","avatar_url":"https://github.com/thx.png","language":"Rust","funding_links":[],"categories":["TypeScript","Rust"],"sub_categories":[],"readme":"# resvg-js\n\n\u003ca href=\"https://github.com/yisibl/resvg-js/actions/workflows/CI.yaml?query=event%3Apush+branch%3Amain\"\u003e\u003cimg alt=\"GitHub CI Status\" src=\"https://github.com/thx/resvg-js/actions/workflows/CI.yaml/badge.svg?branch=main\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@resvg/resvg-js\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@resvg/resvg-js.svg?sanitize=true\" alt=\"@resvg/resvg-js npm version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://npmcharts.com/compare/@resvg/resvg-js?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@resvg/resvg-js.svg?sanitize=true\" alt=\"@resvg/resvg-js downloads\"\u003e\u003c/a\u003e\n[![Rust 1.65+](https://img.shields.io/badge/rust-1.65+-orange.svg)](https://www.rust-lang.org)\n\n\u003e resvg-js is a high-performance SVG renderer and toolkit, powered by Rust based [resvg](https://github.com/RazrFalcon/resvg/), with Node.js backend using [napi-rs](https://github.com/napi-rs/napi-rs), also a pure WebAssembly backend.\n\nPlease use all lowercase `resvg-js` when referencing project names.\n\n## Playground\n\nhttps://resvg-js.vercel.app\n\n## Features\n\n- Fast, safe and zero dependencies, with correct output.\n- Convert SVG to PNG, includes cropping, scaling and setting the background color.\n- Support system fonts and custom fonts in SVG text.\n- `v2`: Gets the width and height of the SVG and the generated PNG.\n- `v2`: Support for outputting simplified SVG strings, such as converting shapes(rect, circle, etc) to `\u003cpath\u003e`.\n- `v2`: Support WebAssembly.\n- `v2`: Support to get SVG bounding box and crop according to bounding box.\n- `v2`: Support for loading images of external links in `\u003cimage\u003e`.\n- No need for node-gyp and postinstall, the `.node` file has been compiled for you.\n- Cross-platform support, including [Apple M Chips](https://www.apple.com/newsroom/2020/11/apple-unleashes-m1/).\n- Support for running as native addons in Deno.\n\n## Installation\n\n### Node.js\n\n```shell\nnpm i @resvg/resvg-js\n```\n\n### Browser(Wasm)\n\n```html\n\u003cscript src=\"https://unpkg.com/@resvg/resvg-wasm\"\u003e\u003c/script\u003e\n```\n\n## Docs\n\n- Node.js see [index.d.ts](./index.d.ts)\n- Wasm see [wasm/index.d.ts](./wasm/index.d.ts)\n\n## Example\n\n### [Node.js Example](example/index.js)\n\nThis example will load Source Han Serif, and then render the SVG to PNG.\n\n```shell\nnode example/index.js\n\nLoaded 1 font faces in 0ms.\nFont './example/SourceHanSerifCN-Light-subset.ttf':0 found in 0.006ms.\n✨ Done in 55.65491008758545 ms\n```\n\n### [Deno Example](example/index-deno.js)\n\n```shell\ndeno run --unstable --allow-read --allow-write --allow-ffi example/index-deno.js\n\n[2022-11-16T15:03:29Z DEBUG resvg_js::fonts] Loaded 1 font faces in 0.067ms.\n[2022-11-16T15:03:29Z DEBUG resvg_js::fonts] Font './example/SourceHanSerifCN-Light-subset.ttf':0 found in 0.001ms.\nOriginal SVG Size: 1324 x 687\nOutput PNG Size  : 1200 x 623\n✨ Done in 66 ms\n```\n\n| SVG                                      | PNG                                          |\n| ---------------------------------------- | -------------------------------------------- |\n| \u003cimg width=\"500\" src=\"example/text.svg\"\u003e | \u003cimg width=\"500\" src=\"example/text-out.png\"\u003e |\n\n## Usage\n\n### Node.js\n\n```js\nconst { promises } = require('fs')\nconst { join } = require('path')\nconst { Resvg } = require('@resvg/resvg-js')\n\nasync function main() {\n  const svg = await promises.readFile(join(__dirname, './text.svg'))\n  const opts = {\n    background: 'rgba(238, 235, 230, .9)',\n    fitTo: {\n      mode: 'width',\n      value: 1200,\n    },\n    font: {\n      fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'], // Load custom fonts.\n      loadSystemFonts: false, // It will be faster to disable loading system fonts.\n      // defaultFontFamily: 'Source Han Serif CN Light', // You can omit this.\n    },\n  }\n  const resvg = new Resvg(svg, opts)\n  const pngData = resvg.render()\n  const pngBuffer = pngData.asPng()\n\n  console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)\n  console.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`)\n\n  await promises.writeFile(join(__dirname, './text-out.png'), pngBuffer)\n}\n\nmain()\n```\n\n### Bun\n\nStarting with [Bun 0.8.1](https://github.com/oven-sh/bun/issues/172#issuecomment-1692930718), resvg-js can be run directly in Bun without any modification to the JS files, and is fully compatible with the syntax in Node.js.\n\n```shell\nbun example/index.js\n```\n\n### Deno\n\nStarting with [Deno 1.26.1](https://github.com/denoland/deno/releases/tag/v1.26.1), there is support for running Native Addons directly from Node.js.\nThis allows for performance that is close to that found in Node.js.\n\n```shell\ndeno run --unstable --allow-read --allow-write --allow-ffi example/index-deno.js\n```\n\n```js\nimport * as path from 'https://deno.land/std@0.159.0/path/mod.ts'\nimport { Resvg } from 'npm:@resvg/resvg-js'\nconst __dirname = path.dirname(path.fromFileUrl(import.meta.url))\n\nconst svg = await Deno.readFile(path.join(__dirname, './text.svg'))\nconst opts = {\n  fitTo: {\n    mode: 'width',\n    value: 1200,\n  },\n}\n\nconst t = performance.now()\nconst resvg = new Resvg(svg, opts)\nconst pngData = resvg.render()\nconst pngBuffer = pngData.asPng()\nconsole.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)\nconsole.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`)\nconsole.info('✨ Done in', performance.now() - t, 'ms')\n\nawait Deno.writeFile(path.join(__dirname, './text-out-deno.png'), pngBuffer)\n```\n\n### WebAssembly\n\nThis package also ships a pure WebAssembly artifact built with `wasm-bindgen` to run in browsers.\n\n#### Browser\n\n```html\n\u003cscript src=\"https://unpkg.com/@resvg/resvg-wasm\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  ;(async function () {\n    // The Wasm must be initialized first\n    await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))\n\n    const font = await fetch('./fonts/Pacifico-Regular.woff2')\n    if (!font.ok) return\n\n    const fontData = await font.arrayBuffer()\n    const buffer = new Uint8Array(fontData)\n\n    const opts = {\n      fitTo: {\n        mode: 'width', // If you need to change the size\n        value: 800,\n      },\n      font: {\n        fontBuffers: [buffer], // New in 2.5.0, loading custom fonts\n      },\n    }\n\n    const svg = '\u003csvg\u003e ... \u003c/svg\u003e' // Input SVG, String or Uint8Array\n    const resvgJS = new resvg.Resvg(svg, opts)\n    const pngData = resvgJS.render(svg, opts) // Output PNG data, Uint8Array\n    const pngBuffer = pngData.asPng()\n    const svgURL = URL.createObjectURL(new Blob([pngData], { type: 'image/png' }))\n    document.getElementById('output').src = svgURL\n  })()\n\u003c/script\u003e\n```\n\nSee [playground](wasm/index.html), it is also possible to [call Wasm in Node.js](example/wasm-node.js), but it is slower.\n\n## Sample Benchmark\n\n```shell\nnpm i benny@3.x sharp@0.x @types/sharp svg2img@0.x\nnpm run bench\n```\n\n```shell\nRunning \"resize width\" suite...\n  resvg-js(Rust):\n    12 ops/s\n\n  sharp:\n    9 ops/s\n\n  skr-canvas(Rust):\n    7 ops/s\n\n  svg2img(canvg and node-canvas):\n    6 ops/s\n```\n\n## Support matrix\n\n|                  | Node.js 12 | Node.js 14 | Node.js 16 | Node.js 18 | Node.js 20 | Node.js 22 | npm                                                                                                                                                                     |\n| ---------------- | ---------- | ---------- | ---------- | ---------- | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Windows x64      | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-win32-x64-msvc.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-win32-x64-msvc)           |\n| Windows x32      | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-win32-ia32-msvc.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-win32-ia32-msvc)         |\n| Windows arm64    | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-win32-arm64-msvc.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-win32-arm64-msvc)       |\n| macOS x64        | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-darwin-x64.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-darwin-x64)                   |\n| macOS arm64(M Chips)  | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-darwin-arm64.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-darwin-arm64)               |\n| Linux x64 gnu    | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-linux-x64-gnu.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-linux-x64-gnu)             |\n| Linux x64 musl   | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-linux-x64-musl.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-linux-x64-musl)           |\n| Linux arm gnu    | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-linux-arm-gnueabihf.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-linux-arm-gnueabihf) |\n| Linux arm64 gnu  | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-linux-arm64-gnu.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-linux-arm64-gnu)         |\n| Linux arm64 musl | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-linux-arm64-musl.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-linux-arm64-musl)       |\n| Android arm64    | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-android-arm64.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-android-arm64)             |\n| Android armv7    | ✓          | ✓          | ✓          | ✓          | ✓          | ✓          | [![npm version](https://img.shields.io/npm/v/@resvg/resvg-js-android-arm-eabi.svg?sanitize=true)](https://www.npmjs.com/package/@resvg/resvg-js-android-arm-eabi)       |\n\n## Test or Contributing\n\n- Install latest `Rust`\n- Install `Node.js@10+` which fully supported `Node-API`\n- Install `wasm-pack`\n\n  ```bash\n  curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh\n  ```\n\n  Normally `wasm-pack` will install `wasm-bindgen` automatically, but if the installation [fails due to network reasons](https://github.com/rustwasm/wasm-pack-template/issues/44#issuecomment-521657516), please try to install it manually.\n\n  ```bash\n  cargo install wasm-bindgen-cli\n  ```\n\n  On computers with Apple M chips, the following error message may appear:\n\n  \u003e Error: failed to download from https://github.com/WebAssembly/binaryen/releases/download/version_90/binaryen-version_90-x86_64-apple-darwin.tar.gz\n\n  Please install binaryen manually:\n\n  ```bash\n  brew install binaryen\n  ```\n\n### Build Node.js bindings\n\n```bash\nnpm i\nnpm run build\nnpm test\n```\n\n### Build WebAssembly bindings\n\n```bash\nnpm i\nnpm run build:wasm\nnpm run test:wasm\n```\n\n### Upgrade Yarn\n\nThis project uses Yarn v4. To upgrade to a newer version, run:\n\n```bash\nyarn set version stable\n```\n\nThis will automatically download the latest stable Yarn from `repo.yarnpkg.com` and update the `yarnPath` in `.yarnrc.yml`.\n\n\u003e **Note**: If the yarn executable fails to start due to a missing binary, temporarily modify `yarnPath` in `.yarnrc.yml` to your current version to bootstrap, then run the upgrade command.\n\n## Roadmap\n\nI will consider implementing the following features, if you happen to be interested,\nplease feel free to discuss with me or submit a PR.\n\n- [x] Support async API\n- [x] Upgrade to napi-rs v2\n- [x] Support WebAssembly\n- [x] Output usvg-simplified SVG string\n- [x] Support for getting SVG Bounding box\n- [ ] Support for generating more lossless bitmap formats, e.g. avif, webp, JPEG XL\n\n## Release package\n\nWe use GitHub actions to automatically publish npm packages.\n\n```bash\n# 1.0.0 =\u003e 1.0.1\nnpm version patch\n\n# or 1.0.0 =\u003e 1.1.0\nnpm version minor\n```\n\n## License\n\nPlease use all lowercase `resvg-js` when referencing project names.\n\n[MPLv2.0](https://www.mozilla.org/en-US/MPL/)\n\nCopyright (c) 2021-present, yisibl(一丝)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthx%2Fresvg-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthx%2Fresvg-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthx%2Fresvg-js/lists"}