SVG allein reicht

• SVG ist ein einfaches, XML-basiertes Vektorformat, das auf fast allen Plattformen unterstützt wird und mit eingebetteten Skripten interaktive Visualisierungen umsetzen kann
• Ein vor 20 Jahren für die Myzel-Netzwerk-Forschung erstelltes SVG-Visualisierungstool funktioniert auch heute noch fehlerfrei in modernen Browsern, was die Beständigkeit des Formats belegt
• Mit einer einzelnen autarken SVG-Datei können Datenladen, Verarbeitung, Visualisierung und Interaktion vollständig clientseitig durchgeführt werden
• Im Zusammenhang mit Anils vier P (Permanence, Provenance, Permission, Placement) werden die Eigenschaften von SVG bezüglich Persistenz, Versionsverwaltungskompatibilität, Berechtigungsmodell und räumlicher Ausdruckskraft hervorgehoben
• Durch die gestiegene Rechenleistung moderner Browser wird es möglich, die gesamte Datenanalyse-Pipeline innerhalb von SVG umzusetzen, was für ein Werkzeug zur Verbesserung von Forschungsfreigabe und Reproduzierbarkeit wichtig ist

---

Das Potenzial von SVG und das Ideal wissenschaftlicher Publikationen

• SVG ist ein einfaches XML-Vektorformat, das auf allen Geräten scharf angezeigt wird und die Erstellung von interaktiven Inhalten durch eingebettete Skripte ermöglicht
  • Eine leistungsfähige Funktion, die den meisten Nutzenden nicht bewusst ist, die aber deutlich stärker genutzt werden kann
• Das Ideal wird formuliert, dass wissenschaftliche Fachartikel ein vollständiges interaktives Umfeld bereitstellen sollten, das Datenerkundung und Reproduzierbarkeit von Experimenten unterstützt
  • Manche Experimente sind kurzfristig nicht reproduzierbar, weil Zeit und Kosten entgegenstehen; in der Informatik sind sie jedoch gut umsetzbar

Wiederentdeckung eines vor 20 Jahren entwickelten SVG-Visualisierungstools

• Während meiner Postdoc-Zeit an der Plant Science an der Universität Cambridge wurde ein SVG-basiertes Visualisierungstool für die Synergieforschung an Myzel-Netzwerken entwickelt
  • Es war dafür ausgelegt, Myzel-Netzwerkdaten zu erkunden, die in echten Petrischalen gewachsen sind
• Als ich das SVG kürzlich erneut ausführteste, zeigte sich, dass der Code, der damals Firefox 1.5 oder das Adobe SVG-Plugin erforderte, in den neuesten Browsern perfekt funktioniert
  • Das ist ein Beleg für die langfristige Kompatibilität und Stabilität des SVG-Formats

Struktur einer vollständig autarken SVG

• Mit einer einzelnen SVG-Datei lässt sich das Laden, Verarbeiten, Visualisieren und die Interaktion vollständig abbilden
  • Daten können entweder aus einem externen Versionsspeicher geladen oder direkt innerhalb der Datei eingebettet werden
  • Alle Berechnungen laufen im Client-Browser; serverseitige Logik ist nicht erforderlich
  • Eine einfache Bereitstellung und gemeinsame Nutzung ist über einen statischen Webserver möglich

Verknüpfung mit Anils „vier P“

• Permanence: SVG kann wie ein wissenschaftlicher Artikel oder Datensatz mit einer DOI ausgestattet werden; dass eine 20 Jahre alte Datei immer noch läuft, unterstreicht das
• Provenance: SVG ist textbasiert und damit mit Versionsverwaltungssystemen wie Git kompatibel; bei externer Datennutzung können dieselben Rückverfolgbarkeitsstrategien gelten
• Permission: Daten und Verarbeitungslogik sind getrennt, daher lassen sich dieselben Berechtigungsmodelle wie bei normalen Daten anwenden
• Placement: SVG besitzt von Natur aus räumliche Darstellung; die Erstellung beispielsweise einer Weltkartenvisualisierung ist damit gut möglich

Verbessern Rechenleistung moderner Browser und neue Möglichkeiten

• Das vor 20 Jahren erstellte SVG war zunächst ein einfaches Visualisierungstool, doch durch die gestiegene Rechenleistung moderner Browser lässt sich heute die gesamte Datenanalyse-Pipeline innerhalb von SVG implementieren
  • Selbst bei so leichter Rechenlast, dass der Laptop-Lüfter nicht hochdreht, ist das machbar

SVG im Umfeld der Forschungsteilung

• Neben Jupyter Notebooks, Marimo notebooks, der Kombination aus slipshow/x-ocaml, Forester und persönlichen Notebook-Projekten
  • wird SVG als Werkzeug hinzugefügt, das einfaches Teilen und Zusammensetzen von Forschungsergebnissen unterstützt
• Diese Werkzeuge sind Teil der andauernden Bemühungen, kollaborative und reproduzierbare Forschungsumgebungen aufzubauen

[GN⁺]

Hacker-News-Kommentare

• Es geht hauptsächlich um Visualisierung, aber ich habe früher einmal Software für Tanzchoreografie gebaut.
  Die gesamte UI wurde in SVG gerendert, und das funktionierte überraschend gut.
  Das Projekt heißt StageKeep und wurde ursprünglich mit React Three Fiber erstellt, später aber auf SVG refaktoriert.
  Ich war vom Konzept der Signed Distance Function inspiriert und mochte die Idee atomarer Funktionen, die Eingaben annehmen und SVG ausgeben.
  • Es gab einmal eine Zeit, in der SVG als Ersatz für Flash Aufmerksamkeit bekam.
    Mit SVG + CSS + JavaScript konnte man fast alles umsetzen, was man auch mit Flash machen konnte, aber es fehlten gute Authoring-Tools wie bei Flash.
    Am Ende verschwand Flash, und es gab nichts, was seinen Platz vollständig eingenommen hätte.
  • Unten auf der Website steht „Start free tiral“, das ist vermutlich ein Tippfehler von „trial“ :)
  • Als Bühnenregisseur arbeite ich mit Choreografie, und es wäre wirklich großartig, mit so einem Tool Bewegungsabläufe auf der Bühne im Voraus planen zu können.
  • Wirklich ein großartiges Projekt. Ich frage mich, ob auch eine Funktion möglich wäre, die Choreografie mit KI automatisch aus Videos extrahiert.
    Zum Beispiel, indem man Choreografien aus Videos von Project21 oder Avantgardey analysiert und importiert.
  • Ich frage mich, ob du selbst tanzt.
• Ich habe einmal die Nachteile von SVG zusammengestellt.
  • Kein Textumbruch
  • Keine Einbettung von Font-Glyphen — wenn der Nutzer die Schrift nicht hat, ist der Text nicht lesbar.
  • Browser unterscheiden sich bei unterstützten Versionen und Funktionen.
  • Es kann JS oder externe Ressourcen enthalten, weshalb es sich nur schwer in sicherheitsisolierten Umgebungen anzeigen lässt.
    Eine mögliche Lösung ist, zwei Versionen bereitzuhalten: ein Quell-SVG für Inkscape und ein Distributions-SVG, bei dem der Text in Kurven umgewandelt wurde.
  • Es gibt noch viele andere Probleme.
    Das Rendering unterscheidet sich zwischen Browsern, wodurch konsistente Ergebnisse schwer zu erzielen sind, und bei komplexen SVGs sind Speicherlecks oder langsame Rendering-Geschwindigkeit gravierend.
    Außer Inkscape gibt es unter Linux kaum brauchbare Editoren.
    Trotzdem nutze ich weiterhin SVG, weil es keine echte Alternative gibt, versuche es aber so einfach wie möglich zu halten.
  • Wenn man HTML mit <foreignObject> einbettet, ist Textumbruch möglich.
    In SVG 2 soll das mit der Eigenschaft inline-size gelöst werden.
    Das Einbetten von Fonts ist bereits über das <font>-Element oder durch Einbindung von WOFF als Data-URI möglich.
    Aber Dinge wie die Kontrolle über Text-Baselines oder Skalierung sind weiterhin unvollständig spezifiziert.
    Verwandte Dokumentation: SVG2 InlineSizeProperty, SVG11 Fonts
  • In Safari kann man mit @font-face innerhalb von <style> base64-kodierte Fonts einbetten.
    Das wird wegen der größeren Dateigröße aber nicht empfohlen.
  • Wenn man Text in Kurven umwandelt, ist er nicht mehr auswählbar.
    In Safari ist Auswahl über das <text>-Element möglich, also ist auch das keine vollständige Lösung.
• Mir gefällt die Vision, dass wissenschaftliche Arbeiten zusammen mit einer interaktiven Umgebung bereitgestellt werden, sodass Leser Daten direkt manipulieren und Experimente reproduzieren können.
  Auch NVIDIAs Illustrated Evo2 Blog war beeindruckend.
  • Das erinnert mich an die CloudSpecs-Arbeit von Kollegen.
    Alle Abbildungen sind mit einer Website verknüpft und lassen sich mit DuckDB + WebR + ggplot im Browser reproduzieren.
    Beispiel: Figure-1-Demo
  • Experimente im Browser erneut auszuführen, scheint nur bei modellierungsbasierter Forschung realistisch zu sein.
    Aber die Idee, Daten aus verschiedenen Blickwinkeln explorierbar zu machen, ist interessant.
  • Es gibt kein wirklich geeignetes Format als Ersatz für SVG.
    PDF hat nur begrenzte interaktive Funktionen, und weder Word noch PDF sind stark bei der Einbettung von Multimedia.
  • Schon allein GIFs oder Videos einbetten zu können, hätte großen Wert.
  • SVG braucht für komplexes Rendering Zeit und passt deshalb nicht besonders gut zu Interaktivität.
    Wenn man nur Vektorgrafiken braucht, könnte auch PostScript eine Alternative sein.
• Vor zwei Jahren habe ich bei der Überarbeitung des Projekts „Spurious Correlations“ einen SVG-Chart-Generator direkt in Python gebaut.
  Die existierenden JS/PHP-Chart-Tools (pCharts, HighCharts usw.) gefielen mir nicht, also habe ich es selbst umgesetzt, und es funktionierte überraschend gut.
  Mit reiner Mathematik lassen sich saubere SVGs erzeugen, und unbegrenzte Skalierbarkeit gibt es gratis dazu.
  • Wenn du ein JS-Chart-Framework suchst, empfehle ich Observable Plot.
    Es stammt vom D3-Macher, ist kompakt und hat eine sehr gute API-Ergonomie.
    Es hat keine Animationen, reicht aber für Diagramme in wissenschaftlichen Arbeiten völlig aus.
  • Schade, dass sich PostScript nicht weiter verbreitet hat.
    In einer anderen Zeitlinie wäre vielleicht PostScript statt HTML oder SVG zum Standard geworden.
  • Dank der Website habe ich es am ersten Tag eines Statistik-Kurses als Beispiel für Scheinkorrelationen verwendet.
  • Ich finde, die Branche sollte die Angst vor dem Motto „Wenn du es selbst baust, wird es scheitern“ ablegen.
• Die erste Distill-Arbeit Augmented RNNs hat mich beeindruckt.
  Sie ist ein Beispiel dafür, minimale Interaktivität mit D3.js auf SVG zu legen; als ich damals zum ersten Mal den Stil von Shan Carter sah, wollte ich seinem Team beitreten.
• Vor 15 Jahren habe ich einen BBQ-Controller gebaut, mit vier Temperatursensoren und einem PID-Regelalgorithmus.
  Über einen eingebetteten HTTP-Server zeigte eine SVG-basierte Web-UI Temperaturdiagramme und Drehregler an, und zusammen mit JS funktionierte das gut.
  • Wirklich ein tolles Projekt. Ich frage mich, ob du davon vielleicht ein Video im Betrieb aufgenommen hast.
• Als Autor möchte ich beim Überarbeiten des Artikels diesmal besonders betonen, dass 20 Jahre altes SVG immer noch funktioniert.
  Anderen Code aus dieser Zeit müsste man meistens anpassen, SVG dagegen nicht.
  • Früher war es wegen der geringen SVG-Kompatibilität zwischen Browsern schwer zu verwenden,
    aber heute läuft selbst 20 Jahre altes SVG in den meisten Browsern problemlos.
• Ich mag SVG, aber Geschwindigkeitsprobleme gibt es weiterhin.
  Bei QR-Codes oder komplexen Karten mit mehr als 100 DOM-Elementen wird es langsam, und auch Animationen sind langsamer als mit canvas oder Lottie.
  • Ich habe einmal eine Schach-Engine in ein Schachbrett-SVG eingebettet, sodass es automatisch spielte.
    Projektlink
    In einer Kunstinstallation eines Freundes wurden Dutzende solcher Schach-SVGs gleichzeitig projiziert, und die Belastungsgrenze des Browsers war ziemlich niedrig.
  • Ich habe ebenfalls einen Karten-Viewer mit SVG+JS für ein Spiel gebaut, aber als die Objektdichte zunahm, wurde es viel zu langsam, sodass ich am Ende auf canvas umgestiegen bin.
    Dabei habe ich allerdings einen Teil der SVG-Funktionalität verloren.
• Ich frage mich, ob es ein leichtgewichtiges Format ähnlich SVG für 3D gibt.
  Bei der Visualisierung von CAD-Modellen suche ich nach einer Möglichkeit, nur Teiländerungen zu übernehmen, statt jedes Mal die gesamte .step-Datei zu exportieren.
• Früher habe ich bei der Erstellung der Shapeoko-v2-CNC-Montageanleitung SVG verwendet, damit beim Anklicken eines Teils das entsprechende Bauteil in der Zeichnung hervorgehoben wird.
  Beispiellink
  Es wurde mit Inkscape erstellt und funktionierte direkt im Browser.
  • Wirklich eine tolle Umsetzung.