Comment modifier un SVG (et pourquoi un fichier propre est tellement plus simple)

Il existe deux façons de modifier un SVG. Vous pouvez l'ouvrir dans un éditeur visuel et cliquer sur les formes pour les recolorer, les redimensionner ou les déplacer, ou ouvrir le code et le modifier à la main, car un SVG n'est au fond qu'un fichier texte. La plupart des gens veulent suivre la première méthode, souvent pour changer une couleur ou redimensionner une icône, et un éditeur visuel gère cela en quelques secondes.

Ce que les tutoriels ne disent presque jamais : la facilité de ces modifications dépend de la manière dont le SVG a été créé. Un fichier propre, composé de quelques formes bien organisées, se modifie en quelques secondes. Un fichier brouillon, comme ceux que génère parfois un convertisseur rapide, peut contenir des milliers de points parasites et une même couleur divisée en centaines de fragments ; à ce moment-là, "il suffit de cliquer sur la forme et de la recolorer" ne fonctionne plus. Ce guide couvre les deux méthodes de modification, ainsi que la façon de reconnaître le type de fichier que vous avez entre les mains.

La version rapide

• Deux façons de modifier : visuellement dans un éditeur (recolorer, redimensionner, remodeler) ou directement dans le code SVG (ce n'est que du texte).
• Éditeur visuel gratuit : Inkscape. Pro : Illustrator. Dans le navigateur : Figma ou un éditeur SVG en ligne gratuit. Code : VS Code ou n'importe quel éditeur de texte.
• La tâche la plus courante, changer les couleurs : sélectionnez une forme, changez son remplissage. Rapide sur un fichier propre, pénible sur un fichier fragmenté.
• Modifiez le code quand vous devez conserver les noms de classes et les ID, changer le viewBox, ou faire une retouche rapide sans ouvrir d'application.
• Si vous ne pouvez pas sélectionner la forme voulue, le problème vient du fichier, pas de l'éditeur. Une conversion plus propre est souvent la vraie solution.

D'abord, que contient réellement un SVG ?

Un SVG est modifiable grâce à sa nature même : c'est un ensemble de formes décrites par des mathématiques, écrit en texte brut (plus précisément en XML). Un cercle est stocké sous forme de centre et de rayon, un logo sous forme d'une série de tracés, chacun avec sa propre couleur de remplissage. (Voici l'explication complète si les vecteurs sont nouveaux pour vous.)

C'est pour cela que vous pouvez le recolorer ou le redimensionner sans qu'il devienne flou, et qu'il offre deux types de modification complètement différents. Ouvrez-le dans un éditeur visuel et vous travaillez avec les formes. Ouvrez-le dans un éditeur de texte et vous travaillez avec le code qui les décrit. Même fichier, deux portes d'entrée.

Vérifiez une chose avant tout : ouvrez le SVG et essayez de cliquer sur une seule forme. Si vous pouvez la sélectionner et la déplacer seule, c'est un vrai vecteur modifiable. Si tout se sélectionne en un seul bloc et se pixellise quand vous zoomez, il s'agit probablement d'une image matricielle enveloppée dans un fichier .svg, un "faux" vecteur que vous ne pouvez pas vraiment modifier. Aucun éditeur ne corrige cela ; le fichier doit d'abord être converti correctement.

Les deux façons de modifier un SVG, et quand les utiliser

Vous voulez…	Meilleure méthode
Recolorer, redimensionner ou déplacer des formes	Éditeur visuel (Inkscape, Illustrator, Figma)
Modifier du texte ou changer rapidement quelques couleurs	Éditeur visuel, ou le code pour une retouche ponctuelle
Conserver les noms de classes / ID pour le CSS ou une animation	Modifier le code directement
Changer le viewBox, les dimensions ou une valeur hexadécimale	Modifier le code directement
Redessiner ou remodeler des tracés à la main	Éditeur visuel

La plupart des modifications se font visuellement. Vous passez par le code lorsque vous êtes développeur et que vous avez besoin que le balisage reste exactement tel qu'il est écrit, ce qu'un éditeur visuel ne respecte pas toujours (nous y revenons plus bas).

Modifier un SVG visuellement

C'est la méthode que la plupart des gens recherchent, et elle couvre le changement de couleurs, le redimensionnement, la modification des formes et la suppression d'éléments.

Choisir un éditeur

• Inkscape est gratuit, open source, et fonctionne sur Mac, Windows et Linux. C'est la réponse habituelle à "avec quoi modifier des SVG", et elle est méritée.
• Adobe Illustrator est le standard professionnel payant, et vous donne le plus de contrôle si vous l'avez déjà.
• Figma fonctionne dans le navigateur et gère bien les retouches légères et les changements de couleur, ce qui explique pourquoi beaucoup d'équipes produit l'utilisent.
• Les éditeurs en ligne gratuits comme Boxy SVG, ou un éditeur SVG web rapide, couvrent les petites modifications sans rien installer.

Faire la modification

Les étapes sont les mêmes dans tous ces outils :

1. Ouvrez le fichier dans votre éditeur (File → Open, ou glissez-déposez-le).
2. Dégroupez si nécessaire. Les SVG convertis et exportés arrivent souvent sous forme d'un seul groupe verrouillé. Sélectionnez tout et utilisez Ungroup (dans Illustrator et Inkscape) afin d'accéder aux formes individuelles.
3. Sélectionnez la forme voulue avec l'outil de sélection ou de sélection directe.
4. Modifiez-la. Définissez une nouvelle couleur de remplissage, tirez une poignée pour redimensionner, déplacez-la, modifiez le texte ou supprimez une partie inutile.
5. Enregistrez ou exportez en SVG quand vous avez terminé.

La modification la plus courante : changer les couleurs

La plupart des questions du type "comment modifier un SVG" veulent en réalité dire "comment changer sa couleur". Sur un fichier propre, c'est rapide : cliquez sur la forme, choisissez un nouveau remplissage, terminé. Chaque couleur est une forme modifiable distincte, donc transformer le bleu de votre marque en vert demande un clic par forme.

C'est aussi exactement là qu'un fichier brouillon s'effondre, ce qui nous amène à la section suivante.

Modifier directement le code SVG

Comme un SVG est du texte, vous pouvez l'ouvrir dans VS Code, Notepad ou n'importe quel éditeur de texte et le modifier à la main. C'est la méthode des développeurs, et pour certaines tâches, elle est plus rapide et plus sûre que n'importe quelle application visuelle :

• Changer une couleur : trouvez le fill="#3b82f6" de la forme et modifiez la valeur hexadécimale.
• Redimensionner le canevas : modifiez width, height ou viewBox.
• Conserver vos points d'accroche : c'est le point crucial. Les éditeurs visuels comme Illustrator réécrivent souvent le balisage à l'enregistrement, en renommant ou en supprimant les attributs class et id dont dépend votre CSS ou votre JavaScript. Si votre SVG est branché sur du style ou de l'animation, modifier le code à la main est la seule façon fiable de conserver ces points d'accroche.

Le compromis est simple : la modification du code est excellente pour les petites retouches chirurgicales et tout ce qui touche aux classes, aux ID ou à l'animation. Ce n'est pas le bon outil pour remodeler une courbe ou recolorer une illustration chargée. C'est le rôle des éditeurs visuels.

Pourquoi certains SVG sont impossibles à modifier (et comment corriger le problème)

Voici ce qu'aucune page d'outil ne vous dit : le problème vient rarement de l'éditeur. Il vient du fichier.

Ouvrez un SVG propre et la modification est tranquille. Il comporte une poignée de formes nommées, un remplissage par forme et peu de nœuds, si bien que vous cliquez exactement sur ce que vous voulez et le recolorez en une seconde.

Ouvrez un fichier brouillon, généralement issu du tracé automatique d'un convertisseur gratuit et rapide, et la même modification devient pénible :

• Une seule couleur est divisée en centaines de minuscules fragments, si bien qu'il n'existe pas une seule "forme bleue" à cliquer. Il y en a des centaines.
• Les courbes lisses sont bourrées de milliers de points d'ancrage, ce qui rend toute modification de forme désespérante et ralentit l'éditeur. (C'est le problème du trop grand nombre de nœuds, en détail.)
• Des rectangles de fond parasites et des bords masqués se mettent en travers du chemin.

Quand cela vous arrive, la solution n'est généralement pas de trouver un meilleur éditeur ou de faire preuve de plus de patience. Il faut un fichier de départ plus propre. Reconvertir l'image d'origine en SVG bien organisé vous donne quelque chose que vous pouvez vraiment modifier.

À quoi cela ressemble avec PerfectVector

Le SVG le plus facile à modifier est un SVG propre, et c'est précisément ce que PerfectVector est conçu pour produire. Il reconstruit votre image sous forme de tracés propres avec peu de nœuds et conserve chaque couleur comme une forme modifiable distincte ; ainsi, lorsque vous ouvrez le résultat dans Illustrator, Figma ou Inkscape, vous pouvez sélectionner et recolorer les éléments comme les tutoriels supposent que vous pouvez le faire.

Il dispose aussi d'un éditeur de couleurs intégré, qui vous permet de recolorer ou de fusionner les couleurs juste après la conversion, par couleur plutôt qu'en cherchant des tracés un par un. Moins de couleurs signifie moins de formes à gérer et un fichier plus simple à modifier ensuite. Vous pouvez convertir une image en SVG propre et modifiable et inspecter vous-même les tracés. Convertissez vos premières images gratuitement, sans carte bancaire.

Recolorer par couleur, pas par tracé

Une liste de vérification rapide avant de modifier

• Confirmez qu'il s'agit d'un vrai vecteur. Cliquez sur une seule forme. Si elle se sélectionne seule, c'est bon. Si toute l'image se sélectionne en un bloc et devient floue au zoom, convertissez-la d'abord en vrai SVG.
• Gardez l'original. Enregistrez une copie avant de commencer, surtout si vous allez toucher au code.
• Choisissez la méthode. Éditeur visuel pour les formes et les couleurs ; code pour les classes, les ID, le viewBox et les petites retouches.
• Dégroupez si le fichier arrive sous forme d'un seul groupe verrouillé.
• Si vous ne pouvez pas sélectionner ce que vous voulez, cessez de vous battre avec le fichier. Il est trop fragmenté, et une conversion plus propre vous fera gagner plus de temps qu'un nettoyage manuel.

FAQ

Comment modifier un SVG gratuitement ? Utilisez Inkscape, un éditeur gratuit et open source pour Mac, Windows et Linux, pour une modification visuelle complète. Pour des changements rapides, utilisez un éditeur SVG en ligne gratuit dans votre navigateur, ou ouvrez le fichier dans un éditeur de texte comme VS Code et modifiez directement le code. Les trois options ne coûtent rien.

Comment changer la couleur d'un SVG ? Dans un éditeur visuel, sélectionnez la forme et définissez une nouvelle couleur de remplissage. Dans le code, trouvez la valeur de remplissage de la forme (par exemple fill="#3b82f6") et modifiez l'hexadécimal. Si une couleur est répartie sur de nombreuses formes, recolorez par couleur plutôt qu'en cliquant sur chaque morceau, avec un outil qui regroupe les couleurs pour vous.

Puis-je modifier un SVG dans VS Code ? Oui. Un SVG est du texte XML, donc VS Code ou n'importe quel éditeur de texte l'ouvre sans problème. C'est la bonne méthode pour changer des couleurs hexadécimales, le viewBox ou les dimensions, et pour préserver les attributs class et id destinés au CSS ou à l'animation. Ce n'est pas adapté pour remodeler des courbes à la main.

Pourquoi ne puis-je pas sélectionner les formes individuelles dans mon SVG ? Il y a généralement deux raisons. Les formes sont groupées, donc sélectionnez tout et dégroupez d'abord. Ou bien le fichier est une image matricielle enveloppée dans un .svg, sans formes séparées à sélectionner. S'il se pixellise lorsque vous zoomez, c'est le deuxième cas : vous devrez le convertir en vrai vecteur.

Puis-je modifier un SVG dans Canva ? Oui, pour les modifications de base. Canva vous permet de recolorer, redimensionner et repositionner un SVG, ce qui couvre la plupart des besoins légers. Pour modifier précisément les tracés, dégrouper des formes complexes ou faire des changements au niveau du code, utilisez Inkscape, Illustrator ou un éditeur de texte.

Comment modifier un SVG sur Windows ou Mac ? Les mêmes outils fonctionnent sur les deux. Inkscape fonctionne sur Windows, Mac et Linux ; Figma et les éditeurs en ligne fonctionnent dans n'importe quel navigateur ; VS Code modifie le code sur l'un comme sur l'autre. Vous n'avez pas besoin de logiciels différents selon le système d'exploitation.

---

La modification se passe bien lorsque le fichier est propre dès le départ. Si le vôtre est un enchevêtrement de tracés parasites, convertissez l'original en SVG propre et modifiable et repartez d'un fichier avec lequel vous pouvez vraiment travailler.