Lazy async SVG rasterisation

Using createImageBitmap for threaded SVG rendering.


This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog

Phwoar I love a good sciency-sounding title.

SVG can be slow

When transforming an SVG image, browsers try to render on every frame to keep the image as sharp as possible. Unfortunately SVG rendering can be slow, especially for non-trivial images.

Here's a demo, press "Scale SVG".

Devtools timeline for SVG animation

Sure, this is a pretty complex SVG, but we're 10x over our frame budget on some frames, and as a result the animation looks awful. And this is on a powerful MacBook.

Things are less bad with a simpler SVG. Here's an example with the Firefox logo, but it's still pretty janky.

However, a new API gives us more control:

Rasterising SVG lazily

createImageBitmap(imgElement).then((imageBitmap) => {
  // …
});

createImageBitmap can rasterise many different image into bitmap data, which can be drawn onto a canvas element. However, in Chrome 61+, with chrome://flags/#enable-experimental-canvas-features enabled, it can take an HTML image element for an SVG image, and rasterise it asynchronously, off the main thread, so it doesn't disrupt animations.

You can also render part of the SVG, and output it at a particular size:

createImageBitmap(
  imgElement,
  sourceCropX, sourceCropY,
  sourceCropWidth, sourceCropHeight,
  {resizeWidth, resizeHeight}
).then(imageBitmap => …);

The allows me to perform a really cheap bitmap zoom of the SVG using a canvas, while rendering a cropped-but-sharp version in parallel. Once the sharp version is ready, I can include it in the animation.

Here's a demo, press "Scale canvas". Requires Chrome 61+ with chrome://flags/#enable-experimental-canvas-features enabled.

Devtools timeline for canvas animation

This method is much friendlier to the CPU, and the animation is fluid:

SVG animation vs SVG-in-canvas

For the complex car SVG, the sharp image appears towards the end of the image. With the Firefox logo, the sharp version appears much earlier because it take less time to render.

Here's the code for the demo.

Chunking up rasterisation

As you can see from the timeline above, Chrome still skips a frame as it uploads the sharper texture to the GPU. This could be solved by chunking the work into smaller tiles, so the GPU-upload doesn't blow the frame budget.

OpenSeadragon is designed to dynamically load image tiles to create a zoomable image. It's very much geared towards getting bitmap data from the network, but with a bit of hacking…

Zoomable lazy-rendered tiled SVG. Requires Chrome 61+ with chrome://flags/#enable-experimental-canvas-features enabled.

Yeah, it's a little rough around the edges. Like I said, it's a hack. But I'm really excited that this level of control over SVG painting is coming to the web.


This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog


Print Share Comment Cite Upload Translate Updates
APA

Jake Archibald's blog | Sciencx (2017-09-08T09:57:21+00:00) Lazy async SVG rasterisation. Retrieved from https://www.scien.cx/2017/09/08/lazy-async-svg-rasterisation/

MLA
" » Lazy async SVG rasterisation." Jake Archibald's blog | Sciencx - Friday September 8, 2017, https://www.scien.cx/2017/09/08/lazy-async-svg-rasterisation/
HARVARD
Jake Archibald's blog | Sciencx Friday September 8, 2017 » Lazy async SVG rasterisation., viewed ,<https://www.scien.cx/2017/09/08/lazy-async-svg-rasterisation/>
VANCOUVER
Jake Archibald's blog | Sciencx - » Lazy async SVG rasterisation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2017/09/08/lazy-async-svg-rasterisation/
CHICAGO
" » Lazy async SVG rasterisation." Jake Archibald's blog | Sciencx - Accessed . https://www.scien.cx/2017/09/08/lazy-async-svg-rasterisation/
IEEE
" » Lazy async SVG rasterisation." Jake Archibald's blog | Sciencx [Online]. Available: https://www.scien.cx/2017/09/08/lazy-async-svg-rasterisation/. [Accessed: ]
rf:citation
» Lazy async SVG rasterisation | Jake Archibald's blog | Sciencx | https://www.scien.cx/2017/09/08/lazy-async-svg-rasterisation/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts