SVG-рендерер в Lottie Web представляет собой наиболее универсальный и функционально полный способ отображения анимаций. В основе лежит преобразование каждого кадра композиции в набор SVG-элементов, управляемых через DOM.
SVG-рендеринг опирается на векторную модель браузера. Каждый слой
анимации превращается в отдельные SVG-элементы: path,
g, clipPath, mask,
text. Манипуляции происходят через изменение атрибутов и
трансформаций.
Ключевая характеристика — сохранение всей структуры анимации в виде DOM-дерева.
Сильные стороны SVG-рендерера:
SVG-рендерер максимально близок к возможностям After Effects, экспортируемым через Bodymovin:
Несмотря на функциональность, SVG-рендерер имеет ряд архитектурных ограничений:
Особенно критичным становится рост количества узлов при сложных композициях, где каждый кадр требует обновления множества атрибутов.
Canvas-рендерер использует отрисовку через
<canvas> и API 2D-контекста. В отличие от SVG, он не
создаёт DOM-структуру для каждого элемента, а рисует пиксельное
изображение каждого кадра.
В canvas-модели каждый кадр анимации полностью перерисовывается. Это означает, что состояние сцены хранится в памяти, а не в DOM.
Процесс включает:
Canvas-рендерер демонстрирует стабильную производительность при большом количестве элементов. Это связано с отсутствием DOM-операций.
Преимущества:
Пиксельная природа накладывает функциональные ограничения:
Также отсутствует прямой доступ к отдельным слоям после отрисовки — всё становится частью растрового изображения текущего кадра.
Canvas-движок проявляет преимущества в следующих сценариях:
HTML-рендерер (DOM-based rendering) использует обычные HTML-элементы, позиционируемые и трансформируемые через CSS. В отличие от SVG, здесь используется не векторная графика, а блочная модель DOM.
Каждый слой анимации превращается в HTML-элемент, чаще всего
div, с применением CSS-свойств:
transform: matrix(...)opacityclip-pathfilter (в ограниченном виде)Анимация достигается через динамическое изменение стилей.
HTML-рендерер ближе всего к UI-слою веб-приложений. Он использует GPU-ускорение браузера через CSS-трансформации.
Характерные черты:
HTML-рендерер имеет наиболее выраженные ограничения по сравнению с SVG и canvas:
Canvas обеспечивает наиболее стабильную производительность при сложных сценах. SVG показывает деградацию при росте числа DOM-узлов. HTML зависит от сложности CSS-трансформаций и структуры документа.
SVG сохраняет идеальную векторную чёткость. Canvas обеспечивает визуально стабильный результат, но в растровой форме. HTML ограничен возможностями CSS и не всегда точно воспроизводит оригинальную анимацию.
SVG:
Canvas:
HTML:
| Возможность | SVG | Canvas | HTML |
|---|---|---|---|
| Маски | + | + | ± |
| Градиенты | + | + | ± |
| Текст | + | ± | ± |
| Blend modes | ± | ± | - |
| Trim paths | + | + | - |
| Blur/filters | ± | ± | ± |
Lottie Web использует единый JSON-модуль анимации, но различает способы рендеринга через абстрактный слой renderer.
Каждый рендерер реализует собственный pipeline:
SVG взаимодействует с DOM напрямую, canvas полностью контролирует пиксельный буфер, HTML работает через CSSOM.
SVG увеличивает нагрузку на память за счёт DOM-узлов. Canvas использует буферы и состояние сцены в JS, что даёт более предсказуемое потребление. HTML создаёт промежуточные DOM-элементы, но обычно менее тяжёлые, чем SVG-структуры.
SVG автоматически адаптируется за счёт viewBox и preserveAspectRatio. Canvas требует ручного пересчёта размеров и перерисовки. HTML зависит от CSS-свойств контейнера и может требовать дополнительной синхронизации transform-значений.
Эффекты типа blur, glow, shadow и blending имеют разную степень поддержки:
При росте сложности сцены:
Разные браузеры по-разному оптимизируют каждый рендерер:
Эти различия могут приводить к разной производительности одной и той же анимации в разных окружениях.