<linearGradient>

La balise <linearGradient> est utilisée dans une balise SVG pour créer des dégradés linéaires.

Elle permet de mélanger différentes couleurs de manière fluide selon une direction donnée. Les dégradés linéaires sont souvent utilisés pour embellir des formes, créer des ombrages, ou simuler des effets de lumière.

Pensez à un dégradé linéaire comme à une peinture où les couleurs se fondent l'une dans l'autre, mais toujours en suivant une ligne droite. 😉

Structure et syntaxe de la balise <linearGradient>

Structure

Un dégradé linéaire change progressivement de couleur selon une ligne définie.

Vous pouvez contrôler cette ligne avec les attributs x1, y1, x2 et y2. Ces valeurs représentent des pourcentages ou des coordonnées dans le système de coordonnées de l'élément <svg> parent.

Chaque dégradé est composé de "stops" (des arrêts de couleur), définis avec la balise <stop>. Chaque arrêt spécifie :

• offset : où commence la couleur sur la ligne (en % ou en fraction, comme 0.5 pour 50%) ;
• stop-color : la couleur appliquée ;
• stop-opacity (facultatif) : la transparence de la couleur.

Exemple simple

Voici un exemple pour comprendre comment fonctionne un dégradé linéaire :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="gradientExample" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="blue" />
            <stop offset="100%" stop-color="red" />
        </linearGradient>
    </defs>

    <rect x="10" y="10" width="180" height="180" fill="url(#gradientExample)" />
</svg>

Dans cet exemple :

• x1 et y1 définissent le point de départ du dégradé (en haut à gauche) ;
• x2 et y2 définissent le point final (en haut à droite) ;
• Deux balises <stop> spécifient les couleurs du dégradé (blue au début et red à la fin).

Le rectangle est alors rempli avec un dégradé qui va de bleu à rouge en ligne droite.

Voici un aperçu du rendu :

Exemple avec plusieurs couleurs

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="multiColorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="yellow" />
            <stop offset="50%" stop-color="green" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>

    <rect x="10" y="10" width="180" height="180" fill="url(#multiColorGradient)" />
</svg>

Ce dégradé passe de jaune à vert au milieu, puis de vert à bleu.

Essayez par vous-même :

Bonnes pratiques pour les dégradés linéaires

Les dégradés sont un excellent outil pour enrichir vos designs, mais voici quelques conseils pour bien les utiliser :

• Utilisez des transitions de couleur douces : Les changements de couleur brutaux peuvent sembler désordonnés ou fatiguer les yeux de votre utilisateur. Essayez de choisir des couleurs qui se mélangent naturellement, comme différentes nuances d'une même teinte ;
• Jouez avec l'angle du dégradé : Si vous voulez créer des effets plus dynamiques, modifiez les valeurs de x1, y1, x2, et y2. Par exemple, un dégradé vertical (de haut en bas) utilise x1="0%" y1="0%" x2="0%" y2="100%" ;
• Limitez le nombre de couleurs : Trop de couleurs dans un dégradé peuvent donner un effet trop chargé. Deux ou trois couleurs suffisent souvent pour obtenir un design harmonieux ;
• Testez la lisibilité : Si vous utilisez des dégradés pour un arrière-plan, assurez-vous que le texte par-dessus reste lisible. Vous pouvez ajuster les couleurs ou ajouter un léger effet d'ombre pour améliorer le contraste.

Attributs principaux

Compatibilité des navigateurs

La balise <linearGradient> est largement compatible avec tous les navigateurs modernes.