Преобразуйте анимированный SVG в Lottie
Преобразуйте анимированный SVG (например, CSS @keyframes, как экспорт движения в Figma) в настоящий векторный Lottie, полностью в вашем браузере. Без After Effects, без регистрации, без загрузки каких-либо файлов.
Проблема
Анимированный SVG отлично выглядит в интернете, но большинство приложений и систем дизайна стандартизируются на Lottie. Анимация SVG хранится в CSS @keyframes или SMIL внутри файла; нет встроенного способа передать её в lottie-web, lottie-ios или lottie-android.
Обычный совет – перестроить анимацию в After Effects и повторно экспортировать с помощью Bodymovin – это медленно и бессмысленно, если движение уже существует в SVG. Ручное преобразование JSON подвержено ошибкам.
Конвертеры растровой графики преобразуют ваши четкие векторные SVG в тяжелый формат Lottie с видео, что приводит к потере компактного размера и независимости от разрешения, которые делали векторный формат привлекательным.
Рабочий процесс браузера
EasyLottie компилирует анимированный SVG непосредственно в настоящий векторный Lottie: фигуры становятся Lottie слоями, встраиваемые изображения – Lottie слоями изображений, а CSS @keyframes превращения – Lottie ключевыми кадрами – компактными, масштабируемыми и готовыми для любого Lottie runtime.
Оно работает на 100% в вашем браузере, поэтому ничего не загружается. Вы получаете предварительный просмотр в реальном времени и экспорт в формате JSON одним кликом.
Если SVG использует функции, которые нельзя идеально преобразовать в векторный формат (например, градиенты, фильтры, маски), то вам будет предложено использовать видеоконвертер — таким образом, всегда есть возможность конвертировать в Lottie.
Завершить задачу
Получите свой анимированный SVG
Экспортируйте его из Figma (Motion), или любого инструмента, который производит CSS @keyframes / SMIL-анимированный SVG.
Откройте конвертер
Перейдите к инструменту «Figma в Lottie» — он обрабатывает анимированные SVG напрямую в браузере.
Загрузите SVG
Перетащите файл сюда; анимация скомпилирована в векторный Lottie и отображается в реальном времени.
Экспортируйте Lottie
Скачайте файл .json и добавьте его в свой веб- или мобильный проект — без использования After Effects.
Распространенные случаи использования
Экспортируйте файл из Figma.
Разработанная анимация в Figma и экспорт в формате SVG? Преобразуйте её в Lottie, которую ваши разработчики смогут использовать напрямую.
Воспроизведение существующих анимаций SVG
Преобразуйте существующий анимированный SVG-икон в Lottie для стабильной воспроизводимости в веб-приложениях, iOS и Android.
Сохраняйте в векторном формате.
Получите небольшую, не зависящую от разрешения Lottie, вместо тяжелого растрового обертки.
Часто задаваемые вопросы
Могу ли я преобразовать анимированный SVG в Lottie бесплатно?
Да. EasyLottie конвертирует анимированные SVG (CSS @keyframes) в настоящий векторный Lottie бесплатно, в вашем браузере, без регистрации и загрузки файлов.
Работает ли оно с экспортом SVG из Figma?
Да — экспорт анимированных SVG из Figma (CSS @keyframes для фигур, плюс встраиваемые изображения) — это именно то, для чего создан конвертер.
Является ли результат настоящим векторным Lottie?
Да, для поддерживаемых SVG. Формы и преобразования становятся настоящими векторными слоями Lottie, а не видеооберткой, поэтому файл остается небольшим и масштабируемым.
Что если мой SVG содержит градиенты или фильтры?
Эти элементы пока нельзя преобразовать в векторный формат, и вам будет предложено воспользоваться видеоконвертером, чтобы получить Lottie.
Загружен ли мой файл?
№. Конвертация полностью выполняется в вашем браузере.
Готовы попробовать?
Бесплатное использование, без регистрации. По умолчанию файлы обрабатываются локально.