Flou gaussien SVG

Il est nécessaire de définir le filtre SVG dans le tag <defs>.

Flou gaussien (Gaussian Blur)

Le tag <filter> est utilisé pour définir les filtres SVG. Le tag <filter> utilise l'attribut obligatoire id pour définir quel filtre appliquer aux graphiques ?

Le tag <filter> doit être imbriqué dans le tag <defs>. Le tag <defs> est l'abréviation de definitions et permet de définir des éléments spéciaux tels que les filtres.

Copiez le code suivant dans un bloc-notes, puis enregistrez le fichier sous le nom "filter1.svg". Placez ce fichier dans votre répertoire web :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Explication du code :

  • L'attribut id du tag <filter> permet de définir un nom unique pour le filtre (le même filtre peut être utilisé par plusieurs éléments du document)
  • L'attribut filter:url permet de lier l'élément au filtre. Lorsque vous liez l'ID du filtre, vous devez utiliser le caractère #
  • Les effets de filtre sont définis par le tag <feGaussianBlur>. Le préfixe fe peut être utilisé pour tous les filtres
  • L'attribut stdDeviation du tag <feGaussianBlur> permet de définir l'ampleur du flou
  • La partie in="SourceGraphic" définit l'effet créé par l'image entière

Voir l'exemple

Un autre exemple avec une valeur différente de stdDeviation

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Voir l'exemple