<defs>

La balise <defs> est utilisée dans un document SVG pour définir des éléments qui ne sont pas directement affichés, mais qui peuvent être réutilisés ailleurs dans le SVG.

Elle est idéale pour déclarer des définitions, comme :

• des gradients ;
• des filtres ;
• ou d'autres ressources graphiques que vous pouvez appliquer ultérieurement.

Utilisez <defs> pour centraliser les styles et composants réutilisables dans votre SVG. Réfléchissez : factorisation ! 😊

Structure et syntaxe de la balise <defs>

Structure

Voici un exemple simple :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="myGradient" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="blue" />
            <stop offset="100%" stop-color="red" />
        </linearGradient>
    </defs>
    <rect width="200" height="200" fill="url(#myGradient)" />
</svg>

Dans cet exemple :

• Le gradient linéaire est défini dans <defs> avec un id (#myGradient) ;
• Il est ensuite appliqué comme remplissage au rectangle grâce à fill="url(#myGradient)".

Testez par vous-même :

Exemple avancé

Voici un exemple utilisant plusieurs ressources :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="myPattern" width="10" height="10" patternUnits="userSpaceOnUse">
            <circle cx="5" cy="5" r="3" fill="blue" />
        </pattern>
       <filter id="blurFilter">
           <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
    </defs>

    <rect width="300" height="100" fill="url(#myPattern)" />
    <circle cx="150" cy="150" r="50" fill="green" filter="url(#blurFilter)" />
</svg>

Dans cet exemple :

• Un motif (pattern) est créé pour remplir le rectangle avec des cercles bleus répétés ;
• Un filtre (filter) applique un flou à un cercle vert.

Voici notre résultat :

Attributs

La balise <defs> ne possède pas d'attributs propres, mais elle peut contenir n'importe quelle balise SVG, comme :

• <linearGradient>
• <radialGradient>
• <pattern>
• <filter>
• <mask>

Les éléments définis dans <defs> doivent être référencés avec leur id, par exemple via url(#id).

Bonnes pratiques

Voici quelques conseils pour bien utiliser <defs> :

• Placez toutes vos définitions réutilisables dans <defs> pour améliorer la lisibilité de votre code ;
• Utilisez des id clairs et significatifs pour les éléments définis ;
• Combinez <defs> avec des attributs CSS ou des transformations pour réutiliser efficacement vos ressources graphiques.

Pour une utilisation avancée, combinez <defs> avec d'autres balises comme <use> pour cloner et manipuler des éléments.

Compatibilité des navigateurs

La balise <defs> est prise en charge par tous les navigateurs modernes :