Introducing the layer based SVG engine on Nikolas Zimmermann

Mon, 01 Jan 0001 00:00:00 +0000

Motivation

In 2005, when the SVG support from ksvg2 was integrated into WebKit, the state of the WebKit rendering engine was dramatically different. There was no support for transformations, only basic rectangular clipping, no masking, no filters, etc. since these features simply did not exist yet for HTML/CSS. All length information related to the CSS box model, such as position/size of a box, were represented as integers - which was obviously not enough for SVG.

Mon, 01 Jan 0001 00:00:00 +0000

Key concepts

↑ Table Of Contents

For those not familiar with WebKit this chapter introduces the DOM/Render/Layer Tree concepts and their applications in a short form. This is not aimed to be complete in any way, only the minimum is introduced to form a basis for further discussions.

Mon, 01 Jan 0001 00:00:00 +0000

HTML/CSS painting

↑ Table Of Contents

In the last sections the Render Tree and Layer Tree concepts were introduced and briefly discussed. It was illustrated how painting a document boils down to painting its root layer, which then propagates the paint request down the Layer Tree.

Mon, 01 Jan 0001 00:00:00 +0000

SVG painting

↑ Table Of Contents

SVG painting in WebKit is much simpler, as the Layer Tree is not used for SVG at all. SVG 1.1 had no means to change the painting-order – it’s identical to the document order. Therefore the layered painting approach was neglected for SVG in the early ksvg2 days. Remember at this point in time HTML/CSS did not even support transformations, filters, etc.

Mon, 01 Jan 0001 00:00:00 +0000

Legacy SVG engine

↑ Table Of Contents

Almost two decades since its introduction the legacy SVG engine shows its age. Today’s Web world is dominated by HTML/CSS. They are actively developed, have strong communities and vendor support. SVG should be a first-class citizen in the HTML/CSS world – no one should need to use animated CSS masks combined with ‘border-radius’ to simulate animated circles, just because animating SVGs itself is too expensive.

Mon, 01 Jan 0001 00:00:00 +0000

Layer-based SVG engine

↑ Table Of Contents

So what does it take to let SVG participate in the Layer Tree? Short answer: Many things.

First of all, the nodes marked in red in the class hierarchy diagram need to be reworked: RenderSVGModelObject needs to inherit from RenderLayerModelObject, in order to deal with RenderLayer. Furthermore every code path dealing with RenderLayer needs to be adapted to handle the first non-RenderBox derived renderer that makes use of layers: RenderSVGModelObject.

Mon, 01 Jan 0001 00:00:00 +0000

SVG PoC patch

↑ Table Of Contents

The bug report #90738 Harmonize HTML/SVG rendering - dating back to 2012 - contains the latest revision of a single patch that replaces the legacy SVG engine with the layer based SVG engine.

Mon, 01 Jan 0001 00:00:00 +0000

Conclusions

↑ Table Of Contents

I’ll keep the conclusions short: I hope that the design of the layer based SVG engine is now easier to follow for anyone and that we can agree that this is the right way to go. The introduction of the layer based SVG engine is the first step towards a modern SVG engine, not the final solution. There are many areas that need to be improved in WebKits SVG implementation: the whole SVG resources system, the inefficient SVG text rendering system (my fault), etc.. Hopefully the support of hardware accelerated compositing makes SVG attractive for Web developers seeking to produce fluent animations, beautiful UIs, etc.

Mon, 01 Jan 0001 00:00:00 +0000

- 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).