Release v2.6.0 · thx/resvg-js

What's Changed

🚀 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 usage 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.
This means 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 actual paris-30k.svg content,
then we're 13 times faster. From ~3252ms down to ~253ms.

Full Changelog: v2.5.0...v2.6.0