Effets de filtres SVG : créer des effets visuels avancés
Maîtrisez les filtres SVG pour le flou, les ombres, les effets de couleur et les traitements visuels complexes. Guide complet des primitives de filtre et combinaisons créatives.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- Les filtres SVG appliquent des effets visuels accélérés par GPU comme le flou, l'ombre et la distorsion directement dans le navigateur
- Les primitives de filtre (feGaussianBlur, feColorMatrix, feTurbulence, etc.) peuvent être chaînées pour créer des effets complexes
- Des recettes créatives comme le verre dépoli, le néon lumineux et le relief sont construites en combinant des primitives de filtre simples
- Les performances varient considérablement — feColorMatrix est léger tandis que feTurbulence est lourd en calcul
- Utilisez les filtres CSS comme solution de repli pour les effets simples et réservez les filtres SVG pour les compositions avancées
La puissance des filtres SVG
Les filtres SVG permettent des effets visuels sophistiqués sans images raster. Des ombres simples aux distorsions complexes, les filtres transforment les graphiques vectoriels de manière puissante.
Les bases des filtres
Structure d'un filtre
<defs>
<filter id="myFilter">
<!-- Primitives de filtre ici -->
</filter>
</defs>
<rect filter="url(#myFilter)" .../>Région du filtre
Contrôlez les limites du filtre :
<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
<!-- Étend la zone du filtre au-delà de l'élément -->
</filter>Pro Tip: Étendez toujours la région du filtre (ex: x="-20%") lors de l'utilisation d'effets de flou ou d'ombre. Si la sortie de votre filtre semble coupée, la région du filtre est trop petite.
Effets de filtre courants
Flou (feGaussianBlur)
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>Flou variable :
<!-- Flou horizontal uniquement -->
<feGaussianBlur stdDeviation="10 0"/>
<!-- Flou vertical uniquement -->
<feGaussianBlur stdDeviation="0 10"/>Ombre portée (feDropShadow)
Ombre simple :
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>Ombre personnalisée
Plus de contrôle :
<filter id="custom-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offset"/>
<feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
<feComposite in="color" in2="offset" operator="in" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealEffets de couleur
Matrice de couleur (feColorMatrix)
Conversion en niveaux de gris :
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
</filter>Ton sépia :
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>Rotation de teinte :
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>Ajustement des couleurs
Luminosité/contraste :
<filter id="bright">
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" intercept="0"/>
<feFuncG type="linear" slope="1.5" intercept="0"/>
<feFuncB type="linear" slope="1.5" intercept="0"/>
</feComponentTransfer>
</filter>"Les filtres SVG sont le Photoshop du navigateur — superposez-les judicieusement et vous pouvez créer des effets qui nécessiteraient autrement un logiciel de retouche d'image lourd.
Déplacement et distorsion
Turbulence
Création de bruit :
<filter id="turbulence">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="2"/>
</filter>Carte de déplacement
Distorsion avec motif :
<filter id="displace">
<feTurbulence type="turbulence"
baseFrequency="0.02"
numOctaves="3"
result="noise"/>
<feDisplacementMap in="SourceGraphic"
in2="noise"
scale="30"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>Effets d'éclairage
Éclairage diffus
Éclairage de type 3D :
<filter id="diffuse">
<feDiffuseLighting lighting-color="#white" surfaceScale="5">
<fePointLight x="100" y="100" z="200"/>
</feDiffuseLighting>
</filter>Éclairage spéculaire
Reflets brillants :
<filter id="specular">
<feSpecularLighting specularConstant="1"
specularExponent="30"
lighting-color="white"
surfaceScale="5">
<fePointLight x="150" y="60" z="200"/>
</feSpecularLighting>
</filter>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeCombiner les filtres
Opérations de fusion
Superposition de résultats :
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Opérations de composition
Combiner avec des opérateurs :
<filter id="cutout">
<feImage href="mask.svg" result="mask"/>
<feComposite in="SourceGraphic"
in2="mask"
operator="in"/>
</filter>Recettes créatives
Verre dépoli
<filter id="frosted">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
<feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
<feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>Lueur néon
<filter id="neon">
<feFlood flood-color="#ff00ff" result="flood"/>
<feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
<feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Effet de relief
<filter id="emboss">
<feConvolveMatrix
order="3"
kernelMatrix="-2 -1 0
-1 1 1
0 1 2"/>
</filter>
Animation avec les filtres
Flou animé
<filter id="animated-blur">
<feGaussianBlur stdDeviation="0">
<animate attributeName="stdDeviation"
values="0;10;0"
dur="2s"
repeatCount="indefinite"/>
</feGaussianBlur>
</filter>Turbulence dynamique
<feTurbulence baseFrequency="0.02">
<animate attributeName="baseFrequency"
values="0.01;0.05;0.01"
dur="5s"
repeatCount="indefinite"/>
</feTurbulence>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealConsidérations de performance
Impact sur les performances
Performance des filtres :
feGaussianBlur : Lourd (dépend du rayon)
feColorMatrix : Léger
feTurbulence : Très lourd
feDisplacementMap : Lourd
Filtres chaînés : CumulatifConseils d'optimisation
- Minimiser la région du filtre
- Réduire le rayon de flou
- Limiter les effets chaînés
- Mettre en cache les filtres statiques
- Utiliser les filtres CSS quand c'est possible
Pour les effets simples comme le flou, les niveaux de gris ou l'ombre portée, le filter CSS est nettement plus rapide que les filtres SVG car il exploite le compositing accéléré par le matériel. Réservez les filtres SVG pour les effets que le CSS ne peut pas reproduire.
Alternative avec les filtres CSS
Quand c'est possible, utilisez le CSS :
.blurred {
filter: blur(5px);
}
.grayscale {
filter: grayscale(100%);
}Compatibilité navigateur
État du support
Support large :
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge
Support variable :
- feDisplacementMap
- feTurbulence
- feDiffuseLightingStratégies de repli
.element {
/* Repli */
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@supports (filter: url(#shadow)) {
.element {
box-shadow: none;
filter: url(#shadow);
}
}Conclusion
Les filtres SVG permettent des effets sophistiqués impossibles avec le CSS seul. Bien qu'intensifs en calcul, ils offrent un contrôle précis sur les traitements visuels. Utilisez-les judicieusement pour des effets percutants, en tenant toujours compte des performances et en fournissant des solutions de repli.
Créer des effets vectoriels filtrés
| Primitive de filtre | Effet | Coût en performance |
|---|---|---|
| feGaussianBlur | Flou doux / verre dépoli | Moyen (accéléré GPU) |
| feColorMatrix | Décalage de couleur, désaturation | Faible |
| feTurbulence | Bruit, textures organiques | Élevé (calcul au niveau pixel) |
| feDisplacementMap | Distorsion, effets d'ondulation | Élevé |
| feDropShadow | Ombres portées | Faible–Moyen |
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeSources et lectures complémentaires
- MDN Web Docs : Effets de filtres SVG — Référence détaillée pour chaque primitive de filtre SVG et ses attributs
- W3C SVG 2 : Effets de filtre — Spécification officielle du pipeline de filtres SVG et du modèle de compositing
- CSS-Tricks : Filtres SVG — Exemples visuels et recettes pour des combinaisons créatives de filtres SVG
- Smashing Magazine : Filtres SVG — Tutoriels avancés sur le chaînage des primitives de filtre pour des effets visuels en production