анимировать svg онлайн
Разберите движение стрелки, сравните перемещение с масштабом и спланируйте анимацию поддерживаемых элементов своего SVG.
SVG на входе и TGS на выходе после входа через Telegram. CSS- и SMIL-анимация не импортируется.
Разбор на исходном файле
Эта стрелка из семи точек меняет положение по вертикали, сохраняя форму, масштаб и угол. В первом кадре она находится ниже центра исходного SVG. Сравните смещение слоя и геометрию рисунка.
В SVG стрелка расположена относительно точки 256, 256. В анимации координата Y слоя последовательно равна 276, 220 и 276. Относительно исходника это смещения +20, −36 и +20 пикселей. Координата X всё время остаётся равной 256, вращение не добавляется.
Вертикальный ход составляет 56 пикселей: из 276 вычитается 220. Высота самой стрелки — 204 пикселя: вместе с ходом это определяет занятое пространство. Даже небольшое движение может обрезать крупный рисунок у границы холста.
Во время этого движения контур занимает координаты Y от 124 до 384 на холсте высотой 512 пикселей. Сверху остаётся 124 пикселя, снизу — 128. Пересчитайте запас, если увеличите стрелку, добавите обводку или расширите диапазон её перемещения.
Это программный учебный пример, а не результат конкретного пресета редактора. Экспорт из редактора может отличаться. Одна проверка структуры не гарантирует, что Telegram примет файл.
В учебной анимации bounce-arrow одна фиолетовая фигура движется по вертикали. На кадре 0 её положение — (256, 276), на кадре 60 — (256, 220), на кадре 119 — снова (256, 276). X не меняется, масштаб остаётся 100%, поворот равен нулю.
Между крайними положениями 56 пикселей: стрелка идёт вверх и возвращается. Исходный SVG расположен при Y = 256, поэтому 56 пикселей — размах движения, а не смещение относительно центра исходного SVG.
Положение переносит фигуру по холсту. Масштаб меняет её размер относительно опорной точки. В JSON образца это разные свойства: ks.p для положения и ks.s для масштаба. Сравните стрелку с пульсирующим кругом, чтобы увидеть разницу без дополнительных эффектов.
Для составной иконки заранее решите, какие части движутся вместе. После импорта проверьте фактически доступные элементы: SVG-группы не гарантируют, что каждый слой дизайн-редактора станет отдельным редактируемым слоем. Назначайте движение поддерживаемым элементам, которые можете опознать в предпросмотре.
Локальные координаты контура стрелки по Y идут от -96 до 108. С учётом движения общий вертикальный диапазон этого примера — от Y = 124 до Y = 384, внутри холста 512 пикселей. Такой запас выбран специально: правильное положение первого кадра ещё не доказывает, что остальные кадры поместятся.
Учебный TGS размером 381 байт создан программно. Он содержит 120 кадров при 60 FPS, то есть две секунды, а последний ключ положения стоит на кадре 119. У пресетов редактора свои траектории: загрузка SVG не воспроизводит точные ключи и не импортирует готовый TGS.
Как это работает
Разберите движение стрелки, сравните перемещение с масштабом и спланируйте анимацию поддерживаемых элементов своего SVG.
Решите, нужно ли фигуре перемещение, изменение размера или вращение. Начните с одного свойства, чтобы понимать причину неожиданного результата.
Оставьте место для движения. Выберите SVG и войдите через Telegram. Диагностическая копия исходника отправляется сервису; конвертация выполняется в браузере.
Проверьте, какие фигуры можно выделить и анимировать. Убедитесь, что неподвижные части действительно не двигаются вместе с выбранной.
Выберите подходящий пресет и оцените настоящую траекторию. Доступность зависит от тарифа: пресет отскока bounce входит в Pro. Учебный файл можно изучать отдельно от пресета.
Просмотрите полный цикл, включая крайние точки движения. Скачайте TGS, запустите проверку файла и оцените анимацию в Telegram перед публикацией.
Сценарии
Готовьте векторную графику для стикеров, кастомных эмодзи и брендовых наборов Telegram.
Перемещайте фигуру целиком, не меняя её размеры и ориентацию.
Оставьте опорную фигуру на месте, а движение назначьте одному поддерживаемому элементу.
Сравните движение всего знака и отдельных деталей, сохраняя его узнаваемость.
Формат
Редактор создаёт новое движение из поддерживаемой SVG-геометрии. Он не сохраняет готовую временную шкалу CSS, JavaScript или SMIL и не экспортирует код веб-анимации. Движение, видимое в исходном SVG в браузере, нужно пересоздать доступными настройками.
Проверка TGS может выявить структурные проблемы экспорта, но не доказывает, что все движущиеся фигуры остаются внутри холста. Помимо отчёта обязательно оцените полную визуальную траекторию.
Советы и требования
Скачайте SVG для проверки конвертера или посмотрите небольшой пример анимированного TGS.
FAQ
Положение меняет место фигуры, а масштаб — её размер относительно опорной точки. У учебной стрелки меняется только положение, у круга — только масштаб.
Нет. Исходный SVG находится при Y = 256. В TGS положение меняется между Y = 276 и Y = 220, поэтому 56 пикселей — расстояние между крайними точками.
Не обязательно. Редактируемые элементы зависят от структуры импорта и поддерживаемых возможностей SVG. Проверяйте фактическое выделение и предпросмотр вместо предположения о точном переносе слоёв дизайн-редактора.
Нет. Учебный TGS создан программно с тремя ключами положения. У пресета bounce в Pro своя траектория и время, поэтому его экспорт нужно оценивать отдельно.
Нет. Здесь импортируется поддерживаемая статичная геометрия, из которой создаётся новое движение TGS. Временная шкала CSS, JavaScript или SMIL не переносится.
Начать
Загрузите статичный SVG, войдите через Telegram и проверьте доступные элементы перед применением пресета.
