En SVG (Scalable Vector Graphics), vous pouvez appliquer des effets de flou aux éléments en utilisant l'élément <filter> et diverses primitives de filtre. Voici quelques façons d’utiliser les effets de flou en SVG :

1. Flou gaussien : La primitive de filtre <feGaussianBlur> est couramment utilisée pour créer un effet de flou. Il faut un paramètre d'écart type qui détermine la quantité de flou.

    XML
    <filter id="blurFilter" x="0" y="0" width="100%" height="100%">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
   </filter>
   
   <rect width="200" height="100" style="filter: url(#blurFilter);" />
   

   Dans cet exemple, un filtre de flou avec un écart type de 5 est appliqué à un rectangle.

2. Personnalisation du flou : vous pouvez contrôler le flou séparément dans les directions x et y :

    XML
    <filter id="customBlur" x="0" y="0" width="100%" height="100%">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5 2" />
   </filter>
   
   <rect width="200" height="100" style="filter: url(#customBlur);" />
   

   Ici, l’écart type est fixé à 5 dans la direction x et à 2 dans la direction y.

3. Combinaison de filtres : vous pouvez combiner plusieurs filtres pour obtenir différents effets. Par exemple, combiner un flou avec une matrice de couleurs peut créer des effets intéressants.

    XML
    <filter id="combinedFilter" x="0" y="0" width="100%" height="100%">
     <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
     <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />
   </filter>
   
   <rect width="200" height="100" style="filter: url(#combinedFilter);" />
   

   Cet exemple combine un flou avec une matrice de couleurs.

4. Animation du flou : vous pouvez utiliser des animations CSS pour créer des effets de flou dynamiques.

    XML
    <rect width="200" height="100" style="filter: url(#blurFilter); transition: filter 0.5s;" />
   

   Appliquer une transition CSS sur la propriété filter permet d'animer l'effet de flou.

5. Application de flou à des éléments spécifiques : des filtres peuvent être appliqués à des éléments spécifiques à l'aide de l'attribut filter .

    XML
    <circle cx="50" cy="50" r="40" fill="blue" filter="url(#blurFilter)" />
   

   Cet exemple applique le filtre de flou uniquement au cercle spécifié.

Expérimentez ces techniques pour obtenir les effets de flou souhaités dans vos graphiques SVG. Gardez à l'esprit que la prise en charge du navigateur peut varier, c'est donc une bonne pratique de vérifier la compatibilité des fonctionnalités que vous utilisez.