Un SVG suffit

• SVG est un format de graphique vectoriel basé sur l’XML, simple et pris en charge par pratiquement toutes les plateformes, et permet d’intégrer des scripts pour créer des visualisations interactives.
• Une ancienne visualisation SVG conçue il y a 20 ans dans le cadre de recherches sur les réseaux mycéliens montre qu’elle fonctionne toujours parfaitement sur les navigateurs modernes, démontrant ainsi la pérennité du format.
• Avec un seul fichier SVG autonome, il est possible d’effectuer le chargement, le traitement, la visualisation et l’interaction des données entièrement côté client.
• En lien avec le concept des « quatre P » d’Anil (Permanence, Provenance, Permission, Placement), cette approche met l’accent sur la durabilité du SVG, la compatibilité de gestion de versions, la séparation des permissions et son expression spatiale.
• Grâce à la puissance de calcul accrue des navigateurs modernes, il devient possible d’implémenter l’ensemble du pipeline d’analyse de données au sein d’un SVG, ce qui est crucial pour améliorer le partage de la recherche et la reproductibilité.

---

Potentiel du SVG et idéal de la publication scientifique

• SVG est un format de graphique vectoriel simple basé sur XML, affiché nettement sur tous les appareils, et permet d’intégrer des scripts pour créer des contenus interactifs.
  • Il dispose de capacités puissantes que la plupart des utilisateurs ne perçoivent pas, et qu’il serait possible d’exploiter plus activement.
• Il défend l’idéal selon lequel un article scientifique devrait offrir un environnement totalement interactif capable de soutenir l’exploration des données et la reproductibilité des expériences.
  • Certaines expériences sont difficiles à reproduire immédiatement pour des raisons de coûts et de temps, mais dans le domaine de l’informatique, elles sont souvent tout à fait réalisables.

Redécouverte d’un outil de visualisation SVG d’il y a 20 ans

• Pendant mon postdoctorat au département de sciences végétales de Cambridge, j’ai développé un outil de visualisation basé sur SVG pour l’étude de la synergie des réseaux mycéliens.
  • Il était conçu pour explorer les données des réseaux mycéliens cultivés dans de vrais boîtes de Pétri.
• En le relançant récemment, le code du SVG qui, à l’époque, réclamait Firefox 1.5 ou le plugin Adobe SVG fonctionne parfaitement encore sur les navigateurs modernes.
  • C’est une preuve de la compatibilité à long terme et de la stabilité du format SVG.

Structure d’un SVG entièrement autonome

• Un seul fichier SVG peut assurer le chargement, le traitement, la visualisation et l’interaction des données.
  • Les données peuvent être récupérées à partir d’un dépôt de versions externe ou être directement incluses dans le fichier.
  • Toutes les opérations sont exécutées dans le navigateur côté client, sans logique côté serveur nécessaire.
  • Il peut être déployé et partagé facilement avec un serveur web statique.

Lien avec les « quatre P » d’Anil

• Permanence (pérennité) : le SVG peut recevoir un DOI, comme un article ou un jeu de données, et le fait qu’un fichier créé il y a 20 ans fonctionne toujours en est la preuve.
• Provenance (provenance) : le SVG étant basé sur du texte, il est compatible avec les systèmes de gestion de versions comme Git, et la même stratégie de traçabilité peut être appliquée lorsqu’on utilise des données externes.
• Permission (permission) : les données et la logique de traitement étant séparées, il est possible d’appliquer au SVG le même modèle de permissions que pour des données ordinaires.
• Placement (emplacement) : le SVG a une représentation spatiale intrinsèque, et la création de visualisations de cartes du monde y est par exemple facile.

Amélioration de la puissance de calcul des navigateurs et nouvelles possibilités

• Le SVG créé il y a 20 ans n’était qu’un simple outil de visualisation, mais avec l’augmentation de la puissance de calcul des navigateurs modernes, il est désormais possible d’implémenter l’ensemble de la pipeline d’analyse de données directement dans un SVG.
  • Il suffit d’opérations légères qui ne font pas tourner le ventilateur d’un ordinateur portable.

Le SVG dans l’écosystème du partage de la recherche

• Aux côtés de Jupyter Notebooks, Marimo botebooks, slipshow/x-ocaml, Forester, et de projets de notebook personnels, entre autres,
  • le SVG est ajouté comme un outil qui facilite le partage et la réutilisation des résultats de recherche.
• Ces outils font partie d’efforts continus visant à construire un environnement de recherche collaboratif et reproductible.

[GN⁺]

Réactions sur Hacker News

• Le sujet principal porte sur la visualisation, mais j’ai autrefois créé un logiciel de chorégraphie de danse
  Toute l’interface était rendue en SVG, et ça fonctionnait étonnamment bien
  Le projet s’appelle StageKeep ; il avait d’abord été conçu avec React Three Fiber avant d’être refactorisé en SVG
  J’étais inspiré par le concept de Signed Distance Function, et j’aimais l’idée de fonctions atomiques qui prennent une entrée pour produire du SVG
  • Il fut un temps où le SVG était présenté comme un remplaçant de Flash
    Avec SVG + CSS + JavaScript, on pouvait recréer presque tout ce qu’on faisait avec Flash, mais sans de bons outils de création comparables à ceux de Flash
    Au final, Flash a disparu, et rien ne l’a vraiment remplacé complètement
  • En bas du site, il est écrit « Start free tiral » ; c’est probablement une faute de frappe pour « trial » :)
  • En tant que metteur en scène travaillant avec la chorégraphie, ce serait vraiment formidable de pouvoir planifier à l’avance les déplacements sur scène avec ce type d’outil
  • Projet vraiment impressionnant. Je me demande s’il serait aussi possible d’ajouter une fonction d’extraction automatique de chorégraphie à partir d’une vidéo via l’IA
    Par exemple, en analysant et important la chorégraphie depuis des vidéos de Project21 ou d’Avantgardey
  • Je me demande aussi si vous dansez vous-même
• J’ai essayé de résumer les inconvénients du SVG
  • Pas de retour à la ligne pour le texte
  • Impossible d’intégrer les glyphes de police — si l’utilisateur n’a pas la police, le texte peut devenir illisible
  • Les versions et fonctionnalités prises en charge diffèrent selon les navigateurs
  • Comme on peut y inclure du JS ou des ressources externes, c’est difficile à afficher dans un environnement isolé pour des raisons de sécurité
    Une solution consiste à proposer deux versions : un SVG source pour Inkscape et un SVG de distribution où le texte a été converti en courbes
  • Il y a aussi beaucoup d’autres problèmes
    Le rendu varie d’un navigateur à l’autre, ce qui rend les résultats cohérents difficiles à obtenir, et les SVG complexes souffrent fortement de fuites mémoire ou de ralentissements de rendu
    En dehors d’Inkscape, il n’y a quasiment pas d’éditeur vraiment utilisable sur Linux
    Malgré tout, faute d’alternative, j’utilise encore le SVG, mais j’essaie de le garder aussi simple que possible
  • En intégrant du HTML avec <foreignObject>, on peut tout de même obtenir le retour à la ligne du texte
    Dans SVG 2, cela devrait être résolu via la propriété inline-size
    L’intégration des polices existe déjà, soit avec l’élément <font>, soit en incluant du WOFF en data URI
    Mais des aspects comme la ligne de base du texte ou le contrôle du redimensionnement restent des spécifications incomplètes
    Documentation associée : SVG2 InlineSizeProperty, SVG11 Fonts
  • Dans Safari, on peut intégrer des polices encodées en base64 via @font-face dans <style>
    Mais ce n’est pas recommandé, car cela augmente fortement la taille du fichier
  • Si on convertit le texte en courbes, on perd la possibilité de le sélectionner
    Dans Safari, la sélection reste possible avec l’élément <text>, donc aucune des deux approches n’est une solution parfaite
• J’aime la vision d’articles scientifiques fournis avec un environnement interactif, permettant au lecteur de manipuler lui-même les données et de reproduire les expériences
  Le blog NVIDIA Illustrated Evo2 m’a aussi beaucoup marqué
  • Cela me rappelle l’article CloudSpecs publié par des collègues
    Toutes les figures sont liées à un site web et reproductibles dans le navigateur avec DuckDB + WebR + ggplot
    Exemple : démo de la figure 1
  • Relancer les expériences dans le navigateur semble surtout possible pour la recherche fondée sur la modélisation
    En revanche, permettre d’explorer les données sous différents angles est une idée intéressante
  • Il n’existe pas vraiment de format évident à utiliser à la place du SVG
    Le PDF est limité en matière d’interactivité, et ni Word ni PDF ne sont très bons pour embarquer du multimédia
  • Pouvoir au moins insérer des GIF ou des vidéos aurait déjà beaucoup de valeur
  • Le SVG prend du temps à rendre lorsqu’il devient complexe, donc il ne se prête pas très bien à l’interactivité
    Si l’on n’a besoin que de graphismes vectoriels, PostScript peut aussi être une alternative
• Il y a deux ans, en refaisant le projet « Spurious Correlations », j’ai créé mon propre générateur de graphiques SVG en Python
  Les outils de graphiques JS/PHP existants (pCharts, HighCharts, etc.) ne me convenaient pas, donc je l’ai fait moi-même, et cela a étonnamment bien marché
  Avec uniquement des maths, on peut produire des SVG propres, avec en prime une extensibilité infinie
  • Si vous cherchez un framework de graphiques JS, je recommande Observable Plot
    C’est un outil créé par l’auteur de D3, concis et doté d’une excellente ergonomie d’API
    Il n’y a pas d’animation, mais pour des graphiques destinés à des articles scientifiques, c’est largement suffisant
  • C’est dommage que Postscript ne se soit pas imposé plus largement
    Dans une autre ligne temporelle, Postscript serait peut-être devenu le standard à la place de HTML ou SVG
  • Grâce au site, je l’ai utilisé le premier jour de mon cours de statistiques comme exemple de corrélation trompeuse
  • Je pense que le secteur devrait abandonner cette peur de « tout casser si on le fait soi-même »
• Le premier article de Distill, Augmented RNNs, m’a beaucoup impressionné
  C’est un exemple où l’on ajoute un minimum d’interaction avec D3.js au-dessus de SVG, et c’est en découvrant pour la première fois le style de Shan Carter que j’ai eu envie de rejoindre son équipe
• Il y a 15 ans, j’ai construit un contrôleur de barbecue avec 4 capteurs de température et un algorithme de contrôle PID
  Via un serveur HTTP embarqué, il affichait des courbes de température et des cadrans avec une interface web basée sur SVG, et cela fonctionnait bien avec du JS
  • Projet vraiment superbe. Je me demande si vous avez déjà filmé l’appareil en fonctionnement
• En tant qu’auteur, le point que je veux surtout souligner en révisant cet article est le fait qu’un SVG vieux de 20 ans fonctionne encore aujourd’hui
  La plupart des autres morceaux de code écrits à l’époque demandent des corrections, mais le SVG, lui, est resté intact
  • À ses débuts, la compatibilité SVG entre navigateurs était trop faible pour qu’on puisse l’utiliser facilement,
    mais aujourd’hui, même des SVG vieux de 20 ans fonctionnent sans problème sur la plupart des navigateurs
• J’aime le SVG, mais les problèmes de performance persistent
  Dès qu’on dépasse 100 éléments DOM, comme avec des QR codes ou des cartes complexes, cela ralentit, et l’animation est aussi plus lente qu’avec canvas ou Lottie
  • J’ai déjà embarqué un moteur d’échecs dans un SVG d’échiquier pour qu’il joue automatiquement
    Lien du projet
    Des dizaines de ces SVG d’échecs étaient projetés simultanément dans l’installation artistique d’un ami, et la limite de ce qu’un navigateur pouvait encaisser s’est révélée assez basse
  • Moi aussi, j’ai créé un visualiseur de carte en SVG+JS pour un jeu, mais dès que la densité d’objets augmentait, cela devenait beaucoup trop lent, donc je suis finalement passé à canvas
    En revanche, j’y ai perdu certaines fonctionnalités propres au SVG
• Je me demande s’il existe un format léger proche du SVG pour la 3D
  Quand on visualise des modèles CAD, je cherche un moyen de ne refléter que des modifications partielles sans exporter l’intégralité du fichier .step
• Autrefois, en réalisant le manuel d’assemblage du Shapeoko v2 CNC, j’avais utilisé du SVG pour que la pièce correspondante dans le dessin soit mise en évidence lorsque l’utilisateur cliquait sur une pièce
  Lien d’exemple
  C’était fait avec Inkscape, et cela fonctionnait directement dans le navigateur
  • Très belle réalisation