ИИтог

Igalia ускорила SVG-движок WebKit LBSE, убрав лишние слои рендеринга

инфраструктураРедакция ИИтогHacker News🔥42Рейтинг ИИтог · значимость 52 · 47 баллов · 1/ч · 3 коммент.

Разработчики консалтинговой компании Igalia, одного из ключевых контрибьюторов движка WebKit, рассказали о ходе работы над LBSE (Layer Based SVG Engine), новым способом рендеринга SVG в WebKit. Идея зародилась в 2021 году: вместо отдельного, исторически сложившегося кода для отрисовки SVG (со своей логикой трансформаций, клипинга и масок) SVG-элементы должны использовать ту же архитектуру слоёв (RenderLayer), что и HTML/CSS. Это даёт SVG доступ ко всем оптимизациям HTML/CSS-движка «бесплатно»: аппаратное ускорение трансформаций и анимаций, ускоренный композитинг и всё, что появится в движке в будущем.

Проект развивался неравномерно. В 2021, 2022 годах в WebKit добавили поддержку базовых примитивов SVG (путей, фигур, текста, полигонов) в новой архитектуре. После паузы работа возобновилась в середине 2023 года на средства Wix и продолжалась до апреля 2024-го: реализовали продвинутую отрисовку, клипинг, маскирование, фильтры, градиенты и паттерны, маркеры, с общей с HTML/CSS логикой вместо отдельного кода легаси-движка. Затем финансирование снова закончилось, и проект встал.

В начале 2026 года Igalia сделала разовую инвестицию, чтобы дать LBSE шанс доказать себя, и команда взялась за главную нерешённую проблему, производительность. На старте проекта, чтобы быстро проверить саму идею, разработчики выбрали упрощение: каждый SVG-рендерер (путь, прямоугольник, группа) получал собственный RenderLayer. Это работало, но оказалось расточительным: на сцене с тысячами SVG-фигур образовывались тысячи слоёв, и каждый добавлял накладные расходы на каждый кадр, обновление позиций, порядка отрисовки, трансформаций, перерисовку.

Решением стало «условное создание слоёв» (conditional layer creation): слой теперь выделяется только тогда, когда элемент реально в нём нуждается. Первый шаг, обычные трансформированные «листовые» фигуры (path/rect с плоской 2D-трансформацией) больше не получают отдельный слой; элементы с клипингом слой пока сохраняют, отказ от него, задача на будущее. Выяснилось также, что убрать слой получается только у листовых элементов, а не у трансформированных контейнеров, это будет темой следующего поста серии. Чтобы подготовить почву для этого изменения, инженеры вынесли SVG-специфичные поля RenderLayer в отдельную структуру SVGData и перенесли кэш локальной трансформации с уровня слоя на сам рендерер.

Ключевой тест для замера прогресса, сабтест Suits из бенчмарка MotionMark: тысячи клипованных SVG-фигур, чьи трансформации анимируются на каждом кадре. Это первый из двух постов о первой половине 2026 года; второй разберёт, как убрать слои и у трансформированных контейнеров. LBSE уже работает в WebKit, но пока не включён по умолчанию, его нужно вручную активировать через runtime-настройку в MiniBrowser.

Ключевые факты

  • LBSE, экспериментальный SVG-движок WebKit, задуманный Igalia в 2021 году; переводит SVG на общую с HTML/CSS архитектуру слоёв (RenderLayer), чтобы получить аппаратное ускорение трансформаций и композитинга.
  • Проект дважды останавливался из-за нехватки финансирования: пауза в 2022, 2023 годах и снова после апреля 2024-го; в начале 2026 года Igalia сделала разовую инвестицию, чтобы возобновить работу.
  • Ранняя версия выдавала каждому SVG-элементу отдельный RenderLayer, на сценах с тысячами фигур это давало тысячи слоёв и заметные накладные расходы на каждый кадр.
  • Инженеры внедрили «условное создание слоёв»: собственный слой теперь получают только элементы с клипингом, а обычные трансформированные листовые фигуры (path/rect), нет.
  • Прогресс измеряют тестом Suits из бенчмарка MotionMark; LBSE уже работает в WebKit, но включается вручную через runtime-настройку в MiniBrowser, по умолчанию выключен.

Почему это важно

SVG в WebKit долго рендерился отдельным, исторически изолированным кодом, который не получал ускорений, годами добавлявшихся в основной движок HTML/CSS, аппаратное ускорение трансформаций, анимаций, композитинг. LBSE переводит SVG на ту же архитектуру слоёв (RenderLayer), что и HTML/CSS, и разом даёт SVG доступ ко всем этим оптимизациям вместо того, чтобы переизобретать их отдельно для SVG. Пост фиксирует важный технический прогресс: устранена одна из главных причин, почему ранняя версия LBSE была расточительной по памяти и производительности, раздача отдельного слоя каждому SVG-элементу.

Кому это важно

Разработчикам браузерных движков и авторам WebKit-based браузеров (Safari, GTK- и WPE-порты); особенно тем, кто строит интерфейсы на встраиваемых устройствах (embedded UI), где LBSE позиционируется как способ получить производительный, аппаратно ускоренный SVG. Также интересно разработчикам сложной SVG-графики и анимаций в вебе, от прогресса LBSE зависит, когда движок станет достаточно быстрым, чтобы включить его по умолчанию.

Как это применить

LBSE уже собран в WebKit, но выключен по умолчанию, попробовать его можно, вручную включив соответствующую runtime-настройку в MiniBrowser (тестовом браузере WebKit). Прогресс проекта измеряется тестом Suits из бенчмарка MotionMark, сценой с тысячами анимируемых и клипованных SVG-фигур; на нём же можно проверять поведение движка при новых изменениях. Igalia обещает второй пост о первой половине 2026 года, который разберёт, как избавиться от слоёв ещё и у трансформированных SVG-контейнеров, а не только у листовых элементов.

Можно ли доверять

Материал, технический отчёт от первого лица от инженера Igalia, компании, одного из основных контрибьюторов и со-мейнтейнеров движка WebKit, опубликован в официальном инженерном блоге компании. В тексте приведены конкретные технические детали и ссылки на патчи и исправленные баги, что типично для достоверного инженерного отчёта, а не маркетингового материала. Тема нишевая для инженеров браузерных движков, обсуждение на Hacker News небольшое, 47 очков и 3 комментария.

Риски и подводные камни

LBSE, экспериментальная функция, выключенная по умолчанию; неизвестно, когда (и станет ли вообще) она включена по умолчанию в Safari и других WebKit-браузерах. Условное создание слоёв пока применили только к «листовым» трансформированным фигурам, элементы с клипингом и трансформированные контейнеры слой всё ещё получают, и решение для них не готово. Проект уже дважды останавливался из-за нехватки финансирования (в 2022, 2023 и после апреля 2024 года), а текущая инвестиция Igalia описана как разовая, а не постоянное финансирование. Осталась и незакрытая проблема: с удалением промежуточных слоёв система координат фильтров SVG перестаёт совпадать с ожиданиями кода отрисовки, и это исправление ещё не влито, есть только пул-реквест на рассмотрении.

«Ни одна из этих фигур на самом деле не должна нуждаться в слое, путь или прямоугольник с обычной 2D-трансформацией это самое обычное, что может содержать SVG.»

— инженер Igalia, автор поста