SVG que parece um GIF

 (koaning.io)
33 pontos por GN⁺ 2025-07-09 | 1 comentários | Compartilhar no WhatsApp
  • Imagens SVG animadas mantêm alta resolução e, ao mesmo tempo, têm um tamanho de arquivo muito pequeno (49 KB)
  • Entregam um efeito visual parecido com GIFs, mas na prática usam os recursos de animação SVG
  • Também podem ser usadas diretamente em arquivos README.md do GitHub
  • Com as ferramentas asciinema e svg-term-cli, é possível gravar uma sessão de terminal e convertê-la em uma animação SVG
  • Aproveitam os elementos de animação do SVG (<animate>, <animateTransform>, <animateMotion>)

Características dos SVGs animados

  • Imagens animadas feitas em SVG parecem GIFs tradicionais, mas na verdade usam os recursos de animação vetorial do SVG
  • Essa abordagem oferece arquivos muito pequenos e permite redimensionar e dar zoom sem perda de qualidade
  • Uma grande vantagem é que podem ser usadas diretamente em lugares como o README.md do GitHub
  • Como exemplo, é apresentado um SVG animado de um papagaio em alta resolução com 49 KB

Como fazer

  • Grave uma sessão de terminal com asciinema
  • Converta o arquivo gravado do asciinema com a ferramenta svg-term-cli para criar um arquivo de animação SVG
  • O arquivo SVG gerado pode ser adicionado com facilidade ao README.md
  • O autor usa essa abordagem ativamente em vários projetos, como o bespoken

Como funciona a animação em SVG

  • A especificação do SVG já inclui recursos de animação embutidos
    • <animate>: anima atributos individuais ao longo do tempo
    • <animateTransform>: permite aplicar animações de transformação, como rotação, redimensionamento e movimento
    • <animateMotion>: move objetos ao longo de um caminho
  • O svg-term-cli funciona aproveitando esses recursos de animação nativos do SVG

Leituras relacionadas

1 comentários

 
GN⁺ 2025-07-09
Comentários no Hacker News

  • Estou impressionado com a variedade de coisas realmente marcantes que dá para fazer só com SVG. Alguns exemplos encontrados na Wikipédia que chamaram a atenção: animação clone de Missile Command, mapa do metrô de Londres e animação de rolling shutter

    • O SVG originalmente começou como um concorrente aberto ao Shockwave/Flash Player e também como formato de app para PDAs. Também foi mencionado que adicionar suporte a rede chegou a ser considerado de fato.

    • O mapa do metrô de Londres é especialmente impressionante porque marca as estações "sem escadas" para pessoas com mobilidade reduzida, como usuários de cadeira de rodas. Ao ver o primeiro exemplo do míssil, imediatamente pensei em uma forma de clicar nas ogivas por programação e senti como se tivesse salvado o mundo.

    • Fiquei curioso sobre o fato de o primeiro link de Missile Command não funcionar direito no Safari. Dá para clicar nos botões, mas clicar nas ogivas não responde. No Firefox aparece até o cursor em forma de mira, mas no Safari algo claramente não funciona.

    • A funcionalidade de checkbox no mapa do metrô é muito legal. Deu vontade de aprimorar mais minhas habilidades com SVG. Já foi para os favoritos.

    • Só pelo título do artigo achei que fosse uma ferramenta para mostrar visualmente o hash de um arquivo README, mas seria ótimo se algum tipo de visualização assim ajudasse usuários a perceber com facilidade quando TOS ou EULA mudam de forma sorrateira.

  • Compartilhou a experiência de ter desenvolvido um SVG animado embutido no README, que atualizava informações de clima e dia da semana uma vez por dia. Referência. Na prática, foi um projeto feito alguns anos atrás durante um período de convocação para júri.

  • Se o alvo for um README do GitHub, também dá para embutir vídeo diretamente. Foi citado como exemplo o README do git-recent. Mas, se for apenas uma captura de terminal, pode ser mais inteligente usar a abordagem em SVG do autor do post.

    • A vantagem do vídeo é ter UI de reprodução/pausa/slider. Algumas plataformas até adicionam controles via JavaScript para GIFs, mas como isso não é suportado nativamente pelo navegador, há um limite. Por isso, muitas vezes prefiro vídeo. Quando faço animações SVG para RevealJS, controlo com CSS/JS conforme a necessidade.

    • Ao adicionar um arquivo de vídeo, editar o README diretamente no GitHub para que o upload fique armazenado em githubusercontent também é melhor para o tamanho do repositório.

    • O SVG é diferente do vídeo porque consegue reagir às preferências de tema claro/escuro do usuário. Também suporta tamanho responsivo, algo que vídeo não consegue. Foi apresentado este demo relacionado. Ainda assim, isso continua funcionando bem no Firefox/Chrome, enquanto no Safari segue sendo chato de implementar, o que é uma pena.

    • Fazia tempo que eu não via menção ao Paul; deu até nostalgia dos trabalhos anteriores dele com Echo Nest e a API do Rdio.

    • Na minha opinião, para captura de terminal, a abordagem em SVG tem pouca utilidade prática por falta de controles. Para explicar rapidamente algum movimento em uns 5 segundos como demo de software, pode funcionar bem, mas dependendo do caso o vídeo pode ser melhor.

  • O fato de ser possível copiar texto diretamente da animação parece menos intuitivo do que eu imaginava, mas talvez seja a característica mais legal de todas.

    • Se a animação pudesse pausar ao passar o mouse, ficaria ainda mais interessante. Mas, se o terminal estiver rolando, copiar/colar acaba virando um desafio e perde utilidade.

  • Como aviso, existe um bug em que alguns arquivos SVG fazem a página travar. Por isso, há um alerta para evitar embutir links de SVG de terceiros. Tanto o Google Chrome quanto o Firefox não pretendem corrigir esse bug. Também foi anexado um exemplo de SVG perigoso para teste, mas clicar nele pode derrubar o navegador.

    • A opinião aqui é que travar a página ou o navegador não é exatamente um problema de segurança, mas um fenômeno geral que também pode acontecer com abuso de várias funções embutidas. Por exemplo, se você usar uma cadeia longa de filtros de blur, pode causar uma sobrecarga de renderização a ponto de o próprio Chrome travar. Se isso ultrapassar a aba, aí sim fica mais problemático, mas em princípio parece mais uma questão de usabilidade da UI.

    • Foi levantada a dúvida se vulnerabilidades relacionadas a SVG, como ataques XXE, ainda seriam possíveis em ambientes restritos como README do GitHub. Se forem, fica a curiosidade sobre como isso é bloqueado.

  • A ideia de que "SVG é inerentemente animação" pareceu muito nova e inspirou várias ideias. Ficou a dúvida se há suporte a loop infinito.

    • Dá para repetir infinitamente definindo os atributos repeatCount ou repeatDur da tag <animate> como indefinite. Como a repetição é por atributo individual, cada elemento da imagem pode se mover em ritmos diferentes.

    • Foi compartilhado um exemplo de código disponível na documentação oficial de animação SVG.

    • Além de animação baseada em atributos, SVG também pode embutir Ecmascript (JavaScript), então é possível preencher qualquer funcionalidade com script se necessário. Referência: documentação de script da W3C.

    • Também foi compartilhado este conjunto de exemplos e código de animação SVG. Alguns podem ser vistos ao recarregar a página.

  • Existe o sonho de um dia ter um padrão de navegador em que seja possível encaixar qualquer engine de execução, como WASM, JVM ou CLR, e ter saída em SVG (texto/binário). A esperança é um futuro em que os desenvolvedores possam escolher livremente a combinação entre modelo de execução e visualização, sem ficarem presos ao DOM.

    • Apps como AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web e Flutter for Web (CanvasKit) já chegam perto disso, contornando o DOM ou escolhendo outros motores de renderização. Ou seja, não estamos mais em uma era em que só o DOM é imposto.

    • No passado, runtimes de terceiros como Flash, Java, Silverlight e ActiveX dominavam a web, mas hoje a convicção é de que um ambiente comum de linguagem/plataforma é uma vantagem. Também foi enfatizado que, no cenário atual de ameaças de segurança, é difícil tecnologias complementares do modelo antigo continuarem sobrevivendo.

    • A vantagem do DOM (HTML) está em ter sido projetado para reagir de forma responsiva a diferentes ambientes de exibição. O SVG tem menos liberdade nesse aspecto.

  • Pode soar bem aleatório, mas surgiu a vontade de animar diagramas de arquitetura em SVG para criar vídeos em que os nós tenham animações dramáticas, tipo animação de batalha: zoom, freeze frame, linhas piscando e efeitos assim.

  • Posts nesse estilo TIL contribuem muito para estimular criatividade, porque compartilham diretamente a experiência com uma nova ferramenta e ainda mostram como contornar as limitações do GitHub Markdown. Ao ver o resultado em SVG (exemplo), foi uma surpresa interessante descobrir uma estrutura com SVG inline aninhado dentro de SVG inline. Agradecimento pela novidade.

    • Em teoria, isso significa que também daria para fazer um SVG quine animando a si próprio digitando seu próprio código-fonte no editor.

  • Ideia muito legal. Quero testar no README como isso combina com os efeitos implementados em terminaltexteffects. Não entendo muito de SVG, mas percebo que, se ele realmente armazenar o texto, isso pode virar um arquivo bem grande. Mesmo assim, dá vontade de tentar pela diversão.