Les effets d'ombre en SVG (Scalable Vector Graphics) peuvent ajouter de la profondeur et de la dimension à vos images ou graphiques. Il existe différentes manières d'appliquer des effets d'ombre en SVG. Voici quelques techniques couramment utilisées :

1. Ombre portée utilisant l'élément <filter> : vous pouvez utiliser l'élément <filter> avec la primitive de filtre feDropShadow pour créer un effet d'ombre portée. Voici un exemple :

    XML
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="drop-shadow" x="0" y="0" width="150%" height="150%">
         <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
         <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
         <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
       </filter>
     </defs>
     <rect width="100" height="100" fill="#3498db" filter="url(#drop-shadow)" />
   </svg>
   

   Dans cet exemple, un élément rect est utilisé avec un filtre d'ombre portée qui lui est appliqué. Vous pouvez ajuster des paramètres tels que dx , dy , stdDeviation et autres pour contrôler l'apparence de l'ombre.

2. Ombre de texte : appliquer une ombre aux éléments de texte est simple. Vous pouvez utiliser la propriété text-shadow CSS directement dans votre fichier SVG. Voici un exemple :

    XML
    <svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
     <text x="10" y="40" font-family="Arial" font-size="20" fill="#3498db" style="text-shadow: 2px 2px 5px rgba(0,0,0,0.5);">
       Hello SVG
     </text>
   </svg>
   

   La propriété text-shadow prend des valeurs pour les décalages horizontaux et verticaux, le rayon de flou et la couleur de l'ombre.

3. Ombre personnalisée à l'aide de formes supplémentaires : vous pouvez créer des ombres personnalisées en utilisant des formes supplémentaires derrière votre élément principal. Par exemple, créez une copie de votre forme principale, décalez-la légèrement et remplissez-la avec une couleur représentant l'ombre.

    XML
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <rect x="10" y="10" width="100" height="100" fill="#3498db" />
     <rect x="12" y="12" width="100" height="100" fill="rgba(0,0,0,0.5)" />
   </svg>
   

   Dans cet exemple, le deuxième rect sert de simple ombre au premier.

N'hésitez pas à expérimenter ces techniques et à ajuster les paramètres pour obtenir l'effet d'ombre souhaité dans vos graphiques SVG.