Círculo pulsante
Animação de escala em torno do centro. Um caminho fechado simples com quatro pontos de Bézier ajuda a isolar problemas de transformação.
512 × 512 · 60 FPS · 2 s · 394 bytes
SVG / TGS / JSON
Exemplos SVG e TGS para Telegram: arquivos de origem gratuitos
Comece com um arquivo pequeno cujo comportamento seja fácil de entender. Estes três exemplos preparados para ensinar mostram um círculo pulsante, uma seta em movimento e uma marca de verificação estática. Cada um inclui o SVG de origem, um arquivo TGS e seu Lottie JSON descompactado.
Os cartões mostram o SVG de origem estático. O movimento está armazenado no TGS e no JSON; ele não está incorporado ao SVG. São exemplos didáticos criados por código, não arquivos obtidos dos envios de usuários.
Seta em movimento
Animação de posição sem girar a forma. O desenho de origem deixa espaço suficiente para o movimento vertical de 56 pixels.
512 × 512 · 60 FPS · 2 s · 381 bytes
Marca de verificação estática
Um caminho aberto com traço de pontas e junções arredondadas, sem movimento. Use-o para comparar a espessura da linha e distinguir um TGS estático de um PNG.
512 × 512 · 60 FPS · 3 s · 342 bytes
Como usar os exemplos
- Baixe um SVG e abra-o em um editor vetorial. Ele contém uma única forma, sem fotos incorporadas nem texto editável.
- Abra o conversor, selecione o SVG e entre com o Telegram. Ao selecionar um arquivo, uma cópia é enviada ao serviço para diagnóstico; isso também se aplica a estes exemplos.
- Escolha um movimento ou o modo estático, confira a prévia e exporte o TGS. A predefinição do conversor pode usar tempos e movimentos diferentes dos apresentados no TGS didático fornecido aqui.
- Compare sua exportação com o exemplo: tamanho da tela, fr, op, layers e propriedades animadas. Depois verifique o arquivo no Telegram usando @Stickers.
O que foi verificado
O validador do projeto verifica gzip, JSON, uma tela de 512 × 512, 60 FPS, duração de no máximo 3 segundos, tamanho compactado inferior a 64 KB e dados de formas compatíveis. Cada exemplo tem uma camada sem imagens externas; os valores animados inicial e final coincidem. Esta é uma verificação estrutural, não uma confirmação de que cada arquivo foi aceito pelos servidores do Telegram.
O que examinar no JSON
O campo fr define a taxa de quadros, op indica o fim da composição e layers lista as camadas. O círculo anima a escala em ks.s; a seta anima a posição em ks.p. A marca de verificação tem um caminho aberto, com c definido como false, e um traço definido por um elemento st. Um valor a igual a zero indica uma propriedade sem quadros-chave.
Reutilize os exemplos nos seus projetos
A equipe SVG to TGS criou estes três exemplos. Você pode copiá-los, modificá-los e redistribuí-los, inclusive em projetos comerciais, sem pagamento nem atribuição obrigatória de autoria. Esta permissão se aplica apenas a estes três conjuntos de arquivos; ela não abrange o código-fonte do site, o logotipo nem trabalhos de terceiros.
Guarde o arquivo de origem
O conversor aceita SVG de origem. Os arquivos TGS e JSON disponíveis aqui servem para análise e comparação; o conversor não pode importá-los de volta. Guarde o SVG separadamente para edições futuras. Antes de testar um logotipo complexo, confirme que um exemplo simples conclui o mesmo processo no seu dispositivo.