Círculo pulsante
Animación de escala alrededor del centro. Un trazado cerrado sencillo con cuatro puntos de Bézier ayuda a aislar los problemas de transformación.
512 × 512 · 60 FPS · 2 s · 394 bytes
SVG / TGS / JSON
Ejemplos SVG y TGS para Telegram: descarga gratuita de archivos fuente
Empieza con un archivo pequeño cuyo comportamiento sea fácil de entender. Estos tres ejemplos preparados para aprender muestran un círculo pulsante, una flecha en movimiento y una marca de verificación estática. Cada uno incluye el SVG de origen, un archivo TGS y su Lottie JSON sin comprimir.
Las tarjetas muestran el SVG de origen estático. El movimiento está guardado en el TGS y el JSON; no está incorporado en el SVG. Son ejemplos didácticos creados mediante código, no archivos obtenidos de las cargas de los usuarios.
Flecha en movimiento
Animación de posición sin girar la figura. El diseño de origen deja espacio suficiente para su movimiento vertical de 56 píxeles.
512 × 512 · 60 FPS · 2 s · 381 bytes
Marca de verificación estática
Un trazado abierto con un trazo de extremos y uniones redondeados, sin movimiento. Úsalo para comparar el grosor de la línea y distinguir un TGS estático de un PNG.
512 × 512 · 60 FPS · 3 s · 342 bytes
Cómo utilizar los ejemplos
- Descarga un SVG y ábrelo en un editor vectorial. Contiene una sola figura, sin fotografías incrustadas ni texto editable.
- Abre el convertidor, selecciona el SVG e inicia sesión con Telegram. Al seleccionar un archivo, se envía una copia al servicio para diagnóstico; esto también se aplica a estos ejemplos.
- Elige movimiento o modo estático, revisa la vista previa y exporta el TGS. El ajuste predefinido del convertidor puede tener tiempos y movimientos distintos de los del TGS didáctico que se ofrece aquí.
- Compara tu exportación con el ejemplo: tamaño del lienzo, fr, op, layers y propiedades animadas. Después comprueba el archivo en Telegram mediante @Stickers.
Qué se ha comprobado
El validador del proyecto comprueba gzip, JSON, un lienzo de 512 × 512, 60 FPS, una duración máxima de 3 segundos, un tamaño comprimido inferior a 64 KB y los datos de figuras compatibles. Cada ejemplo tiene una capa sin imágenes externas; los valores animados inicial y final coinciden. Es una comprobación estructural, no una confirmación de que los servidores de Telegram hayan aceptado cada archivo.
Qué examinar en el JSON
El campo fr establece la frecuencia de fotogramas, op marca el final de la composición y layers enumera las capas. El círculo anima la escala en ks.s; la flecha anima la posición en ks.p. La marca de verificación tiene un trazado abierto, con c establecido en false, y un trazo definido por un elemento st. Un valor a igual a cero indica una propiedad sin fotogramas clave.
Reutilízalos en tus propios proyectos
El equipo de SVG to TGS creó estos tres ejemplos. Puedes copiarlos, modificarlos y redistribuirlos, incluso en proyectos comerciales, sin pagar ni tener que indicar la autoría. Este permiso se aplica únicamente a estos tres conjuntos de archivos; no incluye el código fuente del sitio, el logotipo ni las obras de terceros.
Condiciones de uso de los ejemplos
Conserva el archivo fuente
El convertidor acepta SVG de origen. Las descargas de TGS y JSON de esta página sirven para examinar y comparar los archivos; no se pueden volver a importar en el convertidor. Conserva el SVG por separado para futuras ediciones. Antes de probar un logotipo complejo, comprueba que un ejemplo sencillo complete el mismo proceso en tu dispositivo.