2.6.0

thx · Oct 20, 2023 · 04c9527 · 04c9527 · vercel · Oct 20, 2023
1 parent 065b7f4
commit 04c9527
Show file tree

Hide file tree

Showing 16 changed files with 78 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,34 @@ This changelog also contains important changes in dependencies.
 
 ## [Unreleased]
 
+## [2.6.0] - 2023-10-20
+
+Now resvg has been upgraded from v0.29.0 to v0.34.0, bringing with it a host of new SVG features and performance improvements 🚀.
+
+- Support SVG2 `mask-type` property.
+- Allows quadratic Bézier curves: text might render slightly differently (better?). This is because TrueType fonts contain only quadratic curves and we were converting them to cubic before.
+
+- Clipping and masking is up to 20% faster.
+- Reduces the peak memory usages for SVGs with large paths (in terms of the number of segments).
+- A new rendering algorithm.<br>
+  When rendering [isolated groups](https://razrfalcon.github.io/notes-on-svg-parsing/isolated-groups.html),
+  aka layers, we have to know the layer bounding box beforehand, which is ridiculously hard in SVG.<br>
+  Previously, resvg would simply use the canvas size for all the layers.
+  Meaning that to render a 10x10px layer on a 1000x1000px canvas, we would have to allocate and then blend
+  a 1000x1000px layer, which is just a waste of CPU cycles.<br>
+  The new rendering algorithm is able to calculate layer bounding boxes, which dramatically improves
+  performance when rendering a lot of tiny layers on a large canvas.<br>
+  Moreover, it makes performance more linear with a canvas size increase.<br>
+  The [paris-30k.svg](https://github.com/google/forma/blob/681e8bfd348caa61aab47437e7d857764c2ce522/assets/svgs/paris-30k.svg)
+  sample from [google/forma](https://github.com/google/forma) is rendered _115 times_ faster on M1 Pro now.
+  From ~33760ms down to ~290ms. 5269x3593px canvas.<br>
+  If we restrict the canvas to 1000x1000px, which would contain only the actual `paris-30k.svg` content,
+  then we're _13 times_ faster. From ~3252ms down to ~253ms.
+
+### Added
+
+- feat: upgrade to usvg/resvg 0.34.0. [#268](https://github.com/yisibl/resvg-js/pull/268) Thanks to @zimond
+
 ## [2.5.0] - 2023-10-16
 
 ### Added
@@ -20,7 +48,7 @@ In addition, we implemented smarter default font family fallback. the `defaultFo
 ```html
 <script src="https://unpkg.com/@resvg/resvg-wasm"></script>
 <script>
-  (async function () {
+  ;(async function () {
     await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))
 
     const font = await fetch('./fonts/Pacifico-Regular.woff2')
@@ -53,7 +81,7 @@ In addition, we implemented smarter default font family fallback. the `defaultFo
 
 We have improved the [upstream svgtypes#14](https://github.com/RazrFalcon/svgtypes/pull/14), allow parsing of float `rgb()/rgba()` values from CSS Color 4 draft like `rgb(3.14, 110, 201)`.
 
-  - fix(deps): update rust crate svgtypes to 0.12.0. Thanks to @yisibl [#266](https://github.com/yisibl/resvg-js/issues/266)
+- fix(deps): update rust crate svgtypes to 0.12.0. Thanks to @yisibl [#266](https://github.com/yisibl/resvg-js/issues/266)
 
 ### Changed
 
@@ -111,6 +139,7 @@ Eventually, we upgraded resvg for 2 successive versions, and are now at the late
 ## [2.3.1] - 2023-02-02
 
 - feat: upgrade wasm-bindgen to 0.2.84
+
 ## [2.3.0] - 2023-02-02
 
 - fix: update napi-rs(2.10.13) to resolve Electron 21+ create Buffer issues. [#195](https://github.com/yisibl/resvg-js/issues/195)
@@ -137,6 +166,7 @@ Eventually, we upgraded resvg for 2 successive versions, and are now at the late
   ```
 
   See the [Node.js documentation](https://nodejs.org/api/packages.html#package-entry-points) for details about why:
+
   > Existing packages introducing the "exports" field will prevent consumers of the package from using any entry points that are not defined,
 
 - fix(ci): use zig to cross-compile armv7. [#176](https://github.com/yisibl/resvg-js/issues/176)
@@ -149,15 +179,15 @@ Eventually, we upgraded resvg for 2 successive versions, and are now at the late
 
   Due to the GitHub Actions Ubuntu [upgrade from 20.04 to 22.04](https://github.com/actions/runner-images/issues/5490), the glibc version became 2.35. To maintain our compatibility, zig cross-compilation is now enabled to support older versions of glibc systems.
 
-  | Distribution | Glibc | GCC |
-  | --- | --- | --- |
-  | CentOS 7 | 2.17 | 4.8.5 |
-  | Ubuntu 16.04 | 2.23 | 5.4.0 |
-  | Ubuntu 18.04 | 2.27 | 7.5.0 |
-  | Ubuntu 20.04 | 2.31 | 9.4.0 |
-  | **Ubuntu 22.04** | 2.35 | 11.2.0 |
-  | Debian 10.12 | 2.28 | 8.3.0 |
-  | Debian 11.4 | 2.31 | 10.2.1 |
+  | Distribution     | Glibc | GCC    |
+  | ---------------- | ----- | ------ |
+  | CentOS 7         | 2.17  | 4.8.5  |
+  | Ubuntu 16.04     | 2.23  | 5.4.0  |
+  | Ubuntu 18.04     | 2.27  | 7.5.0  |
+  | Ubuntu 20.04     | 2.31  | 9.4.0  |
+  | **Ubuntu 22.04** | 2.35  | 11.2.0 |
+  | Debian 10.12     | 2.28  | 8.3.0  |
+  | Debian 11.4      | 2.31  | 10.2.1 |
 
 - doc: add Node.js 18 to 'Support matrix'. [#155](https://github.com/yisibl/resvg-js/issues/155)
 
@@ -576,7 +606,8 @@ The first official version, use [resvg 0.18.0](https://github.com/RazrFalcon/res
 - Support custom fonts and system fonts.
 - Supports setting the background color of PNG.
 
-[unreleased]: https://github.com/yisibl/resvg-js/compare/v2.5.0...HEAD
+[unreleased]: https://github.com/yisibl/resvg-js/compare/v2.6.0...HEAD
+[2.6.0]: https://github.com/yisibl/resvg-js/compare/v2.5.0...v2.6.0
 [2.5.0]: https://github.com/yisibl/resvg-js/compare/v2.4.1...v2.5.0
 [2.4.1]: https://github.com/yisibl/resvg-js/compare/v2.4.0...v2.4.1
 [2.4.0]: https://github.com/yisibl/resvg-js/compare/v2.3.1...v2.4.0

diff --git a/README.md b/README.md
@@ -78,9 +78,9 @@ Output PNG Size  : 1200 x 623
 ✨ Done in 66 ms
 ```
 
-| SVG                                                                                                                                                                                        | PNG                                                                                                                                                                                            |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <img width="500" src="example/text.svg">                                                                                                                                                   | <img width="500" src="example/text-out.png">                                                                                                                                                   |
+| SVG                                      | PNG                                          |
+| ---------------------------------------- | -------------------------------------------- |
+| <img width="500" src="example/text.svg"> | <img width="500" src="example/text-out.png"> |
 
 ## Usage
 
@@ -122,9 +122,9 @@ main()
 
 Starting 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.
 
-  ```shell
-  bun example/index.js
-  ```
+```shell
+bun example/index.js
+```
 
 ### Deno
 
@@ -168,7 +168,7 @@ This package also ships a pure WebAssembly artifact built with `wasm-bindgen` to
 ```html
 <script src="https://unpkg.com/@resvg/resvg-wasm"></script>
 <script>
-  (async function () {
+  ;(async function () {
     // The Wasm must be initialized first
     await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))
 
@@ -224,20 +224,20 @@ Running "resize width" suite...
 
 ## Support matrix
 
-|                  | Node.js 12 | Node.js 14 | Node.js 16 | Node.js 18 | npm |
-| ---------------- | ---------- | ---------- | ---------- | ---------- | --- |
-| 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) |
-| 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) |
-| 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) |
-| 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) |
-| macOS arm64(M1)  | ✓          | ✓          | ✓          |  ✓         |[![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) |
-| 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) |
-| 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) |
-| 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) |
-| 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) |
-| 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) |
-| 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) |
-| 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) |
+|                  | Node.js 12 | Node.js 14 | Node.js 16 | Node.js 18 | npm                                                                                                                                                                     |
+| ---------------- | ---------- | ---------- | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 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)           |
+| 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)         |
+| 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)       |
+| 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)                   |
+| macOS arm64(M1)  | ✓          | ✓          | ✓          | ✓          | [![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)               |
+| 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)             |
+| 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)           |
+| 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) |
+| 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)         |
+| 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)       |
+| 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)             |
+| 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)       |
 
 ## Test or Contributing
 

diff --git a/npm/android-arm-eabi/package.json b/npm/android-arm-eabi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-android-arm-eabi",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "android"
   ],

diff --git a/npm/android-arm64/package.json b/npm/android-arm64/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-android-arm64",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "android"
   ],

diff --git a/npm/darwin-arm64/package.json b/npm/darwin-arm64/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-darwin-arm64",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "darwin"
   ],

diff --git a/npm/darwin-x64/package.json b/npm/darwin-x64/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-darwin-x64",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "darwin"
   ],

diff --git a/npm/linux-arm-gnueabihf/package.json b/npm/linux-arm-gnueabihf/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-linux-arm-gnueabihf",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "linux"
   ],

diff --git a/npm/linux-arm64-gnu/package.json b/npm/linux-arm64-gnu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-linux-arm64-gnu",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "linux"
   ],

diff --git a/npm/linux-arm64-musl/package.json b/npm/linux-arm64-musl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-linux-arm64-musl",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "linux"
   ],

diff --git a/npm/linux-x64-gnu/package.json b/npm/linux-x64-gnu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-linux-x64-gnu",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "linux"
   ],

diff --git a/npm/linux-x64-musl/package.json b/npm/linux-x64-musl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-linux-x64-musl",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "linux"
   ],

diff --git a/npm/win32-arm64-msvc/package.json b/npm/win32-arm64-msvc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-win32-arm64-msvc",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "win32"
   ],

diff --git a/npm/win32-ia32-msvc/package.json b/npm/win32-ia32-msvc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-win32-ia32-msvc",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "win32"
   ],

diff --git a/npm/win32-x64-msvc/package.json b/npm/win32-x64-msvc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js-win32-x64-msvc",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "os": [
     "win32"
   ],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-js",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs",
   "main": "index.js",
   "repository": "[email protected]:yisibl/resvg-js.git",

diff --git a/wasm/package.json b/wasm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@resvg/resvg-wasm",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs",
   "main": "index.js",
   "module": "index.mjs",