2024-03-06

Адаптивные векторные эмодзи в Telegram

По материалу статьи реализован Telegram бот @SVGToTGSBot в соавторстве с Ksander.

Мы где-то добыли красивые иконки в SVG (открытый векторный формат) и хотим превратить их в премиум набор векторных адаптивных эмодзи, меняющих цвет в зависимости от темы приложения. Типа такого.

Бот

Для создания пака можно воспользоваться официальным ботом @Stickers:

/newemojipack
Static emoji
/adaptive

Загружать в него нужно файлы в формате TGS (Telegram Sticker). По этому формату известно очень мало и практически не встречаются рабочие конвертеры.

Lottie

На самом деле TGS - это формат Lottie на основе JSON

с добавлением ключа tgs:1 в корневой элемент;
изменённым на .tgs расширением;
запакованный в .gz архив;
с ещё раз изменённым на .tgs расширением.

По Lottie известно немного больше, но практически всё приводит к официальному сайту с платной поштучной конвертацией; и плагинам на Adobe After Effects, Adobe Animate, Sketch, которыми можно экспортировать Lottie-файлы из соответствующих программ. Если способ устраивает, можно установить плагин на знакомую программу и пересохранять SVG в TGS по одному.

Если хотим больше и быстрее

Можно воспользоваться скриптом на Python.

Сначала нужно установить сам Python с официального сайта. Во время установки лучше выбрать Advanced, обязательно отметить “Add python.exe to PATH”. Установку pip лучше тоже не пропустить.

Если выбрана обычная установка, то pip можно установить позже по статье.

Когда с Python и pip разобрались, нужно открыть терминал (Win + R, cmd) и установить пакет для работы с lottie:

pip install lottie

Теперь доступен запуск скрипта для массовой конвертации SVG в TGS:

Скачать файл tgs.py;
Разместить в удобном месте, например создать в домашней папке пользователя папку stickers. Получится C:\Users\MyUserName\stickers\tgs.py
Создать там же папку svg, положить в неё свои svg-иконки;
Открыть терминал, перейти через команду cd stickers в папку со скриптом;
Запустить конвертацию через команду tgs.py;
Должна создаться папка tgs с результатами конвертации.

Всё, теперь можно добавлять tgs-эмодзи через команду бота /addemoji, постепенно получить желаемый набор и красоваться.

Для повторной конвертации достаточно пунктов 4-6. Можно выписать себе в блокнот команду и запускать одной строкой:

cd stickers && tgs.py

(или только tgs.py, если уже в нужной папке).

Обратный скрипт

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

Невекторные

Если есть красивые иконки других форматов, с которых мы хотим сделать пусть не векторные, но адаптивные эмодзи, то процесс тот же самый, только в тексте скрипта tgs.py замените .svg на формат ваших изображений. Поддерживаются SVG, PNG, WebP, GIF, TIFF, BMP.