https://blogs.igalia.com/nzimmermann/ Recent content on Nikos blog Hugo -- gohugo.io en-us Fri, 29 Oct 2021 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-13-svg-performance/ Wed, 13 Oct 2021 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-13-svg-performance/ Yikes, it’s been more than a year since my last post. https://blogs.igalia.com/nzimmermann/posts/2019-12-12-3d-transformations/ Thu, 12 Dec 2019 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2019-12-12-3d-transformations/ As mentioned in my first article, I have a long relationship with the WebKit project, and its SVG implementation. https://blogs.igalia.com/nzimmermann/posts/2019-11-24-back-in-town/ Sun, 24 Nov 2019 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2019-11-24-back-in-town/ Welcome to my blog! Finally I’m back after my long detour to physics :-) https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-1/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-1/ #motivation:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } Motivation ↑ Table Of Contents In 2005, when the SVG support from ksvg2 was integrated into WebKit, the state of the WebKit rendering engine was dramatically different. https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-2/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-2/ #key-concepts:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } 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. https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-3/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-3/ #html-css-painting:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } HTML/CSS painting ↑ Table Of Contents In the last sections the Render Tree and Layer Tree concepts were introduced and briefly discussed. https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-4/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-4/ #svg-painting:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } SVG painting ↑ Table Of Contents SVG painting in WebKit is much simpler, as the Layer Tree is not used for SVG at all. https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-5/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-5/ #legacy-engine-intro:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } Legacy SVG engine ↑ Table Of Contents Almost two decades since its introduction the legacy SVG engine shows its age. https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-6/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-6/ #lbse-intro:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } Layer-based SVG engine ↑ Table Of Contents So what does it take to let SVG participate in the Layer Tree? https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-7/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-7/ #svg-poc-patch:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } 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. https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-8/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-chapter-8/ #conclusions:before { content: ''; display: block; height: 110px; } .h6-line-height { line-height: 36px; } 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. https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-introduction/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/design-document-introduction/ - 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). https://blogs.igalia.com/nzimmermann/author/nikolas-zimmermann/ Mon, 01 Jan 0001 00:00:00 +0000 https://blogs.igalia.com/nzimmermann/author/nikolas-zimmermann/ Long-term WebKit hacker with 20+ years of experience.