Вы открываете SVG в браузере, и значок пульсирует. После подготовки TGS движение выглядит иначе или исчезает. Расширение SVG описывает не только рисунок: файл может содержать инструкции для веб-анимации, а страница вокруг него — дополнительные стили и сценарии. Эти инструкции не становятся временной шкалой TGS автоматически.

В SVG to TGS движение задаётся средствами самого конвертера. Поэтому сначала стоит получить устойчивый неподвижный рисунок, а затем назначить подходящую анимацию. Ниже — способ отделить эти две задачи и не потерять нужное положение исходной графики.

Определите, откуда берётся движение

Откройте копию SVG как текст и найдите элементы animate, animateTransform, animateMotion, блоки style, объявления @keyframes и свойства animation. По документации MDN, SMIL позволяет менять атрибуты SVG во времени, а CSS-анимация описывается через правила стилей. Если движение появляется только на сайте, проверьте, не управляет ли им внешняя страница.

Для диагностики достаточно записать механизм: «SMIL меняет opacity», «CSS вращает группу» или «сценарий перемещает фигуру». Не нужно сразу переписывать всё содержимое файла. Важно понять, что относится к самой геометрии, а что заставляет её двигаться в браузере.

Сделайте неподвижную контрольную копию

Сохраните исходную веб-версию отдельно. В копии уберите только инструкции движения и явно задайте нужное базовое состояние: координаты, масштаб, поворот, заливку и прозрачность. Если удалить анимацию у объекта с исходной нулевой прозрачностью, он останется невидимым. Отсутствие движения ещё не означает, что выбран удачный кадр.

Для значка, который плавно появляется, удобнее передавать в конвертер полностью видимую форму. Для поворачивающейся стрелки сначала выберите понятное исходное направление. Не оставляйте состояние на волю момента, в который редактор или импортёр прочитал свойства: так результат будет трудно повторить.

  1. Назовите исходник web-original.svg, а копию для подготовки — tgs-source.svg.
  2. Откройте копию отдельно от сайта и убедитесь, что рисунок больше не движется.
  3. Повторно откройте файл и проверьте, что положение и видимость остались теми же.

Разберите пример пульсации без изменения геометрии

В этом учебном примере круг имеет прозрачность 0,4, а вложенный элемент меняет её до 1 и обратно за две секунды. Это описание браузерного движения. Для неподвижной версии удалите только animate и задайте кругу opacity="1". Геометрия круга останется прежней, но базовый рисунок станет полностью видимым.

Такое изменение не переносит исходную кривую движения в TGS. Оно создаёт понятный исходник, к которому можно применить эффект конвертера. Пример объясняет подготовку файла; его нельзя считать обещанием покадрового совпадения между двумя способами анимации.

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <circle cx="80" cy="80" r="42" fill="#2481cc" opacity="0.4">
    <animate attributeName="opacity" values="0.4;1;0.4"
             dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

Не подменяйте выбранный кадр снимком экрана

Остановка браузерной анимации не гарантирует, что сохранённый SVG получит свойства показанного кадра. Сам файл может по-прежнему содержать прежние инструкции и начальные значения. Надёжнее явно сохранить нужную геометрию и оформление в векторной копии, затем открыть её заново для проверки.

Снимок экрана фиксирует внешний вид, но превращает его в растровое изображение. SVG to TGS принимает векторный SVG, а не PNG со снимком. Если исходное движение меняет сложную форму и важно сохранить каждый промежуточный кадр, нужен отдельный процесс анимационного авторинга; простое назначение похожего эффекта не воспроизводит такую работу точно.

Назначьте движение только после проверки рисунка

Загрузите подготовленный SVG и сначала сравните его без добавленного движения. Проверьте толщину линий, положение и видимость деталей. Для конвертации нужен вход через Telegram; выбранный SVG отправляется сервису для диагностики. Часть расширенных инструментов относится к Pro.

Затем выберите движение, которое выполняет ту же смысловую задачу: мягко привлекает внимание, обозначает направление или подчёркивает реакцию. Сходство задачи полезнее приблизительного копирования всех параметров веб-эффекта. Если нужна точная последовательность действий, заранее оцените, позволяют ли доступные инструменты её выразить.

Проверьте именно новый цикл TGS

У Telegram свои требования к анимированным стикерам: холст 512 × 512, длительность не более трёх секунд, цикл, 60 кадров в секунду и ограничение размера файла. То, что веб-анимация работает десять секунд и повторяется, не делает её подходящей для этого формата.

Просмотрите несколько полных повторов экспортированного результата. Убедитесь, что значок не исчезает надолго, движение не обрезается по краям, а конец соединяется с началом. Сохраните рядом исходную веб-версию, подготовленную неподвижную копию и TGS. Тогда следующая правка не смешает разные временные шкалы.

Источники и документация