Canvg.render() with images and without requestAnimationFrame - performance improvement
Would you like to work on this feature?
- [X] Check this if you would like to implement a PR, we are more than happy to help you go through the process.
What problem are you trying to solve?
When rendering many SVGs into custom canvas implementations, the throughput is currently limited to 30 SVGs per second. This is due to the fact that each render call waits for the next frame with requestAnimationFrame. I know I can pass enableRedraw: false, but images and fonts are not loaded then. Images are usually loaded way faster than a single frame, especially data URLs or if the images are already in the browser cache.
Describe the solution you'd like
Change Canvg.render() so it doesn't call requestAnimationFrame. Instead, it waits for the images and fonts to be loaded, and then renders a single frame.
Describe alternatives you've considered
An alternative solution could be to add a renderOnce() method to canvg with above behavior and leave render() untouched. This would be fully backwards compatible. I'm not sure if render is meant to be called once per frame or if its original intention was to be called only once.
Documentation, Adoption, Migration Strategy
Depending on the solution, the feature would be fully backwards compatible and easy to document. If we decide to do the first suggestion, this is a small incompatible behavioral change.
This issue is a bit related to #405 and maybe #1678.
I have already prepared an implementation and I will create a PR when we decide on a solution API-wise.