Unités de dégradé SVG : une transition sur tout le logo

Pour répartir un dégradé sur des tracés SVG séparés, utilise gradientUnits="userSpaceOnUse", définis les extrémités dans les coordonnées de l’illustration et garde les tracés dans le même système de coordonnées. Chaque tracé révèle alors la portion du dégradé située à sa position. Les parties du logo peuvent rester modifiables séparément.

La valeur par défaut, objectBoundingBox, ajuste le dégradé à chaque élément peint. Référencer le même ID de dégradé depuis trois tracés peut donc produire trois transitions complètes du violet à l’orange. Changer les unités corrige cette répétition, mais un enfant transformé peut encore décaler sa propre couleur. La référence MDN de gradientUnits définit l’espace de référence comme l’espace utilisateur actuel de l’élément utilisant le dégradé.

Ce guide utilise un emblème original en trois parties dessiné directement comme tracés SVG. Si tu possèdes déjà un logo vectoriel, pars de cet original. Une source uniquement matricielle nécessite une reconstruction géométrique avant cette modification des couleurs ; le guide général de vectorisation des dégradés explique ce choix.

Décide si le dégradé appartient à chaque forme ou à tout le symbole

Utilise une couleur relative à l’objet si chaque partie doit posséder sa transition complète. Utilise des extrémités communes en espace utilisateur si les parties gauche et droite doivent prendre des couleurs différentes dans une seule transition.

Placer fill="url(#brandBlend)" sur un groupe transmet le remplissage à ses enfants. Cela ne fait pas mesurer à un dégradé objectBoundingBox la silhouette combinée du groupe. Les enfants reçoivent encore leur propre peinture. La spécification des serveurs de peinture SVG décrit les dégradés comme des ressources référencées par le remplissage ou le contour d’un élément.

Un emblème, quatre choix de coordonnées

Définis des extrémités couvrant l’illustration

Les tracés de l’exemple occupent les positions horizontales de x=30 à x=310. Ce sont les extrémités du dégradé. Le triangle s’arrête à x=125, le bloc central occupe 140 à 210 et la forme de droite s’étend de 225 à 310.

Enregistre ceci sous shared-logo.svg et ouvre-le dans un navigateur :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Tu devrais voir un triangle violet, un bloc central principalement rose et une forme de droite aux tons orange, comme en B. Les espaces vides cachent des portions du même dégradé ; la couleur ne recommence pas au début du tracé suivant. Change un arrêt de couleur et les trois parties sont mises à jour car elles référencent la même définition.

Pour comparer directement avec A, remplace les attributs gradientUnits, x1, y1, x2 et y2 du dégradé par x1="0%" y1="0%" x2="100%" y2="0%". Omettre gradientUnits rétablit la valeur par défaut. Chaque forme reçoit désormais la transition complète.

Les pourcentages ont aussi une autre référence : avec userSpaceOnUse, ils se rapportent à la zone d’affichage SVG actuelle plutôt qu’à la boîte englobante de l’objet peint. Des nombres explicites rendent cet exemple plus facile à examiner. Un logo occupant seulement une partie d’un grand viewBox n’a pas besoin d’en utiliser toute la largeur pour son dégradé.

Vérifie les transformations si une partie a la mauvaise couleur

En C, la forme de droite semble être restée à sa place. Ses coordonnées de tracé ont été déplacées de 60 unités vers la gauche, et un groupe enfant l’a déplacée de 60 unités vers la droite :

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Remplace le troisième tracé de l’exemple complet par ce groupe pour reproduire l’écart. Son bord gauche visible reste à x=225, mais son bord gauche local est à x=165. Le dégradé utilise cet espace local : la partie prend donc une portion plus précoce et plus rose de la transition. userSpaceOnUse ne garantit pas un système global unique indépendamment des transformations imbriquées.

Pour cet emblème, rétablis les coordonnées originales du troisième tracé et supprime sa translation privée. Si tout le logo doit bouger, applique plutôt transform="translate(10 0)" au groupe extérieur existant. Cela produit D : les trois formes et leur couleur partagée se déplacent ensemble.

Cette correction fonctionne car les tracés sont déjà exprimés dans un système de coordonnées commun. Placer des enfants transformés sans lien dans un groupe supplémentaire ne retire pas leurs transformations individuelles. Pour un logo importé, examine ces transformations avant d’aplatir ou de réécrire la géométrie, et conserve une copie de l’original.

Quand gradientTransform est utile

gradientTransform modifie la correspondance des coordonnées de la couleur sans changer la géométrie des tracés. Il est utile si tu souhaites délibérément faire tourner ou déplacer un dégradé, ou lui appliquer un cisaillement. MDN le décrit comme une transformation supplémentaire appliquée après établissement du système de coordonnées choisi par gradientUnits.

Évite d’ajuster une définition commune pour compenser un seul enfant sans vérifier les autres. Toutes les formes référençant cette définition peuvent être affectées. Conserver l’illustration dans un espace commun facilite la maintenance de ce logo simple ; des illustrations importées plus complexes peuvent nécessiter des définitions de dégradé avec des correspondances séparées.

La place de PerfectVector

Si la seule source est un logo PNG ou JPG, PerfectVector peut aider à reconstruire une géométrie vectorielle modifiable avant de rebâtir le dégradé coordonné. Vectorise le logo, puis examine la silhouette, les trous et les parties distinctes dans ton éditeur. Utilise ces formes comme point de départ du remplissage commun.

La démonstration ci-dessus a été créée à la main pour isoler le comportement des coordonnées ; ce n’est pas un résultat de conversion PerfectVector. Ne suppose pas que vectoriser des pixels ombrés retrouve les arrêts de dégradé ou les réglages de coordonnées d’origine. Un logo simple peut aussi être plus rapide à redessiner manuellement. Conserve un SVG, AI ou PDF vectoriel existant s’il est disponible.

Pour une forme qui refuse un nouveau remplissage, utilise les vérifications de recoloration SVG avant de changer les coordonnées du dégradé. Si un même export diffère entre applications, suis le diagnostic des écarts de couleur SVG.

Rouvre le fichier avant livraison

Enregistre un nouveau SVG et teste le fichier exact, pas seulement la zone de dessin de l’éditeur. Vérifie les points suivants :

• L’ID du dégradé existe et chaque tracé prévu le référence.
• La transition couvre les limites du logo dans le sens souhaité.
• Déplacer tout le symbole conserve la coordination des couleurs.
• Les parties séparées restent sélectionnables là où tu dois les modifier.
• L’application destinataire préserve l’apparence attendue.

Un rendu lisse dans un navigateur démontre le comportement de la couleur dans ce navigateur. Il n’établit pas sa prise en charge dans tous les éditeurs et ne transforme pas le dégradé en géométrie de découpe. Conserve une version à couleurs unies pour les processus nécessitant des formes pleines et garde l’original SVG modifiable. Le guide des fichiers SVG explique la différence entre le contenu géométrique du fichier et son apparence affichée.

FAQ

Dois-je fusionner les tracés pour partager un dégradé ? Non. Des tracés séparés peuvent référencer un seul dégradé. Utilise userSpaceOnUse avec des extrémités adaptées et assure-toi que les tracés partagent le système de coordonnées prévu.

Pourquoi grouper les tracés répète-t-il encore le dégradé ? Un groupe peut transmettre son remplissage aux tracés enfants, mais un dégradé objectBoundingBox utilise encore les limites de chaque enfant peint. Définis des extrémités en espace utilisateur si la transition doit couvrir tout le symbole.

Pourquoi la couleur d’un tracé a-t-elle changé après son déplacement dans un groupe ? Une transformation de ce groupe peut changer le système local du tracé. Compare ses transformations à celles des autres tracés et teste le SVG exporté avant d’ajuster le dégradé commun.

Sources

1. MDN — gradientUnits — Définit la valeur par défaut, les systèmes de coordonnées de référence et le comportement des pourcentages.
2. Groupe de travail SVG — serveurs de peinture — Spécifie les dégradés réutilisables, les arrêts et le comportement d’extension.
3. MDN — gradientTransform — Explique les transformations supplémentaires des coordonnées du dégradé.

Tu pars d’un logo matriciel ? Transforme ton logo en tracés SVG modifiables, examine les formes séparées, puis reconstruis le dégradé commun et rouvre l’export final pour vérifier son alignement.