Igalia更新WebKit SVG引擎：减少层开销

背景

Igalia 团队在 WebKit 中开发的基于层的 SVG 渲染引擎（Layer Based SVG Engine，简称 LBSE）最早于 2021 年秋季公开了技术设计文档。此后三年多时间里，LBSE 经历了多次开发与停滞的循环。该引擎已成功落地 WebKit，功能完善，但至今仍未成为默认渲染方式——用户需要在 MiniBrowser 中手动切换运行时开关才能启用。从 2021 年秋到 2022 年末，LBSE 在上游（WebKit 主线）以补丁形式逐步搭建，完成了路径、形状、文本、多边形等 SVG 基本构建块的支持。随后因资金问题停摆数月，直到 2023 年中获得 Wix 的支持，工作才得以恢复，并持续至 2024 年 4 月。在此期间，裁剪、遮罩、滤镜、非纯色绘制服务器（图案、渐变）、标记等高级绘制功能全部实现，并且与 HTML/CSS 共享逻辑，而非像旧版 SVG 引擎那样走独立代码路径。之后项目再次因缺乏持续资金而暂停。2026 年初，Igalia 做出一次性投资，启动新一轮 LBSE 开发，希望借此证明引擎的性能，并吸引合作伙伴共同推动在嵌入式设备上实现高性能、硬件加速的 SVG 渲染。

核心内容

LBSE 的设计目标与核心思路

LBSE 的终极目标并非简单的“让 SVG 更快”，而是让 SVG 不再作为 WebKit 渲染引擎中的“孤岛”。旧版 SVG 引擎（Legacy SVG Engine）是历史遗留产物：它拥有自己独立的绘制代码、变换处理、裁剪、遮罩逻辑，与 HTML/CSS 渲染引擎几乎不共享代码。因此，WebKit 多年来在 HTML/CSS 渲染引擎中积累的所有优化——GPU 加速的变换和动画、加速合成等——SVG 完全无法受益。LBSE 的本质就是将 SVG 接入同一套渲染机制，让 SVG 立即继承所有现有优化，并且未来改进也能自动生效，无需为 SVG 单独重做。

早期设计：捷径与代价

为了实现快速验证，LBSE 最初采取了简单粗暴的方法：为每一个 SVG 渲染器（renderer）都分配一个独立的 RenderLayer——无论是 <rect>、<path> 还是 <g>，每个元素都拥有自己的层。这样做的好处是：层树（layer tree）本身已经提供了子元素排序、变换应用、裁剪和合成能力，无需为 SVG 重新发明任何东西；同时，SVG 固有的绘制顺序（按 DOM 结构 1:1 对应）也能自动保证，而 z-index 支持仍可在需要时覆盖默认顺序。RenderSVGModelObject::requiresLayer() 总是返回 true，其余工作交给 WebCore 的层树机制处理。团队从一开始就清楚，这种设计开销太大，几乎不可能以这种形式发布，但它提供了一个快速验证“SVG 使用 HTML/CSS 同一套机制”可行性的途径，并允许团队重新实现所有 SVG 渲染树类，实现 HTML 与 SVG 之间的完全统一（例如，一个应用于 SVG 元素或 HTML 元素的 <clipPath> 不再走不同代码路径）。

正确性优先：修复与回归

2024 年暂停后，2026 年重新启动 LBSE 开发时，首要任务是确保引擎在经历长时间停滞后仍能正确工作。由于缺乏测试，LBSE 在暂停期间出现大量退化：文本渲染完全失效，多数测试基线过时，旧版 SVG 引擎获得的修复未被同步到 LBSE，导致许多新回归。Igalia 的工程师 Rob Buis 负责了大部分修复工作，包括崩溃问题（如 getBBox 在 <use> 元素上的崩溃、NaN 坐标路径的线帽问题、子元素变化的标记等）以及实际渲染错误（文本完全不渲染、文本透明度、非可逆 gradientTransform 的渐变、SVG 视图片段支持等）。春季重点修复了滤镜相关的问题：使无效滤镜行为与 HTML 一致（不再直接丢弃元素）、修复 feOffset 裁剪、滤镜缩放和卷积滤镜测试。但最重要的滤镜改动尚未落地——一旦条件层创建（即后续要介绍的改动）移除中间层，滤镜的坐标空间将不再与绘制代码假设的一致，导致大量滤镜内容位置错误。一个待合并的 PR 正在解决这个问题。

关键挑战：共享机制的双重门槛

LBSE 面临的核心挑战在于：共享机制虽然是通用的，但通用性并非免费。旧版 SVG 引擎经过二十年针对单一任务的精细调优，而 LBSE 必须精确地嵌入到共享的 HTML/CSS 渲染代码中，且不能对 HTML/CSS 造成任何性能回退。这是引擎中最热的代码路径，渲染着所有网页，因此不能随意在布局和绘制中注入 SVG 特殊处理。LBSE 所需要的任何东西，要么必须适配现有设计，要么必须让该设计对 HTML/CSS 也更好用。

此外，SVG 中某些在 HTML 中罕见的特性在 SVG 中无处不在，变换是最典型的例子。普通网页只有少数变换元素，而 SVG 中几乎每个元素都可能带有变换，深层嵌套变换是常态。共享代码原本是为 HTML 设计的，在 HTML 上表现完美，但面对 SVG 的大量变换，需要重新设计部分机制，并从头发明 HTML 从未需要的快速路径，同时确保不拖慢 HTML。

因此，LBSE 面临双重门槛：首先，它必须在常规日常渲染（非硬件加速场景）上与旧版引擎竞争，因为用户不会在静态图标突然变慢时切换引擎。只有跨过这道门槛，LBSE 继承的硬件加速和未来 HTML/CSS 引擎改进才真正算作胜利。

2026 年的关键进展：条件层创建

2026 年上半年的工作以一项最激进的改动收尾——条件层创建（conditional layer creation）。这是 LBSE 自诞生以来最具侵入性的变化。早期设计为每个 SVG 渲染器都分配一个 RenderLayer，虽然开发方便，但浪费巨大。条件层创建的目标是只在实际需要时才为 SVG 元素创建层（例如需要变换、裁剪、合成等），从而