Пульсирующий круг
Изменение масштаба вокруг центра. Замкнутый контур с четырьмя точками Безье помогает отдельно проверить преобразования.
512 × 512 · 60 FPS · 2 с · 394 байт
SVG / TGS / JSON
Примеры SVG и TGS для Telegram: исходники и готовые файлы
Начните с небольшого файла, поведение которого понятно. Здесь три специально подготовленных примера: пульсирующий круг, движущаяся стрелка и статичная галочка. Для каждого доступны исходный SVG, TGS и распакованный Lottie JSON.
На карточках показан статичный исходник SVG. Движение находится в TGS и JSON; анимация не встроена в SVG. Это учебные примеры, созданные программно, а не сохранённые результаты пользовательских загрузок.
Движущаяся стрелка
Анимация положения без вращения формы. В исходнике оставлено место для движения по вертикали на 56 пикселей.
512 × 512 · 60 FPS · 2 с · 381 байт
Статичная галочка
Открытый контур с круглой обводкой без движения. Сравните толщину линии и посмотрите, чем статичный TGS отличается от PNG.
512 × 512 · 60 FPS · 3 с · 342 байт
Как использовать примеры
- Скачайте SVG и откройте его в векторном редакторе. Он состоит из одной фигуры и не содержит встроенных фотографий или текста.
- Откройте конвертер, выберите SVG и войдите через Telegram. При выборе файла его копия отправляется сервису для диагностики; это правило действует и для примеров.
- Выберите движение или статичный режим, проверьте предпросмотр и экспортируйте TGS. Пресет конвертера может отличаться по времени и характеру движения от учебного TGS.
- Сравните свой экспорт с примером: размер холста, fr, op, слои и свойства движения. Затем проверьте файл в Telegram через @Stickers.
Что проверено в файлах
Встроенный валидатор проекта проверяет gzip, JSON, холст 512 × 512, частоту 60 FPS, длительность не более 3 секунд, размер до 64 KB и поддерживаемые формы. У всех трёх примеров один слой без внешних изображений; первая и последняя точки анимации совпадают. Это проверка структуры, а не подтверждение приёма каждого файла сервером Telegram.
Что искать в JSON
Поле fr задаёт частоту кадров, op — конец композиции, layers — список слоёв. В ks.s находится масштаб пульсирующего круга, в ks.p — положение стрелки. У статичной галочки путь открыт: c имеет значение false, а элемент st задаёт обводку. Нулевые значения a обозначают свойства без ключевых кадров.
Можно использовать в своих проектах
Эти три примера созданы командой SVG to TGS. Их можно копировать, изменять и распространять, в том числе в коммерческих проектах, без оплаты и обязательной ссылки на автора. Разрешение относится к этим трём наборам файлов; оно не распространяется на код сайта, логотип или чужие работы.
Условия использования примеров
Что важно помнить
Конвертер принимает исходный SVG. Скачанные здесь TGS и JSON служат для изучения и проверки — загрузить их обратно в конвертер нельзя. Для дальнейшего редактирования сохраняйте SVG отдельно. Если нужен сложный логотип, сначала убедитесь, что простой пример проходит тот же путь на вашем устройстве.