SVGs that feel like GIFs

Original Article ↗ Hacker News Discussion ↗

Immediate reactions & basic workflow

  • Many readers found the SVG “terminal GIF” trick neat and useful, especially for README demos.
  • Several point out you don’t need to upload to asciinema: you can asciinema rec, then pipe the .cast directly into svg-term locally to produce an SVG.
  • People are surprised you can copy text out of the animation; some wish for pause/seek controls to make this more usable.

SVG animation capabilities

  • Discussion notes that SVG is “inherently animated” via <animate> (and CSS), including infinite loops via repeatCount="indefinite".
  • Since animations target attributes, different parts of an image can be on independent cycles, prompting jokes about Turing-completeness.
  • SVGs can embed ECMAScript, though not when used via <img> on GitHub, which strips scripting.
  • Examples from Wikipedia (missile game, London Tube map) show complex, interactive SVGs with no JS.

GitHub/GitLab support, sanitization, and safety

  • Clarification that GitHub READMEs render SVGs through <img>, so script tags don’t run, reducing exploit risk.
  • Debate on whether GitHub “supports” SVG vs just serving any image; some note GitHub mirrors/caches images and can sanitize uploaded SVGs.
  • A “dangerous” SVG that freezes pages via exponential element nesting is shared as a caution: SVGs can cause DoS-style hangs even without XXE.
  • GitLab is reported to support similar SVG readme animations.

SVG vs GIF, video, APNG

  • For READMEs, some prefer embedding MP4/WebM directly because of built-in controls; others like SVG for small, crisp, text-copyable terminal demos.
  • SVG is praised for responsiveness (color and size adapting to theme/layout), which video lacks.
  • Concerns raised about losing play/pause/slider controls in pure-SVG animations.
  • APNG is mentioned as an underused alternative with broad browser support; GIF’s quality/efficiency is criticized.

Performance & tooling

  • SVG animations can be CPU-heavy in Chromium vs GIF/WAAPI, since each element is a rich object.
  • svg-term-cli appears unmaintained, worrying some; alternatives like asciinema2svg, termsvg, and new wrappers (e.g., dg) are shared.
  • People imagine further uses: CLI showcases, dynamic README badges (e.g., weather), architecture “anime-style” reveal animations.