DotLottieReact: можно ли рисовать анимацию в SVG вместо canvas?

Компонент DotLottieReact - популярное решение для воспроизведения файлов формата *.lottie в приложениях на React. По умолчанию он рендерит анимацию в canvas, что оптимально для производительности, но не всегда удобно для интеграции с DOM или для сохранения чёткости при масштабировании. В этой статье мы разберём, есть ли возможность переключить рендеринг на SVG, и какие альтернативы существуют.

Поддерживает ли DotLottieReact рендеринг в SVG?

На текущий момент (2025 год) компонент DotLottieReact не предоставляет встроенной опции для вывода анимации в SVG. Все анимации отрисовываются исключительно через canvas. В официальной документации и исходном коде библиотеки отсутствуют параметры типа renderer: 'svg', которые есть, например, у обычного Lottie-плеера (lottie-web).

Если вам критично получать именно SVG-разметку, придётся использовать другие инструменты или обходные пути, описанные ниже.

Почему разработчики выбрали canvas по умолчанию?

Рендеринг через canvas даёт лучшую производительность при сложных анимациях с большим количеством элементов. SVG, напротив, создаёт множество DOM-узлов, что может замедлить работу страницы на слабых устройствах. Для *.lottie файлов (которые часто содержат высокую детализацию) canvas является более надёжным решением.

Как переключить DotLottieReact на SVG: возможные решения

Хотя прямой поддержки нет, вы можете попробовать следующие подходы:

• Использовать DotLottieReact с обёрткой - попробуйте передать renderConfig с параметром renderer: 'svg' (не гарантировано, но в некоторых версиях библиотек это может сработать через внутренние пропсы).
• Перейти на библиотеку lottie-react - это форк, который поддерживает все три режима рендеринга: svg, canvas и html. Установите npm install lottie-react и укажите renderer='svg'.
• Использовать lottie-web напрямую - создайте React-компонент-обёртку, который инициализирует плеер Lottie с renderer: 'svg' и передаёт ему путь к файлу *.lottie или JSON-данные.

Альтернативные React-компоненты для Lottie с поддержкой SVG

Если DotLottieReact не подходит, рассмотрите эти варианты:

lottie-react

Самый популярный компонент на npm. Поддерживает все форматы рендеринга. Пример использования:

import Lottie from 'lottie-react';
<Lottie animationData={animationData} renderer='svg' />

Обратите внимание: для работы с *.lottie файлами потребуется предварительная конвертация в JSON (через утилиту LottieFiles).

react-lottie

Старый, но проверенный компонент на основе lottie-web. Позволяет задать options.renderer: 'svg'. Пример:

import Lottie from 'react-lottie';
const defaultOptions = {
  loop: true,
  renderer: 'svg',
  animationData: animationData
};
<Lottie options={defaultOptions} />

Как конвертировать *.lottie в JSON для SVG-рендеринга

Файлы *.lottie - это сжатые архивы, содержащие JSON. Чтобы использовать их с lottie-react или react-lottie, выполните следующие шаги:

1. Перейдите на сайт LottieFiles.
2. Загрузите ваш *.lottie файл.
3. Скачайте его в формате JSON (кнопка «Download as JSON»).
4. Импортируйте JSON в ваш React-компонент.

Теперь вы можете использовать любой компонент, поддерживающий SVG-рендеринг.

Заключение

Компонент DotLottieReact не умеет рисовать анимации в SVG - он заточен под canvas. Для получения SVG-вывода используйте альтернативные библиотеки: lottie-react или react-lottie, предварительно конвертировав *.lottie в JSON. Выбор формата рендеринга зависит от ваших задач: canvas - для производительности, SVG - для гибкости и чёткости.