URL: https://linuxfr.org/news/edit-interactive-svg-1-2
Title: Edit Interactive SVG 1.2
Authors: mothsART
 Ysabeau 🧶, Benoît Sibaud et Pierre Jarillon
Date: 2021年05月23日T10:31:46+02:00
License: CC By-SA
Tags: html5, éditeur, svg, sortie_version et edit_interactive_svg
Score: 22
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](https://mothsart.github.io/editeur-svg-interactif.html) et deux exemples [Campement paléolithique](https://mothsart.github.io/labo/frontend/edit_interactive_svg/examples/campement.html) et [Organes du corps humain](https://mothsart.github.io/labo/frontend/edit_interactive_svg/examples/organes.html) sont visibles pour se faire rapidement une idée. Et la [version en ligne](https://mothsart.github.io/labo/frontend/edit_interactive_svg/) permet de tester directement sans installation.
----
[Journal à l’origine de la dépêche](https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-2)
[Journal sur la version 1.1](https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1)
[Journal sur la version 1.0](https://linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif)
----
## 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](https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1).
Cette version m’a permis de répondre a des besoins exprimés depuis sa [version 1.0](https://linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif) 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](https://github.com/mothsART/editInteractiveSVG).
Pour debian/ubuntu, le [PPA a été mis à jour](https://launchpad.net/~jerem-ferry/+archive/ubuntu/app-illustration).
Pour les plus pressés d’entre vous, j’ai mis à jour également la [version en ligne](https://mothsart.github.io/labo/frontend/edit_interactive_svg/).
## 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](https://fr.wikipedia.org/wiki/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. 
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/news/edit-interactive-svg-1-2.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/news/edit-interactive-svg-1-2.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>