Edit Interactive SVG 1.2

Posté par  . Édité par Ysabeau, Benoît Sibaud et Pierre Jarillon. Modéré par Benoît Sibaud. Licence CC By‑SA.
21
24
mai
2021
Graphisme/photo

Edit Interactive SVG est un logiciel libre qui permet de créer des illustrations interactives au format SVG. Il était initialement (2018) voué à l’éducation mais peut se destiner à un public bien plus large.

Une présentation de l’objectif du logiciel et deux exemples Campement paléolithique et Organes du corps humain sont visibles pour se faire rapidement une idée. Et la version en ligne permet de tester directement sans installation.

Intro

L’éditeur de SVG Interactif prenait la poussière et j’ai fini par prendre le temps nécessaire pour lui redonner un petit coup de jeune.

Pour celles et ceux qui suivent un peu le projet, nous arrivons à la version 1.2 qui suit la 1.1.

Cette version m’a permis de répondre a des besoins exprimés depuis sa version 1.0 donc trois ans d’attente.

  • Rajouter des contenus multimédia directement dans les commentaires.
    Il était déjà possible de rajouter des images (PNG, GIF, JPG), il est désormais possible de compléter avec des vidéos, des sons ou de la musique.
    Néanmoins, j’encourage à utiliser cette fonctionnalité avec parcimonie car elle implique d’encapsuler l’ensemble dans un seul fichier et sous une forme textuelle (base64) et par conséquent un tiers plus volumineux.

  • Pouvoir gérer un historique de modification ce qui inclut l’ajout des boutons « annuler/restaurer » et la possibilité de naviguer sur l’ensemble des modifications effectuées.
    Cette partie, pas foncièrement la plus demandée, mais nécessaire à mon sens, m’a donné le plus de fil à retordre pour adapter le code actuel et éviter des régressions.
    Je mentirais en disant que tout a été testé dans ce domaine et marche parfaitement tellement les cas d’utilisation peuvent être sournois.

  • La possibilité de remplacer le fichier SVG source sans perdre les méta-données liées au logiciel : indices, titres, commentaires, zoom, etc.
    C’était confus auparavant : j’ai donc distingué « ajout » et « remplacement ».

Sous le capot

Stabilité et refactoring : je l’avais exprimé dans la version 1.1, il devenait difficile de retoucher au code sans effet sur sa stabilité.
Des tests automatisés ont été rajoutés et le logiciel  a été découpé en une arborescence de fichiers bien plus digeste à la relecture.
Ce dernier oblige désormais un « make build » après toute édition mais c’est un mal pour un bien et une fois mis en place, le logiciel gagne en qualité et en lisibilité.

Correctifs divers : comme ça cela faisait un moment que je n’avais pas touché au code, j’ai revu pas mal de petits détails sur l’aspect graphique mais aussi des petits bugs subtils.
Je ne me suis pas concentré à les lister, mais je peux juste dire qu’ils étaient nombreux.

Vous souhaitez l’utiliser

Les sources restent disponibles sur GitHub.
Pour debian/ubuntu, le PPA a été mis à jour.

Pour les plus pressés d’entre vous, j’ai mis à jour également la version en ligne.

Que nous réserve une nouvelle version

Ce projet a été initié il y a quatre ans et fait ce qu’on lui demande sans forcément de nouvelles évolutions.
Je suis allé bien plus loin que ce que j’envisageais pour ce soft et en suis donc satisfait.
J’ai d’autres projets en tête (et en cours) et il me parait malhonnête d’annoncer de futures évolutions alors que je sais d’avance que je n’y accorderais que peu de temps.
Pour l’instant, je préfère dire que je vais maintenir le code à son strict nécessaire : corrections de bugs inévitables.

Si vraiment je repartais sur le projet, voici les axes que je donnerais :

  • un nouveau nom, de nouvelles technologies et une nouvelle identité graphique : un des objectifs était de me débarrasser de pas mal de bibliothèques telles que jquery, bootstrap, etc. ;
    force est de constater que repartir de zéro sera bien plus bénéfique que tendre vers ce point itérativement ;

  • une appli serveur avec toutes les améliorations que ça implique : stockage, compte utilisateur, ajax, etc. ;

  • réfléchir Progressive Web App : pouvoir installer l’éditeur comme une appli mobile ou tablette ;

  • plus de contenus : de nouveaux exemples (toute contribution est bienvenue) ;

  • rajouter des images (PNG, JPG) à l’ouverture (ou glissé-déposé) d’un nouveau fichier :
    un peu bizarre quand on parle d’éditeur interactif de SVG, mais je pense que le commun des mortels ne fait pas foncièrement la différence. Si son fichier est matriciel mais avec une définition suffisante, l’intérêt d’ajouter une étape pour le convertir en SVG me parait faible ;

  • l’amélioration de certaines parties techniques :

    • ajout d’une barre de progression sur l’importation de fichiers lourds ;
    • optimiser davantage le CSS/JS (minification, concaténation) ;
    • quelques retouches visuelles (checkbox non natives) ;
    • la possibilité d’utiliser des images au format Avif (voir webp) ;
    • la possibilité de minifier à la volée les fichiers importés et exportés ;
    • conserver l’historique des modifications dans le fichier de travail (en HTML) : lié au passage au tout serveur.

Aller plus loin

  • # Version en ligne

    Posté par  . Évalué à 6.

    Bonjour,

    Merci pour maintenir et faire évoluer ce projet. J'ai essayé la version en ligne et je n'ai pas réussi à faire de nouveau projet : en cliquant sur le bouton "new", la fenêtre de confirmation et caché par la fenêtre de choix de fichier.

    Et il y a une coquille en anglais : "Would you like to create a new project ? Attention : all active stuff will be erase." A mon avis, "erase" s'écrit avec un "d", "erased".

    Salutations

    • [^] # Re: Version en ligne

      Posté par  . Évalué à 7.

      Pour commencer un projet : il faut soit choisir un fichier au centre de l'écran soit glisser un fichier dans la zone dédié.
      Le bouton "new" sert quand à lui uniquement quand un projet est déjà en cours. (et c'est d'ailleurs pour ça qu'il est grisé)
      J'ai ajouté ce bouton dans la 1.2 car :
      1. il y avait confusion avec le bouton "update" qui lui permet de ne changer que le fichier source sans le contenu enrichies (indices, titres, commentaires, zoom)
      2. la procédure pour recharger un projet dans les versions précédentes étaient de supprimer le projet puis d'en réimporter un mais j'ai eu plusieurs retours d'utilisateurs qui trouvaient ça contre-intuitif.

      J'ai hésité à le rendre invisible plutôt que grisé (mais ça risque d'être un peu contraire aux autres fonctionnements du soft)
      Si quelqu'un a une autre idée, je suis preneur.

      Merci pour la coquille.
      Il y en a sans doute d'autres ou et des formulations malheureuses aussi bien en anglais qu'en français.
      J'avoue avoir du mal à me concentrer suffisamment sur cet aspect pourtant crucial.

      • [^] # Re: Version en ligne

        Posté par  . Évalué à 7.

        Merci pour tes précisions. Mon commentaire est issu de l'approche naïve, c'est à dire sans connaissance préalable du logiciel et de son fonctionnement précis et sans avoir lu le manuel. Ton explication est donc bienvenue.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.