All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
This changelog also contains important changes in dependencies.
2.6.2 - 2024-03-26
- fix:
Uncaught LinkError WebAssembly.instantiate()
#322
2.6.1 - 2024-03-25
- chore(deps): update yarn to v3.8.1
- chore(deps): update actions/cache action to v4
2.6.1-beta.0 - 2024-03-11
This version solves the problem of missing DLLs caused by not installing Visual C++ Redistributable on Windows.
- chore(deps): upgrade dependencies such as napi-rs #311
- chore(ci): adding Node.js v20 to the CI
- chore(ci): use macOS M1 machines
- doc: clarify that the default value of the defaultFontFamily is empty
- doc: improved change log documentation for M/L/C error
- test: add a bbox test with stroke
- fix(deps): update rust crate svgtypes to 0.14.0
- fix: enable static link for windows-msvc #308 Thanks to @Zagrios
- fix: test bindings on x86_64-unknown-linux-musl #306 Thanks to @Brooooooklyn
2.6.0 - 2023-10-20
🚀 Up to 115x faster for very large SVG files
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.
When rendering isolated groups, aka layers, we have to know the layer bounding box beforehand, which is ridiculously hard in SVG.
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.
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.
Moreover, it makes performance more linear with a canvas size increase.
The paris-30k.svg sample from google/forma is rendered 115 times faster on M1 Pro now. From ~33760ms down to ~290ms. 5269x3593px canvas.
If we restrict the canvas to 1000x1000px, which would contain only the actualparis-30k.svg
content, then we're 13 times faster. From ~3252ms down to ~253ms.
- feat: upgrade to usvg/resvg 0.34.0. #268 Thanks to @zimond
2.5.0 - 2023-10-16
Now we can finally loading custom fonts in Wasm, including the WOFF2 format (see playground), thanks to the high-performance woff2-rs
.
In addition, we implemented smarter default font family fallback. the defaultFontFamily
option can now be omitted. We'll read the font-family from the incoming fonts and set it to the default.
<script src="https://unpkg.com/@resvg/resvg-wasm"></script>
<script>
;(async function () {
await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))
const font = await fetch('./fonts/Pacifico-Regular.woff2')
if (!font.ok) return
const fontData = await font.arrayBuffer()
const buffer = new Uint8Array(fontData)
const opts = {
font: {
fontBuffers: [buffer], // New in 2.5.0, loading custom fonts.
// defaultFontFamily: 'Pacifico', // You can omit this.
},
}
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>
- feat: improve custom loaded fonts. Thanks to @yisibl #209
- feat: support for loading custom fonts in Wasm, via the
fontBuffers
option. Thanks to @antmelnyk #217 - feat: support loading WOFF2 font in Wasm. Thanks to @yisibl #220
- chore: Wasm uses the same logic as Node.js to find the default font family.Thanks to @yisibl #252
We have improved the upstream svgtypes#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
- test: fix test image timeout. #262
2.4.1 - 2023-02-15
-
fix: the
defaultFontFamily
not working. #208 Thanks to @yisiblStarting with resvg 0.28.0, the logic for font loading has changed, which causes the family passed in the defaultFontFamily option to not be applied.
2.4.0 - 2023-02-09
This is a brand new version with 2-3x faster performance. It also resolves an issue with a specific SVG causing an error, and all users are advised to upgrade to this version.
resvg-js(Rust):
39.6 ops/s, ±1.72% | fastest
sharp:
10.9 ops/s, ±31.43% | 72.47% slower
svg2img(canvg + node-canvas):
10.8 ops/s, ±28.52% | slowest, 72.73% slower
The upgrade will be hard due to the big changes made to upstream resvg. resvg 0.28.0 started with the removal of the ability to output SVG string, and we had to backport that functionality to a new crate: usvg-writer
.
Eventually, we upgraded resvg for 2 successive versions, and are now at the latest 0.29.0.
- feat: upgrade resvg/usvg to 0.28.0. #194 Thanks to @zimond
- feat: upgrade resvg/usvg to 0.29.0. #199 Thanks to @zimond
- chore: upgrade rust-toolchain to nightly-2023-02-01. #199 Thanks to @yisibl
- chore: remove bench-related dependencies. #200 Thanks to @yisibl
-
fix: 'the previous segment must be M/L/C' error. #204 Thanks to @yisibl
This is a normal error thrown by resvg when parsing Path Command and has been confirmed as fixed in resvg 0.30.0(see commit).
Add a test to ensure it is now fixed.
thread 'main' panicked at 'the previous segment must be M/L/C', usvg/src/pathdata.rs:219:17 note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace fatal runtime error: failed to initiate panic, error 5
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
Electron 21 and later will have the V8 Memory Cage enabled, with implications for some native modules. https://www.electronjs.org/blog/v8-memory-cage
This means that all napi-rs-based native modules will be affected. Usually there is an error like this:
UnhandledPromiseRejectionWarning: Error: Failed to create napi buffer
Good thing napi-rs has implemented a compatible approach in the new version, thanks to @Brooooooklyn's work.
-
feat: add wasm file to exports. Thanks to @hadeeb #186
This solves the problem that direct
require.resolve("@resvg/resvg-wasm/index_bg.wasm")
in tools like vite or webpack would report an error.Module not found: Package path ./index_bg.wasm is not exported from package /playground/node_modules/@resvg/resvg-wasm (see exports field in /playground/node_modules/@resvg/resvg-wasm/package.json)
See the Node.js documentation 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
This solves the problem of CI errors:
Error: /lib/arm-linux-gnueabihf/libm.so.6: version `GLIBC_2.35' not found (required by /build/resvgjs.linux-arm-gnueabihf.node)
Due to the GitHub Actions Ubuntu upgrade from 20.04 to 22.04, 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 -
doc: add Node.js 18 to 'Support matrix'. #155
2.2.0 - 2022-11-18
Now resvg-js can be run natively (not Wasm) directly in Deno, this allows to get close to the performance of Node.js native addons in Deno.
deno run --unstable --allow-read --allow-write --allow-ffi example/index-deno.js
See Deno Example
import * as path from 'https://deno.land/std@0.159.0/path/mod.ts'
import { Resvg } from 'npm:@resvg/resvg-js'
const __dirname = path.dirname(path.fromFileUrl(import.meta.url))
const svg = await Deno.readFile(path.join(__dirname, './text.svg'))
const resvg = new Resvg(svg, opts)
const pngData = resvg.render()
const pngBuffer = pngData.asPng()
await Deno.writeFile(path.join(__dirname, './text-out-deno.png'), pngBuffer)
In addition, resvg-js can return the raw pixels data of the PNG, which can be very convenient for scenes where only pixels need to be processed.
- feat: add
.pixels()
API for returning PNG pixels data (#123). - chore: upgrade to resvg v0.25.0 (by @zimond in #156).
- Partial
paint-order
attribute support. Markers can only be under or above the shape. - CSS3
writing-mode
variantsvertical-rl
andvertical-lr
. Thanks to @yisibl. - (tiny-skia) AArch64 Neon SIMD support. Up to 3x faster on Apple M1.
- Path bbox calculation scales stroke width too. Thanks to @growler.
- (tiny-skia) Round caps roundness. Fixes #155.
- Partial
- build: x86_64-linux-gnu and aarch64-linux-gnu are no longer compiled using Zig. (#165)
- doc: the
dpi
option is not the DPI in the PNG file. (#146) - chore: add deno example and docs. (#154)
- feat: upgrade napi-rs to 2.10.0 and Node.js v18. (#157)
- test: add image resolver API test case. (#164)
- feat: remove the
infer
crate, this reduced the size of the Wasm file by about 4.3%. (#165)- Before: 1360609 bytes
- After: 1302173 bytes
- feat: error code UnrecognizedBuffer changed to UnsupportedImage. (#165)
- fix: ignore
png
crate inrenovate.json
. (by @CGQAQ in #161)
2.1.0 - 2022-07-03
-
Add
imagesToResolve()
andresolveImage()
APIs to load image URL. By @zimond in #102- Supports PNG, JPEG and GIF formats.
- This only works for
xlink:href
starting withhttp://
orhttps://
. - See example for more details.
In order to support loading image URL, we forked the rust side of resvg and made some improvements.
Now please witness the magic moment:
-
Add
innerBBox()
API. By @yisibl in #105Calculate a maximum bounding box of all visible elements in this SVG. (Note: path bounding box are approx values).
-
Add
getBBox()
API. By @yisibl in #108We designed it to correspond to the
SVGGraphicsElement.getBBox()
method in the browser.This is different from the
innerBBox()
API, by default it does apply transform calculations and gets the BBox with curves exactly. This works well in most use cases, the only drawback is that it does not calculate BBoxes with stroke correctly. -
Add
cropByBBox()
API. By @yisibl in #108With this API, we can crop the generated bitmap based on the BBox(bounding box).
const fs = require('fs') const { Resvg } = require('@resvg/resvg-js') const svg = '' // some SVG string or file. const resvg = new Resvg(svg) const innerBBox = resvg.innerBBox() const bbox = resvg.getBBox() // Crop the bitmap according to bbox, // The argument to the `.cropByBBox()` method accepts `bbox` or `innerBBox`. if (bbox) resvg.cropByBBox(bbox) const pngData = resvg.render() const pngBuffer = pngData.asPng() console.info('SVG BBox: ', `${bbox.width} x ${bbox.height}`) fs.writeFileSync('out.png', pngBuffer)
-
feat: upgrade svgtypes to 0.8.1 to support 4 digits and 8 digits hex colors. By @yisibl in #127
- feat: return undefined if bbox is invalid. By @zimond in #110
- chore: use jimp-compact instead of jimp.
- fix(deps): update rust crate napi to 2.5.0.
- fix(deps): update rust crate mimalloc-rust to 0.2.
- chore: export AR in android pipeline.
- style: rust indent changed from 2 to 4 spaces.
2.0.1 - 2022-05-07
-
feat: add bbox related API. @zimond in #90
This version does not yet implement Node.js or Wasm bindings, so it is not available for now.
- fix: rebuild Wasm to solve the problem of not working in the browser.
2.0.0 - 2022-04-30
resvg-js now supports WebAssembly. 🎉
- You can convert SVG to PNG in the browser or Web Worker
- We provide Playground for direct use: https://resvg-js.vercel.app
With WebAssembly, resvg-js gains broader cross-platform compatibility, all by loading only about 1.2MB of Wasm files. And, the API is consistent with the Node.js side.
The current version of Wasm does not support loading fonts, so please submit an issue if you have a request.
- feat: support WebAssembly(wasm32 target) via wasm-bindgen (#51)
- feat: add WebAssembly playground
- feat: upgrade resvg to 0.21.0
- feat: upgrade to napi-rs 2.1.0 (#60)
- chore: improved error message when output PNG size is 0 (#58)
- doc: add Node.js and WebAssembly usage documentation (#63)
2.0.0-beta.0 - 2022-04-02
The resvg-js API is now largely stable.
-
feat:
render()
result as a new classrender()
now no longer returns theBuffer
directly, you need to get the buffer via the newrender().asPng()
, also addedrender().width
andrender().height
to return the size of the PNG.
2.0.0-alpha.6 - 2022-03-20
-
chore: add libc fields on linux platform packages
On Linux, it is not possible to tell exactly what kind of C library a native modules depends on just by os/cpu, so yarn 3.2 and cnpm added libc fields to further distinguish this case. This avoids downloading both
gnu
andmusl
packages at the same time.Currently only yarn 3.2+ and cnpm are supported, the npm implementation is still under discussion.
2.0.0-alpha.5 - 2022-03-19
-
feat: rounding width / height, this will further improve #61.
Physical pixels cannot be decimal, and when SVG dimensions have decimals in them, the output PNG dimensions are rounded. This should be consistent when getting the PNG size through the width / height API.
2.0.0-alpha.4 - 2022-03-14
- feat: strip text features and reduce the size of the generated wasm file.
- Before: 1949570 bytes
- After: 1266413 bytes
- feat: upgrade to napi-rs 2.2.0.
2.0.0-alpha.3 - 2022-03-01
- feat: add
.width
and.height
to get the original size of the SVG. - feat: add
toString()
to convert SVG shapes or text to path.
-
refactor: change to Class API, now instead use
new Resvg()
to create the constructor.With the new Class API, we can avoid rendering the SVG again when getting the SVG size. It also makes it easier to extend new APIs.
const { render } = require('@resvg/resvg-js')
const svg = '' // svg buffer or string
const pngData = render(svg, opts)
const { Resvg } = require('@resvg/resvg-js')
const svg = '' // svg buffer or string
const resvg = new Resvg(svg, opts)
const pngData = resvg.render()
// New!
console.info('Simplified svg string \n', resvg.toString())
console.info('SVG original size:', `${resvg.width} x ${resvg.height}px`)
2.0.0-alpha.2 - 2022-02-21
-
feat: upgrade resvg to 0.22.0
Support
svg
referenced by<use>
, this is often used in svg sprite.<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg"> <rect width="50%" height="50%" fill="green" /> </svg> <use id="use1" x="50%" y="50%" xlink:href="#svg1" /> </svg>
-
feat: upgrade fontdb to 0.9.0, loading system fonts will become faster.
There are many CJK fonts installed in my local OS, the test result is 2.5 times faster:
- Before:
Loaded 1085 font faces in 860.447ms.
- After:
Loaded 1085 font faces in 339.665ms.
- Before:
2.0.0-alpha.1 - 2022-02-17
-
feat: playground uses unpkg.com's online resources
<script src="https://unpkg.com/@resvg/resvg-wasm@2.0.0-alpha.2/index.min.js"></script>
-
feat: preload wasm in the playground
<link rel="preload" as="fetch" type="application/wasm" href="https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm" />
-
chore: upload wasm file to artifacts Switching from local to building in CI (Linux-x64-gnu) for
.wasm
files can reduce the file size a bit.- Local, Mac-x64-darwin: 1969225 bytes
- CI, Linux-x64-gnu: 1949570 bytes
After gzip compression, the
.wasm
file is only about 700kB.
2.0.0-alpha.0 - 2022-02-15
resvg-js now supports WebAssembly 🎉 What can I do now?
- You can convert SVG to PNG in the browser or Web Worker
- We provide Playground for direct use: https://resvg-js.vercel.app
With WebAssembly, resvg-js gains broader cross-platform compatibility, all by loading only about 2MB of Wasm files. And, the API is consistent with the Node.js side.
The current version of Wasm does not support loading fonts, so please submit an issue if you have a request.
- feat: support WebAssembly(wasm32 target) via wasm-bindgen (#51)
- feat: add WebAssembly playground
- feat: upgrade resvg to 0.21.0
- feat: upgrade to napi-rs 2.1.0 (#60)
- chore: improved error message when output PNG size is 0 (#58)
- doc: add Node.js and WebAssembly usage documentation (#63)
1.4.0 - 2022-01-24
feat: support for glibc 2.12(via zig-cc) (#50)
- fix: handle lld not found (#46)
- fix: js-binding for android-arm64 and android-arm-eabi (#53)
1.3.0 - 2022-01-01
- feat: upgrade to resvg 0.20.0(tiny-skia to 0.6.2).
- chore: add oslllo-svg2 to the examples and bench.
1.2.0 - 2021-12-25
- feat: upgrading to napi-rs v2.
- feat: support Android armv7(@resvg/resvg-js-android-arm-eabi).
- fix: default_font_family changed from Times New Roman to Arial. This is closer to the default rendering font in the browser.
1.1.0 - 2021-11-11
-
feat: implement
renderAsync()
function. By @BrooooooklynWe have made a major upgrade to napi-rs, from v1 to 2.x alpha. This allows better support for asynchronous binding and automatic generation of TypeScript definitions. Now you can enjoy
async/await
.const { renderAsync } = require('@resvg/resvg-js') async function main() { const pngData = await renderAsync(/* SVG string or buffer */) }
-
feat: The input to the
render()
andrenderAsync()
functions supports buffer. -
feat: improved webpack support, no more need
@node-rs/helper
dependency.The
@node-rs/helper
is convenient to load native binary cross platform and cpu arch. But it's not friendly towebpack
,vercel/nft
andvercel/ncc
because the logic is too dynamic. -
feat: add
example/compare.js
.
- fix: the default font no longer throws an error if it is not found, it changes to a warning.
- chore: benchmark adds tests for svg icons and other improvements.
- chore: upgrade Rust Edition to 2021.
1.0.4 - 2021-10-19
-
feat:
background
option supports alpha channel, currently only supports CSS Colors 3.CSS color parse depends on svgtypes.
render(svgString, {
// Support
background: 'rgba(77, 25, 230, .8)',
background: 'rgb(77, 25, 230, .8)',
background: 'rgba(77%, 25%, 230%, .8)',
background: 'hsla(255, 80%, 50%, .8)',
background: 'hsl(255, 80%, 50%, .8)',
// Not support
background: 'rgb(77 25 230 / 80%)',
background: 'rgb(77 25 230 / .8)',
background: 'hsl(255deg 80% 50% / 80%)',
})
1.0.3 - 2021-10-15
- feat: update typescript types definition. @axelhzf
- feat: add
logLevel
option, the font loading log is no longer output by default. @axelhzf
- chore: provides a better error prompt when the options type is wrong
- fix: loaded font faces time changed from milliseconds to ms
- fix: remove the
path
option because we never implemented it
1.0.2 - 2021-10-13
- docs: add npm packages doc and npm badges for each platform
- chore: ci add ignored files and directories
1.0.1 - 2021-10-11
npm has malfunctioned, which caused this version to fail to install.
See also: https://status.npmjs.org/incidents/wy4002vc8ryc
- chore: remove FreeBSD support #5
- feat: update resvg to 0.19.0
- chore: remove lint and dependent robot
- remove png crate
1.0.0 - 2021-10-09
The first official version, use resvg 0.18.0. Mainly have the following functions:
- Render SVG and convert to PNG.
- Support to set PNG size according to width and height.
- Support custom fonts and system fonts.
- Supports setting the background color of PNG.