SVG que se siente como un GIF

 (koaning.io)
33 puntos por GN⁺ 2025-07-09 | 1 comentarios | Compartir por WhatsApp
  • Las imágenes SVG animadas mantienen una alta resolución y aun así tienen un tamaño de archivo muy pequeño (49 KB)
  • Producen un efecto visual similar al de un GIF tradicional, pero en realidad aprovechan las funciones de animación SVG
  • También se pueden usar directamente en archivos README.md de GitHub
  • Con las herramientas asciinema y svg-term-cli, es posible grabar una sesión de terminal → convertirla en una animación SVG
  • Aprovechan los elementos de animación de SVG (<animate>, <animateTransform>, <animateMotion>)

Características de los SVG animados

  • Las imágenes animadas hechas con SVG se ven como un GIF tradicional, pero en realidad usan las funciones de animación vectorial de SVG
  • Este enfoque ofrece un tamaño de archivo muy pequeño y permite cambiar el tamaño y hacer zoom sin pérdida de calidad
  • Una gran ventaja es que se pueden usar directamente en lugares como el README.md de GitHub
  • Como ejemplo, se presenta un SVG animado de un loro en alta resolución con un tamaño de 49 KB

Cómo hacerlo

  • Se graba una sesión de terminal con asciinema
  • El archivo grabado de asciinema se convierte con la herramienta svg-term-cli para crear un archivo de animación SVG
  • El archivo SVG generado se puede agregar fácilmente al README.md
  • El autor ya usa activamente este método en varios proyectos, como bespoken

Cómo funciona la animación SVG

  • La especificación de SVG ya incluye funciones de animación integradas
    • <animate>: anima atributos individuales a lo largo del tiempo
    • <animateTransform>: permite aplicar animaciones de transformación como rotación, cambio de escala y movimiento
    • <animateMotion>: mueve un objeto a lo largo de una trayectoria
  • svg-term-cli funciona aprovechando estas funciones de animación integradas de SVG

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-07-09
Opiniones de Hacker News

  • Sigo maravillado con lo mucho que se puede hacer solo con SVG de forma realmente impresionante. Entre los ejemplos que encontré en Wikipedia y que más llaman la atención están un clon animado de Missile Command, el mapa del metro de Londres y una animación de rolling shutter

    • SVG originalmente comenzó como un competidor abierto de Shockwave/Flash Player y también como formato de apps para PDA. Incluso se llegó a considerar añadirle soporte de red

    • El mapa del metro de Londres es especialmente impresionante porque incluye la indicación de "estación sin escaleras" para usuarios con movilidad reducida, como personas en silla de ruedas. Al ver el primer ejemplo de misiles, de inmediato pensé en una forma de hacer clic programáticamente en las ojivas y sentí como si hubiera salvado al mundo

    • Me intriga que el primer enlace de Missile Command no funcione bien en Safari. Se pueden pulsar los botones, pero no responde al hacer clic en las ojivas. En Firefox hasta aparece el cursor de mira, pero en Safari algo simplemente no funciona

    • La función de casillas de verificación en el mapa del metro está increíble. Me motivó a pulir más mis habilidades con SVG. Ya quedó en marcadores

    • Al ver solo el título del artículo pensé que se trataba de una herramienta para mostrar visualmente el hash de un archivo README, pero ojalá una visualización así permitiera a los usuarios detectar fácilmente cuando cambian disimuladamente los TOS o las EULA

  • Compartieron la experiencia de haber desarrollado una tarea que inserta un SVG animado en el README, y que ese SVG actualiza una vez al día la información del clima y del día de la semana. Referencia. En realidad fue un proyecto hecho hace años durante un periodo de convocatoria como jurado

  • Si el objetivo es un README de Github, también se puede incrustar video directamente. Como ejemplo comparten el README de git-recent. Aun así, si solo es una captura de terminal, puede que el enfoque con SVG del OP sea una opción más inteligente

    • Lo bueno de usar video es que trae UI de reproducción/pausa/deslizador. Algunas plataformas incluso agregan UI de control a los GIF con JavaScript, pero como eso no viene soportado por el navegador de forma nativa, tiene sus límites. Por eso a veces prefiero el video. Cuando hago animaciones SVG para RevealJS, las manipulo con CSS/JS según haga falta

    • Si agregas un archivo de video, subirlo editando el README directamente en Github hace que el archivo quede almacenado en githubusercontent, lo cual también beneficia el tamaño del repositorio

    • SVG se diferencia del video en que puede responder con colores a la configuración clara/oscura del usuario. También admite tamaño responsivo, algo que con video no se puede. Comparten este demo relacionado. Eso sí, aunque esta función va bien en Firefox/Chrome, en Safari sigue siendo complicada de implementar, lo cual da algo de pena

    • Qué gusto ver una mención de Paul después de tanto tiempo; todavía hay cariño por su trabajo previo con Echo Nest y la API de Rdio

    • En mi opinión, si se trata de una captura de terminal, el método con SVG tiene poca utilidad práctica porque le faltan controles. Para explicar con movimiento algo breve, de unos 5 segundos, como demo de software, sí puede servir, pero según el caso el video también podría ser mejor

  • Poder copiar texto directamente desde la animación no es tan intuitivo como esperaba, pero parece ser la característica más genial de todas

    • Si la animación pudiera pausarse al pasar el mouse por encima, sería todavía más interesante. Pero si la terminal hace scroll, copiar y pegar se vuelve un reto y la utilidad baja bastante

  • Como advertencia, algunos archivos SVG tienen bugs que pueden congelar la página. Por eso recomiendan evitar incrustar enlaces a SVG de terceros. Ni Google Chrome ni Firefox planean corregir este bug. Incluso adjuntan un ejemplo peligroso de SVG para pruebas, aunque hacer clic podría tumbar el navegador

    • La idea es que los problemas donde se congela una página o el navegador no son tanto un tema de seguridad, sino un fenómeno general que también puede ocurrir por abuso de varias funciones integradas. Por ejemplo, usar una cadena larga de filtros de desenfoque puede sobrecargar el renderizado y hacer que Chrome mismo se congele. Si eso afecta más allá de la pestaña, entonces sí sería más grave, pero en principio parece un problema de usabilidad de la UI

    • Surge la duda de si este tipo de vulnerabilidades relacionadas con SVG, como ataques XXE, también serían posibles en un entorno restringido como un README de Github. Si sí, queda la pregunta de cómo lo estarán bloqueando

  • Resulta muy fresco pensar que "SVG es inherentemente animación", y eso dispara varias ideas. Preguntan si admite bucles infinitos

    • Se puede hacer repetición infinita configurando repeatCount o repeatDur del tag <animate> como indefinite. Como la repetición ocurre por atributo individual, cada elemento de la imagen puede moverse con un ciclo distinto

    • Comparten código de ejemplo que se puede ver en la documentación oficial de animación SVG

    • Además de la animación basada en atributos, SVG también puede incrustar Ecmascript (Javascript), así que si hace falta se puede completar cualquier funcionalidad con scripts. Referencia: documentación de scripts del W3C

    • También comparten código de ejemplo y muestras de animación SVG. Algunas se pueden ver al recargar la página

  • Sueñan con un sistema donde, algún día, como estándar del navegador se pudiera conectar cualquier motor de ejecución como WASM, JVM o CLR, y que la salida fuera SVG (texto/binario). La idea sería que los desarrolladores elijan libremente la combinación entre modelo de ejecución y vista, sin quedar atados al DOM, como una futura innovación

    • Apps como AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web y Flutter for Web(CanvasKit) ya se acercan a ese enfoque, usando atajos para saltarse el DOM o eligiendo otros motores de renderizado. O sea, ya no estamos en una era donde solo se impone el DOM

    • Antes runtimes de terceros como Flash, Java, Silverlight y ActiveX dominaban la web, pero ahora se defiende la ventaja de tener un entorno común de lenguaje/plataforma. También se enfatiza que, en un contexto de amenazas de seguridad, esas tecnologías complementarias del pasado ya la tendrían muy difícil para sobrevivir

    • La ventaja del DOM (HTML) es que fue diseñado para responder a una gran variedad de entornos de visualización. SVG no ofrece ese mismo grado de libertad

  • Puede sonar bastante disparatado, pero surgió la idea de animar un diagrama de arquitectura en SVG y hacer que los nodos tengan animaciones dramáticas, como si fueran de batalla: zoom, freeze frames, líneas brillantes y ese tipo de efectos

  • Este tipo de posts estilo TIL aportan muchísimo a la creatividad porque comparten de primera mano la experiencia con una herramienta nueva y además muestran cómo superar las limitaciones de Github Markdown. Al ver el resultado SVG (ejemplo), fue refrescante descubrir por primera vez una estructura donde hay SVG inline anidado dentro de otro SVG inline

    • En teoría, también podría hacerse un SVG quine que se anime a sí mismo mientras escribe su propio código fuente dentro de un editor

  • Es una idea realmente genial y dan ganas de probar cómo encaja en un README con los efectos implementados en terminaltexteffects. No sé mucho de SVG, pero sí tengo presente que si almacena texto real, el archivo podría volverse bastante grande. Aun así, da ganas de intentarlo por diversión