Performance issue with loadImage when processing SVGs

[Vandomas]

I am using skia-canvas to generate images on the backend of my server.

My workflow is as follows:

1. I generate an SVG.
2. I optimize it using svgo.
3. I load the optimized SVG into skia-canvas using the loadImage function, passing a DATA URI.

The process of loading the image (loadImage) takes anywhere from 70ms to 200ms. This is significantly slower than the rest of my workflow, which typically completes in less than 5ms. In most cases, loadImage takes over 150ms, which is a bottleneck for my application.

Caching the images is not an option since each image is unique and dynamically generated.

I would like to know:

Are there any ways to speed up the loadImage process?
Would converting the SVG to PNG before loading be faster? If so, are there libraries or approaches you can recommend for efficiently converting SVG to raster images in this context?

Any guidance or suggestions for improving the performance of this step would be greatly appreciated. Thank you!

[samizdatco]

It appears that most of that time is spent initializing the font manager. Rust Skia 0.80 added a new ability to define custom Resource Providers which might make it possible to speed this up. I'll look into it…

[samizdatco]

Version 2.0.1 changes the way the font manager used by SVGs works and should cut down significantly on loadImage time when dealing with SVG data—though SVGs will never be as fast as bitmaps given the amount of computation involved in parsing XML and rasterizing vector graphics.

On my M1 mac with 467 fonts installed, calling loadImage on the same SVG 5 times in a row got about 10× times faster for the initial call:

for (let i=0; i<5; i++){
  console.time("loadImage(SVG)")
  let svg = await loadImage('test.svg')
  console.timeEnd("loadImage(SVG)")
}

iteration	v2.0.0	v2.0.1
1	697.244ms	76.464ms
2	140.992ms	0.889ms
3	137.471ms	0.615ms
4	141.675ms	0.624ms
5	144.319ms	0.646ms