Filtre <filter> SVG

L'élément <filter> de SVG est utilisé pour ajouter des effets jolis aux images SVG. Par exemple, des ombres, un flou ou un éclairage.

Exemple de filtre

Ceci est un exemple simple de filtre SVG, qui montre deux ellipses. L'ellipse gauche n'utilise pas de filtre, tandis que l'ellipse droite est rendue avec un filtre de flou gaussien :

<svg　width="500"　height="100">
<defs>
　　　　　　<filter　id="blurFilter"　y="-5"　height="40"
　　　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="3"　y="-"/>
　　　　　　</filter>
　　</defs>
　　　　
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:　none;　fill:　#0000ff;　"　/>
　　<ellipse cx="155" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:none;　fill:#0000ff;　filter:url(#blurFilter);"　/>
</svg>

Effet de l'image après l'exécution :

Remarquez comment le bord de l'ellipse droite est flou.

Entrée et sortie du filtre

Les filtres SVG nécessitent une certaine entrée (source) et appliquent des effets de filtre à celle-ci. L'entrée peut être le graphique de forme (représentant les couleurs RGB), le canal alpha de la forme ou la sortie d'autres filtres.

Les filtres SVG produisent des graphiques de sortie (résultat) à partir de l'entrée. Ce résultat est généralement affiché, plutôt que d'appliquer le filtre à la forme. La sortie du filtre peut être utilisée comme entrée pour un autre filtre. Par conséquent, les filtres peuvent être liés.

Voici un schéma d'entrée et de sortie des filtres SVG :

L'entrée des filtres SVG est généralement spécifiée dans les attributs de l'élément de filtre in. Voici un exemple :

　<feGaussianBlur　stdDeviation="3"　in="SourceGraphic"　/>

Si vous souhaitez utiliser la sortie d'un filtre SVG comme entrée pour un autre filtre, vous devez ajouter l'attribut à l'élément de filtre result. Voici un exemple :

<feGaussianBlur　stdDeviation="3"　in="SourceGraphic"　result="blur"/>

Maintenant, un autre filtre SVG peut utiliser la sortie de ce filtre en plaçant la valeur blur dans son attribut in. Dans l'exemple ci-dessus, la valeur blur est spécifiée dans l'attribut result du filtre.

Taille du filtre

La taille d'un filtre est définie par ses attributs x, y, width et height.

Les attributs x et y sont interprétés par rapport aux x et y de la forme utilisée comme entrée. En raison de ce que les sorties de certains filtres sont généralement plus grandes que les entrées (par exemple, ajouter un flou autour de la forme), il est généralement nécessaire d'utiliser des nombres négatifs pour x et y pour éviter de couper les graphiques ajoutés par le filtre.

Dans les attributs width et height, cela est également simple. De plus, il peut être nécessaire de spécifier une largeur et une hauteur qui doivent être supérieures à la forme d'entrée, pour éviter de couper les effets ajoutés par le filtre.

Filtres de combinaison

Vous pouvez utiliserFiltre de combinaison d'éléments. Voici un exemple :

<svg　width="500"　height="100">
<defs>
　　　　<filter　id="blurFilter2"　y="-10"　height="40"　x="-10" width="150">
　　　　　　　　<feOffset　in="SourceAlpha"　dx="3"　dy="3"　result="offset2"　/>
　　　　　　　　<feGaussianBlur　in="offset2"　stdDeviation="3"　　result="blur2"/>
　　　　　　　　feMerge>
　　　　　　　　　　　　<feMergeNode　in="blur2"　/>
　　　　　　　　　　　　<feMergeNode　in="SourceGraphic"　/>
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke:　none;　fill:　#0000ff;　filter:　url(#blurFilter2);"　/>　
</svg>

Ce exemple crée un filtre SVG qui contient deux éléments de filtre : <feOffset> et <feGaussianBlur>. L'effet de décalage de filtre (feOffset) agit sur le canal Alpha de la forme appliquée. Le flou gaussien (feGaussianBlur) agit sur la sortie du filtre de décalage.

L'élément <feMerge> combine la sortie du filtre flou avec le graphique original. Les entrées sont combinées dans l'ordre de leur apparition dans l'élément <feMerge>. Par conséquent, les entrées suivantes s'affichent au-dessus des entrées précédentes. Le résultat est une forme qui semble avoir une ombre. L'effet de l'image après exécution :

Filtre de flou Gauss

Le filtre de flou Gauss peut flouter les formes SVG. Le filtre de flou Gauss est composé deL'élément <feGaussianBlur> représente. Voici un exemple :

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter4" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);"　/>
</svg>

Dans cet exemple, un élément <filter> contient un <feGaussianblur>. Ensuite, un rectangle vert est défini, qui se réfère à ce filtre via l'attribut CSS filter. Voici l'image générée :

Taille du flou

L'attribut stdDeviation de l'élément <feGaussianBlur> détermine la quantité de flou à appliquer à la forme. Plus le nombre est grand, plus la forme est floue. Voici trois exemples avec différentes valeurs de stdDeumation :

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter5" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="2"　/>
　　　　</filter>
　　　　<filter　id="blurFilter6" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="6"　/>
　　　　</filter>
　　　　<filter　id="blurFilter7" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="12"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);"　/>
<rect　x="150"　y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);"　/>
<rect　x="300" y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);"　/>
</svg>

Effet de l'image après l'exécution :

Notez comment le rectangle devient de plus en plus flou, en fonction de la valeur de l'attribut stdDeumation du filtre appliqué. La valeur plus élevée, plus la forme est floue.

Flouter le canal Alpha

Dans l'exemple précédent, SourceGraphic est utilisé comme entrée, ce qui signifie que la couleur RGB de la forme est utilisée comme entrée du filtre. Vous pouvez choisir d'utiliser le canal Alpha de la forme comme entrée, en définissant la valeur SourceAlpha sur l'attribut in de l'élément <feGaussianBlur>. Voici un exemple :

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter8" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceAlpha" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);"　/>　
</svg>

Effet de l'image après l'exécution :

Attention, même si un rectangle est défini avec une teinte verte, la sortie du filtre est noire et blanche. Cela se produit lorsque le filtre de flou Gauss est appliqué au canal Alpha plutôt que au canal graphique (RGB).

Filtre de décalage

Le filtre de décalage accepte une entrée et déplace cette entrée dans la sortie. Cela signifie qu'il peut déplacer la forme vers le haut, le bas, la gauche ou la droite. Par conséquent, il fonctionne de manière similaire à une transformation, mais cela se fait dans le filtre. Voici un exemple :

<svg　width="500"　height="250">
<defs>
　　　　<filter id="offsetFilter1" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feOffset　in="SourceGraphic"　dx="80"　dy="20"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　filter:　url(#offsetFilter1);"　/>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　"　/>
</svg>

Dans cet exemple, deux rectangles identiques sont définis à des emplacements complètement identiques. Un des rectangles applique le filtre d'offset, qui le déplace vers le bas et vers la droite.

Effet de l'image après l'exécution.

Il semble que le filtre d'offset ait également d'autres effets sur les formes (un certain flou), mais je ne suis pas sûr de pourquoi cela se produit. J'ai jusqu'à présent été incapable de trouver toute explication sur la raison de ce phénomène.

Filtres de matrice de couleur

Les filtres de matrice de couleur peuvent appliquer une transformation de matrice aux couleurs des formes. Voici un exemple :

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="colorMatrixFilter1" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feColorMatrix　in="SourceGraphic"　type="matrix"
　　　　　　　　　　　　　　　　values="0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　"/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　none;　fill:　#0000ff;　filter:　url(#colorMatrixFilter1);"　/>
</svg>

Les valeurs de la matrice sont fournies dans l'attribut values de l'élément <feColorMatrix>. Il doit y avoir au total4 x 5=20 valeur. Ces valeurs seront appliquées à la couleur de la forme originale, comme suit :

　0　0　0　rouge　　　0
　0　0　0　vert　0
　0　0　0　bleu　　0
　0　0　0　1　　　　　0

Effet de l'image après l'exécution :

Attention : les résultats des filtres de matrice de couleur dans Chrome et Firefox sont quelque peu étranges. Le rectangle ci-dessus est défini par la couleur de remplissage, mais une fois que le filtre de matrice de couleur a terminé son travail, seules les contours restent.

Filtres de mélange

Les filtres de mélange peuvent combiner les entrées de plusieurs filtres en une seule. Voici un exemple :

<svg　width="500"　height="250">
　　<defs>
　　　　<filter　id="blurFilter3"　y="-10"　height="40"　x="-10" width="150">
　　　　　　<feOffset　in="SourceAlpha"　dx="3"　dy="3"　result="offset3"　/>
　　　　　　<feGaussianBlur　in="offset3"　stdDeviation="3"　　result="blur3"/>
　　　　　　<feBlend in="SourceGraphic" in}}2="blur3" x="-10" width="160"/>
　　　　</filter>
　　</defs>
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　　filter: url(#blurFilter3);"　/>
</svg>

Déclaration d'un exemple utilisant3filtres appliqués sur des effets de filtrage. Les deux premiers sont les décalages liés et l'effet de flou gaussien. Le troisième estIl faut deux entrées (in et in2) et le mélange d'un effet.

L'effet produit est très similaire à celui obtenu par le compositeur de filtre mentionné précédemment dans cet article.