@resvg/resvg-js - npm Package Compare versions

Comparing version 2.0.0-beta.0 to 2.0.0

index.d.ts

@@ -61,3 +61,3 @@ /// <reference types="node" />
 export class RenderedImage {
-  /** Get the PNG Buffer */
+  /** Write the image data to Buffer */
   asPng(): Buffer
@@ -64,0 +64,0 @@

js-binding.d.ts

@@ -8,2 +8,7 @@ /* tslint:disable */
 export class Resvg {
+  constructor(svg: string | Buffer, options?: string | undefined | null)
+  /** Renders an SVG in Node.js */
+  render(): RenderedImage
+  /** Output usvg-simplified SVG string */
+  toString(): string
   /** Get the SVG width */
@@ -15,3 +20,3 @@ get width(): number
 export class RenderedImage {
-  /** Get the PNG Buffer */
+  /** Write the image data to Buffer */
   asPng(): Buffer
@@ -18,0 +23,0 @@ /** Get the PNG width */

package.json

 {
   "name": "@resvg/resvg-js",
-  "version": "2.0.0-beta.0",
-  "description": "A high-performance SVG renderer, powered by Rust based resvg and napi-rs",
+  "version": "2.0.0",
+  "description": "A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs",
   "main": "index.js",
@@ -76,9 +76,9 @@ "repository": "[e-mail]:yisibl/resvg-js.git",
   "devDependencies": {
-    "@napi-rs/canvas": "^0.1.19",
-    "@napi-rs/cli": "^2.4.4",
-    "@swc-node/register": "^1.4.2",
+    "@napi-rs/canvas": "^0.1.21",
+    "@napi-rs/cli": "^2.7.0",
+    "@swc-node/register": "^1.5.1",
     "@types/node": "^17.0.1",
-    "@types/sharp": "^0.30.0",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
+    "@types/sharp": "^0.30.2",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "ava": "^3.15.0",
@@ -96,8 +96,8 @@ "benny": "^3.7.1",
     "jimp": "^0.16.1",
-    "lint-staged": "^12.1.3",
+    "lint-staged": "^12.4.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "sharp": "^0.30.0",
+    "prettier": "^2.6.2",
+    "sharp": "^0.30.4",
     "svg2img": "^0.9.4",
-    "typescript": "^4.5.4"
+    "typescript": "^4.6.3"
   },
@@ -143,15 +143,15 @@ "lint-staged": {
   "optionalDependencies": {
-    "@resvg/resvg-js-win32-x64-msvc": "2.0.0-beta.0",
-    "@resvg/resvg-js-darwin-x64": "2.0.0-beta.0",
-    "@resvg/resvg-js-linux-x64-gnu": "2.0.0-beta.0",
-    "@resvg/resvg-js-linux-x64-musl": "2.0.0-beta.0",
-    "@resvg/resvg-js-linux-arm64-gnu": "2.0.0-beta.0",
-    "@resvg/resvg-js-win32-ia32-msvc": "2.0.0-beta.0",
-    "@resvg/resvg-js-linux-arm-gnueabihf": "2.0.0-beta.0",
-    "@resvg/resvg-js-darwin-arm64": "2.0.0-beta.0",
-    "@resvg/resvg-js-android-arm64": "2.0.0-beta.0",
-    "@resvg/resvg-js-android-arm-eabi": "2.0.0-beta.0",
-    "@resvg/resvg-js-linux-arm64-musl": "2.0.0-beta.0",
-    "@resvg/resvg-js-win32-arm64-msvc": "2.0.0-beta.0"
+    "@resvg/resvg-js-win32-x64-msvc": "2.0.0",
+    "@resvg/resvg-js-darwin-x64": "2.0.0",
+    "@resvg/resvg-js-linux-x64-gnu": "2.0.0",
+    "@resvg/resvg-js-linux-x64-musl": "2.0.0",
+    "@resvg/resvg-js-linux-arm64-gnu": "2.0.0",
+    "@resvg/resvg-js-win32-ia32-msvc": "2.0.0",
+    "@resvg/resvg-js-linux-arm-gnueabihf": "2.0.0",
+    "@resvg/resvg-js-darwin-arm64": "2.0.0",
+    "@resvg/resvg-js-android-arm64": "2.0.0",
+    "@resvg/resvg-js-android-arm-eabi": "2.0.0",
+    "@resvg/resvg-js-linux-arm64-musl": "2.0.0",
+    "@resvg/resvg-js-win32-arm64-msvc": "2.0.0"
   }
 }

README.md

 # resvg-js
 
 <a href="https://github.com/yisibl/resvg-js/actions"><img alt="GitHub CI Status" src="https://github.com/yisibl/resvg-js/workflows/CI/badge.svg?branch=main"></a>
-<a href="https://www.npmjs.com/package/@resvg/resvg-js"><img src="https://img.shields.io/npm/v/@resvg/resvg-js.svg?sanitize=true" alt="npm version"></a>
+<a href="https://www.npmjs.com/package/@resvg/resvg-js"><img src="https://img.shields.io/npm/v/@resvg/resvg-js.svg?sanitize=true" alt="@resvg/resvg-js npm version"></a>
+<a href="https://npmcharts.com/compare/@resvg/resvg-js?minimal=true"><img src="https://img.shields.io/npm/dm/@resvg/resvg-js.svg?sanitize=true" alt="@resvg/resvg-js downloads"></a>
 
-> resvg-js is a high-performance SVG renderer, powered by Rust based [resvg](https://github.com/RazrFalcon/resvg/) and [napi-rs](https://github.com/napi-rs/napi-rs).
+> resvg-js is a high-performance SVG renderer and toolkit, powered by Rust based [resvg](https://github.com/RazrFalcon/resvg/) and [napi-rs](https://github.com/napi-rs/napi-rs).
 
-- Fast, safe and zero dependencies!
+## Features
+
+- Fast, safe and zero dependencies.
+- Convert SVG to PNG, includes cropping, scaling and setting the background color.
+- Support system fonts and custom fonts in SVG text.
+- `v2`: Gets the width and height of the SVG and the generated PNG.
+- `v2`: Support for outputting simplified SVG strings, such as converting shapes(rect, circle, etc) to `<path>`.
+- `v2`: Support WebAssembly.
 - No need for node-gyp and postinstall, the `.node` file has been compiled for you.
 - Cross-platform support, including [Apple M1](https://www.apple.com/newsroom/2020/11/apple-unleashes-m1/).
-- Support system fonts and custom fonts in SVG text.
-- Support WebAssembly.
 
 ## Installation
 
+### Node.js
+
 ```shell
 npm i @resvg/resvg-js
-cnpm i @resvg/resvg-js
-pnpm i @resvg/resvg-js
 ```
 
+### Browser(Wasm)
+
+```html
+<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
+```
+
 ## [Example](example/index.js)
@@ -46,10 +58,7 @@
 const { join } = require('path')
-const { performance } = require('perf_hooks')
+const { Resvg } = require('@resvg/resvg-js')
 
-const { render } = require('@resvg/resvg-js')
-
 async function main() {
   const svg = await promises.readFile(join(__dirname, './text.svg'))
-  const t = performance.now()
-  const pngData = render(svg, {
+  const opts = {
     background: 'rgba(238, 235, 230, .9)',
@@ -65,7 +74,11 @@ fitTo: {
     },
-    logLevel: 'debug',
-  })
-  console.info('✨ Done in', performance.now() - t, 'ms')
+  }
+  const resvg = new Resvg(svg, opts)
+  const pngData = resvg.render()
+  const pngBuffer = pngData.asPng()
 
-  await promises.writeFile(join(__dirname, './text-out.png'), pngData)
+  console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
+  console.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`)
+
+  await promises.writeFile(join(__dirname, './text-out.png'), pngBuffer)
 }
@@ -78,26 +91,30 @@
 
-Although we support the use of WASM packages in Node.js, this is not recommended. The native addon performs better.
+Although we support the use of Wasm packages in Node.js, this is not recommended. The native addon performs better.
 
-#### Browser(ES Modules)
+#### Browser
 
-```js
-import { render, initWasm } from '@resvg/resvg-wasm'
-;(async function () {
-  // The wasm must be initialized first,
-  await initWasm(fetch('/your/path/index_bg.wasm'))
-  const opts = {
-    fitTo: {
-      mode: 'width', // If you need to change the size
-      value: 800,
-    },
-  }
+```html
+<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
+<script>
+  ;(async function () {
+    // The Wasm must be initialized first
+    await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm@2.0.0-beta.0/index_bg.wasm'))
+    const opts = {
+      fitTo: {
+        mode: 'width', // If you need to change the size
+        value: 800,
+      },
+    }
 
-  const svg = '<svg> ... </svg>' // input svg, String or Uint8Array
-  const png = render(svg, opts) // PNG data, Uint8Array
-  const svgUrl = URL.createObjectURL(new Blob([png], { type: 'image/png' }))
-  document.getElementById('output').src = svgUrl
-})()
+    const svg = '<svg> ... </svg>' // Input SVG, String or Uint8Array
+    const resvgJS = new resvg.Resvg(svg, opts)
+    const pngData = resvgJS.render(svg, opts) // Output PNG data, Uint8Array
+    const pngBuffer = pngData.asPng()
+    const svgURL = URL.createObjectURL(new Blob([pngData], { type: 'image/png' }))
+    document.getElementById('output').src = svgURL
+  })()
+</script>
 ```
 
-See [playground](playground/index.html).
+See [playground](playground/index.html), it is also possible to [call Wasm in Node.js](example/wasm-node.js), but there is a performance penalty and this is not recommended.
 
@@ -182,3 +199,3 @@ ## Benchmark
 - [x] Upgrade to napi-rs v2
-- [x] Support WebAssembly(.wasm)
+- [x] Support WebAssembly
 - [x] Output usvg-simplified SVG string
@@ -185,0 +202,0 @@ - [ ] Support for getting SVG Bounding box

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39004

increased by2.9%

Lines of code

123

increased by4.24%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

218

increased by8.46%

No dependency changes