Modifier un fichier SVG : éditeur visuel ou code

Pour modifier un fichier SVG, ouvrez une copie dans un éditeur visuel pour changer formes, couleurs et courbes, ou dans un éditeur de texte pour de petites modifications du balisage. Enregistrez au format SVG, puis rouvrez le fichier pour vérifier le résultat. La bonne méthode dépend de la modification souhaitée et des objets présents dans le fichier.

Avant de choisir une commande plus destructive, identifiez votre sélection. Un groupe, un chemin composé de plusieurs parties et un PNG intégré peuvent tous sembler former un seul objet sur le canevas. Chacun demande une solution différente.

Préparez une copie et identifiez les objets SVG

Il vous faut le fichier SVG, une copie de travail, un éditeur et une visionneuse compatible SVG. Conservez l'original jusqu'à ce que la copie exportée ait passé vos vérifications.

SVG signifie Scalable Vector Graphics. Son balisage XML peut décrire des formes et chemins vectoriels, mais aussi contenir des images intégrées. Un chemin décrit une ligne ou une forme ; un nœud est un point modifiable de ce chemin dans un éditeur vectoriel. L'extension SVG seule ne dit pas si le dessin visible donne accès à ces points.

Ouvrez la copie et inspectez l'objet sélectionné dans le panneau Calques ou Objets. Au besoin, consultez le balisage dans un éditeur de texte. Identifiez le type d'objet avant d'en changer la structure :

L'élément <image> peut référencer du contenu PNG ou JPEG. Ces pixels ne deviennent pas des chemins parce que le fichier qui les contient se termine par .svg. Des bords pixellisés à l'agrandissement sont un indice ; le panneau des objets et la référence à la source donnent un diagnostic plus précis. Certains éditeurs insèrent aussi un SVG vectoriel valide comme un seul objet graphique : une sélection unique prouve donc très peu de choses.

Un chemin composé peut conserver des trous, comme le centre d'un « O ». Le séparer peut modifier ces trous. Consultez le diagnostic des types d'objets SVG lorsque la dissociation est indisponible ou sans effet.

Choisissez un éditeur visuel ou le code

Inkscape est gratuit et open source, fonctionne sur macOS, Windows et Linux et utilise SVG comme format principal. Illustrator convient aussi si vous l'utilisez déjà. Figma peut transférer des éléments entre outils de conception au format SVG, mais ses consignes d'importation excluent les éléments SVG marker et pattern. Vérifiez un import complexe avant de choisir un éditeur.

La procédure documentée de l'éditeur SVG de Canva couvre les modifications simples de couleur et de disposition. Les éditeurs dans le navigateur peuvent convenir aux petites tâches. Vérifiez la prise en charge des remplissages, traits, textes et effets de votre fichier ainsi que les conditions actuelles d'exportation. Pour séparer des remplissages unis compatibles en fichiers alignés par couleur exacte, utilisez le Séparateur de couleurs SVG ; pour remodeler les chemins, utilisez un éditeur vectoriel.

Modifiez les formes visuellement, puis vérifiez l'export

Les noms des commandes varient selon l'éditeur, mais le travail suit cet ordre :

1. Ouvrez la copie de travail. Comparez le dessin importé à l'original. Arrêtez-vous si lettres, motifs ou effets ont déjà changé.
2. Sélectionnez l'objet voulu. Entrez dans un groupe ou dissociez-le uniquement si le panneau l'identifie comme un groupe. Pour un chemin, passez à l'outil de nœuds ou de sélection directe.
3. Effectuez une modification. Changez un remplissage, déplacez une partie ou ajustez quelques nœuds. Lors du redimensionnement, conservez les proportions sauf si l'étirement est volontaire.
4. Vérifiez la zone modifiée. Inspectez courbes et petits espaces de près, puis regardez l'ensemble à la taille prévue.
5. Enregistrez ou exportez un nouveau SVG. Rouvrez-le dans une visionneuse et dans l'application où il sera utilisé. Confirmez la partie modifiée, les dimensions générales et les objets qui doivent rester sélectionnables.

Pour recolorer, distinguez le remplissage, la couleur intérieure d'une forme, du trait, la couleur de son contour. Une même couleur visible peut concerner beaucoup d'objets. La sélection par remplissage identique peut aider, mais vérifiez-la avant de modifier : une autre partie peut partager cette couleur. Le guide de modification des couleurs SVG explique les styles hérités et les couleurs qui refusent de changer.

Conservez un original de travail modifiable si votre éditeur utilise son propre format ou des métadonnées supplémentaires. Les options d'enregistrement SVG d'Adobe comprennent des réglages pour les polices, propriétés CSS, images raster et données de modification Illustrator. Un fichier dont l'apparence est correcte après export peut néanmoins avoir un balisage différent ou du contenu rasterisé. Comparez les objets et points d'accroche requis, pas seulement l'image.

Modifiez le code SVG pour un petit changement maîtrisé

Ouvrez la copie SVG dans VS Code ou un autre éditeur de texte brut. Gardez intacts l'espace de noms, les noms d'éléments et les guillemets. Effectuez une modification et affichez le rendu avant la suivante.

Changez un remplissage sans modifier le chemin

Enregistrez cet exemple sous triangle.svg et ouvrez-le dans une visionneuse compatible SVG :

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Remplacez #3b82f6 par #f97316 dans l'attribut fill du chemin.
2. Enregistrez, puis rouvrez ou actualisez le fichier.
3. Vérifiez que le triangle est orange et que son contour reste identique. Les données d, l'id et la class doivent toujours correspondre à l'original.

Si la couleur ne change pas, inspectez un attribut style, une règle de classe, une couleur héritée ou un trait qui pourrait contrôler l'apparence. Changez la règle responsable plutôt que de remplacer chaque occurrence d'une couleur dans tout le fichier.

Note de méthode : Nous avons rendu cet exemple avant et après le changement de remplissage avec un moteur de rendu SVG et vérifié les pixels obtenus. Le triangle a changé de couleur, tandis que les données du chemin, l'identifiant et la classe sont restés identiques. Ce petit exemple ne teste pas l'import ou l'export d'un SVG complexe dans une application de conception.

Supprimez les marges vides avec viewBox

Le viewBox de la racine contient quatre nombres : x minimum, y minimum, largeur et hauteur. Ils définissent le rectangle de l'espace de coordonnées SVG qui est projeté dans la zone d'affichage.

Dans l'exemple, le triangle occupe x=8 à 40 et y=8 à 40. Remplacez viewBox="0 0 48 48" par viewBox="8 8 32 32" sans toucher aux données du chemin. Enregistrez et affichez de nouveau le rendu. Le triangle occupe maintenant davantage de la même zone de 48 sur 48, car les marges vides ont disparu.

Cette modification change la projection du canevas, pas la géométrie du chemin ni les attributs width et height de la racine. Pour un vrai dessin, prévoyez de la place pour les traits et effets : un cadre serré autour de la géométrie peut les couper. Ajuster visuellement la page ou le plan de travail au dessin, puis inspecter une copie exportée, est souvent plus sûr. Si le fichier est importé à une mauvaise taille physique, suivez le guide des dimensions SVG et de viewBox.

Si le dessin disparaît, est coupé ou étiré, restaurez le viewBox original et vérifiez les quatre valeurs et les proportions. Ne « corrigez » pas un problème de canevas en déplaçant tous les nœuds.

Quand un SVG tracé doit être nettoyé

Une image raster stocke des pixels sur une grille. La vectorisation reconstruit la géométrie à partir de ces pixels ; un fichier tracé peut donc organiser couleurs et contours différemment du dessin original.

Une partie visible peut être répartie entre de petits chemins. Une couleur peut aussi couvrir plusieurs régions séparées. Des nœuds denses, petites taches, formes d'arrière-plan et contours superposés peuvent ralentir une modification simple. Inspectez ces propriétés précises plutôt que de juger le fichier uniquement sur sa netteté à un niveau de zoom.

Structure fragmentée

Structure plus simple

Ces illustrations expliquent l'effort de modification ; ce ne sont ni des échantillons de conversion ni un comparatif de produits mesuré. Si le tracé mérite d'être conservé, réparez les zones concernées et simplifiez uniquement là où le contour reste précis. S'il vient d'une image raster et demande trop de nettoyage, essayez de vectoriser de nouveau l'original. Conservez une géométrie vectorielle native utilisable plutôt que de tracer une capture d'écran de celle-ci.

Comment procéder avec PerfectVector

PerfectVector convient lorsque vous devez créer des chemins à partir d'une image raster, comme un PNG ou JPEG original ou le contenu raster intégré à un SVG. Pour un dessin vectoriel existant à préserver, utilisez les méthodes générales ci-dessus.

Pour votre propre conversion, suivez cet ordre :

1. Importez la source raster et comparez l'aperçu vectoriel. Cherchez les détails manquants, zones indésirables et contours différents de la source.
2. Déverrouillez le résultat avant de modifier ou d'exporter. Conversion et aperçu sont gratuits et illimités ; la politique tarifaire publique actuelle indique qu'un crédit déverrouille chaque résultat unique et que son téléchargement ultérieur est gratuit.
3. Inspectez et modifiez la géométrie déverrouillée. Vérifiez les formes et nœuds nécessaires, ajustez la palette si utile et comparez le résultat modifié à la taille prévue.
4. Exportez et vérifiez dans votre prochaine application. Rouvrez le SVG, sélectionnez les parties voulues et vérifiez dimensions et petits détails. Un aperçu seul ne démontre pas que le fichier est prêt pour tout éditeur, imprimante ou machine de découpe.

Les lettres raster sont reconstruites comme de la géométrie : ne vous attendez pas à obtenir du texte saisi modifiable. Prévoyez une correction manuelle ou un redessin si une lettre importante, une courbe ou un petit espace ne survit pas au tracé.

FAQ

Comment modifier un SVG gratuitement ? Utilisez Inkscape pour la modification visuelle ou un éditeur de texte brut pour le balisage. Les outils dans le navigateur peuvent aussi offrir des fonctions gratuites ; vérifiez leurs conditions actuelles d'export et leur compatibilité avec les fonctions SVG de votre fichier.

Puis-je modifier un SVG dans VS Code ? Oui. Modifiez son balisage XML pour un petit changement de remplissage, les dimensions, viewBox ou les identifiants et classes requis. Enregistrez une copie et affichez ensuite son rendu. Utilisez un éditeur visuel pour remodeler les courbes.

Pourquoi ne puis-je pas sélectionner les formes de mon SVG séparément ? Inspectez le type d'objet. Il peut s'agir d'un groupe, d'un chemin avec plusieurs sous-chemins, d'un dessin découpé ou d'une image intégrée. Entrez dans un vrai groupe ou dissociez-le ; modifiez les nœuds pour la géométrie et vectorisez le raster uniquement si des chemins sont nécessaires.

Puis-je modifier un SVG dans Canva ? La procédure SVG documentée de Canva couvre les modifications simples de couleur et de disposition. Vérifiez le fichier importé et les conditions actuelles de téléchargement SVG. Utilisez un éditeur vectoriel ou le balisage pour des contours précis ou le contrôle des identifiants et classes.

Puis-je modifier un résultat PerfectVector avant de le déverrouiller ? Pour votre conversion, comparez d'abord l'aperçu, puis déverrouillez le résultat avant d'utiliser les commandes de modification et d'export. Inspectez le SVG exporté dans l'application où il sera utilisé.

Sources

1. W3C — Scalable Vector Graphics (SVG) 2 — modèle de document, formes, chemins et styles SVG.
2. W3C — Contenu intégré SVG — des images raster peuvent rester intégrées à un document SVG.
3. W3C — Coordonnées, transformations et unités SVG — projection viewBox et différence entre géométrie et dimensions d'affichage.
4. Inkscape — À propos — informations officielles sur les plateformes, le format SVG et l'open source.
5. Adobe — Enregistrer une illustration dans Illustrator — réglages d'export SVG et données de modification Illustrator conservées.
6. Figma — Copier des éléments entre outils de conception — transfert SVG et limites d'import des marqueurs et motifs.
7. Canva — Éditeur SVG — procédure documentée pour couleur, taille et disposition simples.
8. PerfectVector — Politique tarifaire — conditions actuelles d'aperçu, déverrouillage et téléchargement ultérieur.

Conservez un SVG utilisable et modifiez sa géométrie existante. Si votre source est raster ou si son tracé doit être remplacé, essayez votre image originale dans PerfectVector, comparez l'aperçu à la source, déverrouillez avant de modifier et inspectez les formes et dimensions exportées dans votre prochaine application.