Tuto SVG 11 - Filtres

Public visé: dev lambda.

Objectif

• Appliquer des effets comme le flou ou la désaturation.

Références W3C

• Filter Effects 1: https://www.w3.org/TR/filter-effects-1/

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
    <filter id="mono">
      <feColorMatrix type="saturate" values="0"/>
    </filter>
  </defs>
  <circle cx="60" cy="60" r="30" fill="#3a6ea5" filter="url(#blur)"/>
  <rect x="120" y="30" width="70" height="60" fill="#f2c94c" filter="url(#mono)"/>
</svg>

tutos-svg-11-filtres.svg

À retenir

• Les filtres peuvent être coûteux, surtout sur mobile.
• Un filtre s'applique via filter="url(#id)".
• Combine plusieurs primitives dans un même <filter>.

Exercice

• Augmente stdDeviation et observe le résultat.