- Technical design document -

In this document an improved SVG rendering approach is presented that unifies the HTML/CSS and SVG rendering pipelines that were traditionally separated in WebKit (see here for background information).

The layer based SVG engine finally unlocks hardware acceleration for SVG, allowing for e.g. cheap transform animations, that lead to fluent animations, hopefully boosting the use of SVG across the Web.

I’m happy to reveal today the two companies that made this work possible:

Vorwerk - the inventors of the well-known Thermomix® - uses WPE WebKit to deliver a high-quality user experience to their customers. Vorwerk relies on Web technology to create beautiful, fluent, easy-to-use user interfaces and pushes WebKit to its boundaries on embedded devices. A WebKit version that unlocks hardware-acceleration for SVG is a game-changer, allowing to use SVG across the whole user-interface. In the past animating SVGs was found out too be extensive, leading to an unfortunate situation for the frontend designers, that would love to use SVG but have to fallback to custom HTML/CSS solutions, because of performance issues with SVG.

Instead of accepting the status quo, Vorwerk decided to fix the issue at the root, by contracting Igalia to improve the SVG engine in WebKit, to allow hardware-accelerated animations for SVG content. The work on the new layer based SVG engine started in late 2019, with a long phase of prototyping and performance testing. This fruitful partnership lead to a full redesign of the SVG engine in WebKit, aiming to greatly improve the interoperability between HTML/CSS and SVG and taking SVG rendering performance to the next level.

This document shall serve as a guideline how the layer based SVG engine works and how it differs from the current SVG engine. Enjoy!