Comment modifier des fichiers SVG en ligne dans votre navigateur

Un fichier SVG est un document XML. Il décrit des formes, des tracés et parfois des images matricielles intégrées. Cette nature de texte change la donne quand on veut modifier des fichiers SVG en ligne dans votre navigateur : le fichier peut être relu, corrigé et réenregistré sans installer de logiciel de bureau.

L’Éditeur vectoriel repose sur ce principe. Il ouvre un SVG comme de la géométrie, pas comme une suite de pixels figés. Reste à savoir ce que cela implique au premier lancement, et où s’arrête ce que le navigateur permet.

Ce que l’éditeur ouvre réellement

Trois formats sont annoncés à l’import : SVG, PDF et .ai. Le SVG est le cas le plus simple, parce que le format est un standard public. Le PDF et le .ai passent par le même moteur d’import, et un .ai enregistré avec une représentation compatible PDF se lit mieux qu’un fichier qui ne contient que des données propres à son application d’origine.

Un import réussi ne signifie pas que tout reste éditable. Formes, tracés Bézier, textes, dégradés, calques, opérations booléennes et masques d’écrêtage font partie du modèle d’édition. Les effets dynamiques, les apparences composées et les objets propres à un éditeur de bureau peuvent arriver développés, simplifiés ou perdus.

Le premier lancement, dans l’ordre

Le moteur est une application WebAssembly servie par le site. Le premier lancement déclenche un téléchargement de plusieurs dizaines de mégaoctets ; rien n’est téléchargé avant que vous ne cliquiez sur le bouton de lancement. Comptez ce délai, surtout sur une connexion mobile.

Une séquence qui évite les mauvaises surprises :

1. ouvrez le fichier sans rien modifier ;
2. zoomez sur les zones détaillées et comparez avec un aperçu de référence si vous en avez un ;
3. sélectionnez deux ou trois objets représentatifs et vérifiez qu’ils sont bien des tracés ou du texte ;
4. modifiez un seul élément, puis annulez ;
5. exportez une copie de test avant de commencer le vrai travail.

Cette dernière étape compte plus qu’elle n’en a l’air. La version publiée est décrite comme alpha par le projet amont, ce qui invite à contrôler un export avant de le diffuser plutôt qu’après.

Ce que le redimensionnement révèle

L’intérêt du SVG tient à la séparation entre les coordonnées du dessin et la taille d’affichage. L’attribut viewBox="0 0 24 24" accompagné d’un width="240" donne dix pixels d’affichage par unité utilisateur. Une icône de 24 unités affichée à 2 400 px est agrandie cent fois, et le fichier n’a pas changé d’un octet.

Cela ne signifie pas que tout se comporte comme du vectoriel. Une photo intégrée dans le SVG reste une image matricielle : l’agrandir ne crée pas de détail. Le repère, lui, ne bouge pas, ce qui permet justement de repérer ce type d’objet avant de livrer.

Deux versions du standard cohabitent par ailleurs. SVG 1.1, dans sa seconde édition, est la plus complètement implémentée par les moteurs de rendu ; SVG 2 est un Candidate Recommendation Snapshot, donc encore susceptible de bouger. Un fichier qui s’en tient aux constructions 1.1 s’affiche de façon prévisible dans les navigateurs et les logiciels de mise en page.

Les limites à connaître avant de commencer

Trois points méritent d’être posés d’emblée.

Le premier concerne la typographie non latine. Cette version épinglée n’embarque pas de police arabe : les caractères arabes s’affichent sous forme de rectangles vides. L’interface de l’éditeur n’est pas proposée en arabe non plus. Le latin, le CJK et les emoji ne posent pas ce problème.

Le deuxième concerne les formats. EPS n’est ni importé ni exporté. Si votre chaîne de production repose sur de l’EPS, il faut le convertir en amont.

Le troisième concerne la conservation. Il n’y a pas de compte, pas de sauvegarde automatique, pas de bibliothèque de documents. Enregistrer et exporter passent par le téléchargement du navigateur : autorisez les téléchargements pour le site, sinon l’opération échoue. Fermer l’onglet sans avoir enregistré perd le travail.

Enchaîner sur le reste

Une fois le fichier ouvert et vérifié, la question suivante est celle de la propriété à modifier. Remplissage, contour et opacité sont trois réglages distincts, et les confondre coûte une version : c’est l’objet du guide sur comment modifier les couleurs, le texte et les tracés d’un SVG en ligne.

Si vous hésitez encore sur le conteneur à adopter pour un livrable, SVG, AI ou EPS : quel format vectoriel choisir ? traite la question du point de vue de la portabilité, et non de l’édition. Le hub des guides rassemble le reste du parcours.

Modifier un SVG dans le navigateur tient donc en trois gestes : importer, vérifier la nature des objets, exporter une copie. Le reste est une affaire de discipline sur l’original.