SVGs, die sich wie GIFs anfühlen

 (koaning.io)
33 Punkte von GN⁺ 2025-07-09 | 1 Kommentare | Auf WhatsApp teilen
  • Animierte SVG-Bilder behalten eine hohe Auflösung bei und haben gleichzeitig eine sehr kleine Dateigröße (49 KB)
  • Sie erzeugen einen ähnlichen visuellen Effekt wie klassische GIFs, nutzen tatsächlich aber die Animationsfunktionen von SVG
  • Sie lassen sich auch direkt in Github-README.md-Dateien verwenden
  • Mit den Tools asciinema und svg-term-cli lassen sich Terminal-Sitzungen aufzeichnen und anschließend in SVG-Animationen umwandeln
  • Dabei werden die Animationselemente von SVG genutzt (<animate>, <animateTransform>, <animateMotion>)

Eigenschaften animierter SVGs

  • Mit SVG erstellte animierte Bilder sehen aus wie klassische GIFs, verwenden in Wirklichkeit aber die vektorbasierte Animation von SVG
  • Dieser Ansatz bietet eine sehr kleine Dateigröße und ermöglicht Größenänderungen sowie Zoomen ohne Qualitätsverlust
  • Ein großer Vorteil ist, dass sie sich direkt an Orten wie Github-README.md einsetzen lassen
  • Als Beispiel wird ein hochauflösender animierter Parrot-SVG mit einer Dateigröße von 49 KB vorgestellt

So wird es erstellt

  • Eine Terminal-Sitzung wird mit asciinema aufgezeichnet
  • Die aufgezeichnete asciinema-Datei wird mit dem Tool svg-term-cli in eine SVG-Animationsdatei umgewandelt
  • Die erzeugte SVG-Datei lässt sich einfach in README.md einfügen
  • Der Autor nutzt diesen Ansatz bereits aktiv in mehreren Projekten wie bespoken

So funktionieren SVG-Animationen

  • In der SVG-Spezifikation sind Animationsfunktionen bereits integriert
    • <animate>: animiert einzelne Attribute über die Zeit
    • <animateTransform>: ermöglicht Transformationsanimationen wie Drehen, Skalieren und Verschieben
    • <animateMotion>: bewegt Objekte entlang eines Pfads
  • svg-term-cli arbeitet mithilfe genau dieser integrierten Animationsfunktionen von SVG

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-07-09
Hacker-News-Kommentare

  • Ich bin immer wieder beeindruckt, wie viele unterschiedliche und eindrucksvolle Dinge man allein mit SVG machen kann. Beispiele von Wikipedia, die mir ins Auge gefallen sind, sind ein Missile-Command-Klon als Animation, die Londoner Tube-Karte und eine Rolling-Shutter-Animation.

    • SVG begann ursprünglich als offener Konkurrent zu Shockwave/Flash Player und sollte auch als App-Format für PDAs dienen. Es wird erwähnt, dass sogar die Unterstützung für Networking tatsächlich einmal in Betracht gezogen wurde.

    • Die Londoner Tube-Karte ist besonders beeindruckend, weil sie „stufenlose Stationen“ für mobilitätseingeschränkte Fahrgäste wie Rollstuhlnutzer markiert. Beim ersten Missile-Beispiel kam mir sofort die Idee, die Sprengköpfe programmatisch anzuklicken, und ich hatte direkt das Gefühl, die Welt gerettet zu haben.

    • Ich frage mich, warum der erste Missile-Command-Link in Safari nicht richtig funktioniert. Die Buttons lassen sich anklicken, aber Klicks auf die Sprengköpfe reagieren nicht. In Firefox erscheint sogar ein Fadenkreuz-Cursor, aber in Safari scheint genau das nicht zu funktionieren.

    • Die Checkbox-Funktion in der Tube-Karte ist ein wirklich großartiges Detail. Das motiviert mich, meine SVG-Skills weiter auszubauen. Direkt als Lesezeichen gespeichert.

    • Als ich nur den Titel des Artikels gesehen habe, dachte ich zuerst, es ginge um ein Tool, das den Hash einer README-Datei visuell darstellt. Aber ich hoffe, dass so eine Art Visualisierung Nutzern helfen könnte, unauffällige Änderungen an TOS oder EULAs leichter zu erkennen.

  • Ich habe einmal daran gearbeitet, ein animiertes SVG in eine README einzubetten, das einmal täglich Wetter- und Wochentagsinformationen aktualisiert. Referenz. Tatsächlich war das ein Projekt, das ich vor einigen Jahren während einer Jury-Pflichtphase gebaut habe.

  • Wenn das Ziel eine GitHub-README ist, kann man auch direkt Videos einbetten. Als Beispiel wurde die git-recent README verlinkt. Wenn es aber nur um eine einfache Terminal-Aufzeichnung geht, könnte der SVG-Ansatz des OP die klügere Wahl sein.

    • Der Vorteil von Videos ist, dass sie Play/Pause- und Slider-UI mitbringen. Manche Plattformen ergänzen auch bei GIFs per JavaScript Steuer-UI, aber dass Browser das nicht nativ unterstützen, bleibt eine Einschränkung. Deshalb bevorzuge ich oft Videos. Bei SVG-Animationen für RevealJS steuere ich bei Bedarf per CSS/JS nach.

    • Wenn man eine Videodatei hinzufügt, ist es für die Repository-Größe auch besser, die README direkt auf GitHub zu bearbeiten, damit die hochgeladene Datei bei githubusercontent gespeichert wird.

    • SVG unterscheidet sich von Videos dadurch, dass Farben auf Helligkeits-/Dunkelheits-Einstellungen des Nutzers reagieren können. Außerdem ist SVG responsiv in der Größe, was bei Videos nicht möglich ist. Dazu gibt es eine passende Demo. Allerdings funktioniert auch das zwar gut in Firefox/Chrome, in Safari ist die Umsetzung weiterhin schwierig, was schade ist.

    • Schön, Paul mal wieder erwähnt zu sehen; ich habe seine frühere Arbeit mit Echo Nest und der Rdio API sehr gemocht.

    • Meiner Meinung nach ist der SVG-Ansatz für Terminal-Aufzeichnungen wegen fehlender Bedienmöglichkeiten praktisch weniger nützlich. Für sehr kurze Bewegungs-Erklärungen von vielleicht fünf Sekunden als Software-Demo kann das gut sein, aber je nach Bedarf kann Video trotzdem die bessere Wahl sein.

  • Dass man direkt aus der Animation Text kopieren kann, ist weniger intuitiv, als man erwarten würde, aber vielleicht die coolste Eigenschaft überhaupt.

    • Noch spannender wäre es, wenn die Animation bei Mouseover pausieren könnte. Wenn das Terminal aber scrollt, wird Copy/Paste zu einer zusätzlichen Herausforderung und verliert etwas an Nutzen.

  • Als Warnung: Es gibt Bugs, bei denen bestimmte SVG-Dateien eine Seite zum Einfrieren bringen können. Deshalb sollte man keine SVGs von Drittanbietern einbetten. Weder Google Chrome noch Firefox planen offenbar, diesen Bug zu beheben. Ein gefährliches SVG-Testbeispiel wurde ebenfalls verlinkt, mit dem Hinweis, dass ein Klick den Browser abstürzen lassen kann.

    • Dass eine Seite oder ein Browser einfriert, ist eher kein Security-Problem, sondern ein allgemeines Phänomen, das auch durch Missbrauch verschiedener eingebauter Funktionen entstehen kann. Ein Beispiel wären lange Blur-Filter-Ketten, die so viel Render-Last verursachen, dass Chrome selbst einfriert. Wenn sich der Effekt über den Tab hinaus auswirkt, wäre das natürlich problematischer, aber grundsätzlich wirkt es eher wie ein UI-/Usability-Problem.

    • Es wurde die Frage aufgeworfen, ob solche SVG-bezogenen Schwachstellen, etwa XXE-Angriffe, auch in eingeschränkten Umgebungen wie einer GitHub-README möglich sind. Falls ja, wäre interessant, wie GitHub das verhindert.

  • Die Erkenntnis, dass „SVG im Grunde Animation ist“, fühlt sich sehr frisch an und bringt mich auf allerlei Ideen. Ich frage mich, ob unendliche Wiederholungen möglich sind.

    • Beim <animate>-Tag kann man repeatCount oder repeatDur auf indefinite setzen, um unendlich zu wiederholen. Da die Wiederholung eigenschaftsbasiert ist, können sich einzelne Elemente des Bildes jeweils mit unterschiedlichen Zyklen bewegen.

    • Beispielcode dazu findet sich in der offiziellen SVG-Animationsdokumentation.

    • Es wird außerdem erwähnt, dass SVG neben attributbasierter Animation auch Ecmascript (JavaScript) einbetten kann, sodass man bei Bedarf per Script praktisch jede gewünschte Funktion ergänzen kann. Siehe die W3C-Dokumentation zu Scripts.

    • Ebenfalls geteilt wurde Beispielcode und Beispiele für SVG-Animation. Einige davon sind nach einem Neuladen der Seite zu sehen.

  • Ich träume von einem System, in dem man eines Tages im Browserstandard beliebige Laufzeit-Engines wie WASM, JVM oder CLR einstecken kann und die Ausgabe dann SVG (Text/Binär) ist. Entwickler könnten dann Ausführungsmodell und View frei kombinieren, ohne an das DOM gebunden zu sein — das wäre eine echte Innovation für die Zukunft.

    • Apps wie AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web und Flutter for Web (CanvasKit) kommen diesem Ansatz schon recht nahe, indem sie das DOM umgehen oder andere Rendering-Engines verwenden. Mit anderen Worten: Wir leben nicht mehr in einer Zeit, in der ausschließlich das DOM erzwungen wird.

    • Früher wurde das Web von Drittanbieter-Runtimes wie Flash, Java, Silverlight und ActiveX dominiert, aber heute sehe ich große Vorteile in einer gemeinsamen Sprach-/Plattformumgebung. In einem Umfeld mit hohen Sicherheitsanforderungen hätten Zusatztechnologien alter Art ohnehin kaum noch Überlebenschancen.

    • Der Vorteil des DOM (HTML) liegt darin, dass es für verschiedenste Anzeigeumgebungen responsiv gestaltet ist. SVG bietet in dieser Hinsicht weniger Freiheiten.

  • Es mag ziemlich schräg klingen, aber ich habe Lust, ein SVG-Architekturdiagramm zu animieren und daraus ein Video zu machen, in dem die Knoten mit dramatischen Effekten inszeniert werden — etwa wie in einer Kampfanimation mit Zooms, Freeze-Frames und aufblitzenden Linien.

  • Solche TIL-artigen Posts tragen enorm dazu bei, Kreativität anzuregen, weil sie neue Tools aus eigener Erfahrung vorstellen und sogar Wege zeigen, die Einschränkungen von GitHub Markdown zu umgehen. Als ich das SVG-Ergebnis (Beispiel) gesehen habe, war es für mich neu und erfrischend, dass Inline-SVG darin nochmals verschachteltes Inline-SVG enthält. Danke für diesen Denkanstoß.

    • Theoretisch könnte man sogar ein Quine-SVG bauen, das animiert, wie es seinen eigenen Sourcecode in einen Editor eintippt.

  • Wirklich eine tolle Idee. Ich würde gern in einer README testen, wie sich das mit den Effekten aus terminaltexteffects kombinieren lässt. Ich kenne mich mit SVG nicht besonders gut aus, aber mir ist klar, dass es ziemlich große Dateien werden könnte, wenn tatsächlich echter Text gespeichert wird. Trotzdem hätte ich Lust, das einfach zum Spaß auszuprobieren.