Comment modifier les couleurs, le texte et les tracés d’un SVG ?

Une couleur fausse est le motif de correction le plus fréquent sur un fichier vectoriel : un bleu de charte qui a viré, un liseré qui ne devrait pas exister, un texte qu’on croyait modifiable et qui ne l’est pas. Pour modifier les couleurs, le texte et les tracés d’un SVG en ligne, il faut d’abord savoir quelle propriété produit quel effet visuel. C’est tout l’enjeu.

L’Éditeur vectoriel travaille sur la géométrie : nœuds Bézier, formes, texte, dégradés, calques, opérations booléennes, masques d’écrêtage. Aucune de ces opérations ne touche à un pixel, ce qui rend les corrections réversibles tant que le document reste ouvert et que l’export n’a pas eu lieu.

Remplissage, contour, opacité : trois propriétés séparées

Trois propriétés de peinture coexistent sur un même objet et ne se commandent pas l’une l’autre.

• Le remplissage peint l’intérieur de la forme.
• Le contour peint le long du tracé, avec son épaisseur propre.
• L’opacité règle la transparence de l’ensemble.

Changer le remplissage d’un rectangle rouge en vert laisse son contour tel quel. Si le contour était un trait noir d’une unité, il reste un trait noir d’une unité. C’est la première erreur de débutant : on corrige le remplissage, on recharge la page, et le liseré sombre est toujours là.

Changer une couleur sans toucher à la géométrie

Un SVG stocke des valeurs de peinture, pas des pixels. Passer de #FF0000 à #00FF00 modifie une valeur : #FF0000 correspond à rgb(255, 0, 0) et #00FF00 à rgb(0, 255, 0). Le tracé, lui, n’a pas bougé d’un nœud.

La conversion mentale entre les deux notations reste utile pour retrouver une référence de charte. #336699 vaut rgb(51, 102, 153) : deux chiffres hexadécimaux par canal, 0x33 = 51, 0x66 = 102, 0x99 = 153. Une charte qui fournit des valeurs RVB se saisit donc directement, sans passer par une pipette.

Attention à la transparence. Une opacité de 50 % n’équivaut pas à une couleur plus claire : elle laisse voir ce qui se trouve dessous. Un rouge à 50 % sur du blanc ne donne pas un rose franc, il donne un mélange. Alpha 128 sur 255 correspond à peu près à ces 50 %.

Le texte reste vivant ou devient un dessin

Un texte SVG dépend de la police au moment du rendu. Le fichier ne transporte pas forcément la police : il désigne une famille, et c’est la machine qui affiche qui décide de ce qu’elle a sous la main.

Deux conséquences pratiques. D’abord, un texte qui s’affiche correctement chez vous peut se composer autrement ailleurs, avec une chasse différente et des retours à la ligne déplacés. Ensuite, si la police manque et que le rendu doit rester identique, la conversion en tracés est la solution : l’apparence est figée, mais les caractères ne sont plus sélectionnables ni modifiables comme du texte. Ce n’est pas une dégradation, c’est un choix de livraison.

Tant que le texte reste du texte, il reste éditable. Et un dégradé appliqué à un remplissage reste un dégradé modifiable, pas une image aplatie.

Les tracés et l’échelle

L’épaisseur d’un contour s’exprime en unités utilisateur, pas en pixels. Elle suit donc l’échelle du dessin. Un contour de 2 unités rendu à dix fois la taille d’origine s’affiche à 20 pixels de large. Si le résultat paraît trop épais après un agrandissement, c’est la valeur du contour qu’il faut revoir, pas la taille du document.

Cette règle vaut aussi pour les objets importés depuis un PDF ou un .ai : un contour peut arriver avec une valeur héritée de la mise en page d’origine, et paraître incohérent à côté des formes redessinées.

Les erreurs qui coûtent une version

Trois réflexes évitent l’essentiel des reprises.

Dupliquer avant de convertir. Une fois le texte passé en tracés, il n’y a pas de retour en arrière dans le fichier enregistré.

Vérifier le contour après chaque changement de remplissage, et inversement. Les deux propriétés se corrigent souvent ensemble sur un logo un peu ancien.

Se méfier des documents composites. Un SVG peut contenir une image matricielle intégrée : la recolorier par les propriétés de peinture n’a aucun effet sur son contenu.

Passer à la pratique

Le plus simple est de prendre un fichier de test, d’y appliquer les trois corrections une par une et d’exporter après chacune, pour comparer. Le guide sur comment modifier des fichiers SVG en ligne dans votre navigateur couvre le premier lancement et les limites de l’éditeur ; celui sur comment redimensionner un SVG sans perdre en qualité traite la taille d’affichage et le comportement des contours quand l’échelle change.

Une correction de couleur n’est donc pas une retouche de peinture. C’est la modification d’une propriété dans un fichier texte, avec deux conséquences heureuses : elle est exacte, et elle se défait.