Guide des filtres SVG – Gaussian blur, ombres et lumière

Les filtres SVG créent des effets visuels tels que flou, ombres portées, éclairage, changements de saturation, rotation de teinte et ajustements de canaux directement dans le balisage SVG. Ce tutoriel explique comment les filtres sont définis dans <defs>, comment les primitives de filtre s’enchaînent et comment appliquer un filtre à une forme, un texte ou une image.

Réponse rapide : définissez un <filter> SVG dans <defs>, ajoutez une ou plusieurs primitives comme <feGaussianBlur>, <feOffset>, <feBlend>, <feSpecularLighting> ou <feColorMatrix>, puis appliquez le filtre avec filter="url(#filter-id)" sur l’élément cible.

<svg width="220" height="140" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="soft-blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="110" cy="70" r="45" fill="#20b2aa" filter="url(#soft-blur)" />
</svg>

Dans cet article, vous apprendrez à définir un filtre, combiner des primitives de flou, ombre, éclairage et couleur, contrôler la région de filtre, choisir entre <feGaussianBlur>, <feColorMatrix> et <feComponentTransfer>, et corriger les problèmes de rendu courants.

Qu’est-ce qu’un filtre SVG ?

Un filtre SVG modifie un graphique vectoriel ou bitmap avant son rendu final. Il peut flouter un élément, créer une ombre, modifier les canaux couleur, ajouter un éclairage, déformer des pixels ou combiner plusieurs résultats intermédiaires. Le filtre reste dans le balisage SVG, donc il reste scalable et modifiable.

Un filtre est défini par <filter> dans <defs>. Le <filter> lui-même n’est pas rendu; ses enfants, les primitives de filtre, effectuent les opérations. Les attributs importants sont x, y, width, height, filterUnits et primitiveUnits.

Filtres SVG et primitives de filtre

Chaque primitive de filtre réalise une opération et produit un résultat. Les attributs in et result permettent de chaîner les sorties et entrées.

Catégorie	Élément	Rôle	Attributs clés
Gaussian Blur	<feGaussianBlur>	Floute l’entrée	in, stdDeviation, result
Ombre	<feOffset>	Décale le canal alpha	in, dx, dy, result
Ombre	<feBlend>	Mélange deux couches	in, in2, mode
Éclairage	<feSpecularLighting>	Crée un reflet brillant	in, surfaceScale, specularExponent, lighting-color
Éclairage	<fePointLight>	Définit une source lumineuse ponctuelle	x, y, z
Composition	<feComposite>	Combine deux résultats	operator, k1, k2, k3, k4
Couleur	<feColorMatrix>	Transforme les valeurs RGBA par matrice	type, values
Couleur	<feComponentTransfer>	Modifie les canaux séparément	feFuncR, feFuncG, feFuncB, feFuncA

<fePointLight> n’est pas une primitive autonome de sortie; c’est une source lumineuse utilisée comme enfant de primitives d’éclairage.

Comment créer des filtres SVG

1. Ajoutez un bloc <defs>.
2. Créez un <filter> avec un id stable.
3. Ajoutez des primitives comme <feGaussianBlur>, <feOffset>, <feBlend> ou <feColorMatrix>.
4. Utilisez in et result pour chaîner les étapes.
5. Agrandissez x, y, width et height si flou ou ombre dépassent la forme.
6. Appliquez le filtre avec filter="url(#id)".

Gaussian Blur

<feGaussianBlur> adoucit l’image selon une fonction gaussienne. stdDeviation contrôle le rayon de flou; une valeur agit sur les deux axes, deux valeurs créent un flou directionnel.

<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="f1" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
        <filter id="f2" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
        </filter>
    </defs>
    <g stroke="none" fill="#20B2AA">
        <ellipse cx="60" cy="80" rx="55" ry="35" />
        <ellipse cx="200" cy="80" rx="55" ry="35" filter="url(#f1)" />
        <ellipse cx="340" cy="80" rx="55" ry="35" filter="url(#f2)" />
    </g>
</svg>

Le flou dépasse souvent les limites de la forme; agrandissez la région du filtre pour éviter les bords coupés.

Vous pouvez créer un effet Gaussian Blur en C# avec Aspose.SVG for .NET. Consultez Gaussian Blur pour des exemples avec SVGFEGaussianBlurElement.

Effet d’ombre portée

Une ombre SVG se construit souvent avec SourceAlpha, un décalage, un flou et un mélange avec le graphique original.

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <ellipse cx="95" cy="90" rx="75" ry="55" fill="#20B2AA" filter="url(#shadow)" />
</svg>

1. <feOffset> décale SourceAlpha et stocke le résultat dans "offset".
2. <feGaussianBlur> floute ce résultat et le nomme "blur".
3. <feBlend> combine SourceGraphic avec l’ombre floutée.

Effets de lumière SVG

Les effets de lumière utilisent des primitives comme <feDiffuseLighting> et <feSpecularLighting>, avec des sources lumineuses comme <fePointLight>. Les primitives d’éclairage utilisent souvent le canal alpha comme carte de surface.

<svg height="300" width="300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id = "F1">
            <feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur" />
            <feSpecularLighting result = "light" in = "blur" specularExponent = "25" lighting-color = "#bbbbbb">
                <fePointLight x = "80" y = "60" z = "200" />
            </feSpecularLighting>
            <feComposite in = "SourceGraphic" in2 = "light" operator = "arithmetic" k1 ="0" k2 ="1" k3 ="1" k4 ="0" />
        </filter>
    </defs>
    <g fill = "INDIANRED" filter = "url(#F1)">
        <circle cx="100" cy="100" r="60" />
        <circle cx="100" cy="230" r="60" />
        <circle cx="230" cy="100" r="60" />
        <circle cx="230" cy="230" r="60" />
    </g>
</svg>

Dans cet exemple, trois éléments sont des primitives de filtre et <fePointLight> définit la source de lumière. <feGaussianBlur> prépare SourceAlpha, <feSpecularLighting> crée le reflet, puis <feComposite> combine ce reflet avec SourceGraphic.

Filtres de couleur

<feColorMatrix> applique une transformation matricielle aux canaux RGBA. <feComponentTransfer> donne un contrôle par canal avec <feFuncR>, <feFuncG>, <feFuncB> et <feFuncA>.

Erreurs courantes et corrections

Problème	Cause	Correction
Sortie de filtre coupée	Région x, y, width, height trop petite	Agrandissez la région du filtre
Ombre invisible	Mauvaise entrée ou mélange incorrect	Utilisez SourceAlpha pour <feOffset>
Effet de lumière plat	Canal alpha non préparé ou valeurs faibles	Floutez SourceAlpha et ajustez les paramètres
Couleurs inattendues	Matrice ou transfert incorrect	Vérifiez les valeurs étape par étape

FAQ – filtres SVG

Comment appliquer un filtre SVG à un élément ?

Définissez le filtre dans <defs> et appliquez filter="url(#filter-id)" à une forme, un texte, un groupe ou une image.

Pourquoi mon flou ou mon ombre est-il recadré ?

Ces effets dépassent souvent les limites d’origine. Agrandissez x, y, width et height de la région de filtre.

Quelle est la différence entre feColorMatrix et feComponentTransfer ?

Utilisez <feColorMatrix> pour une transformation globale comme saturation ou hue rotation. Utilisez <feComponentTransfer> pour contrôler séparément les canaux rouge, vert, bleu ou alpha.

Puis-je créer des filtres SVG avec Aspose.SVG for .NET ?

Oui. Filtres SVG en C# montre comment créer des filtres avec Aspose.SVG for .NET.

Ressources associées

• Filter Effects Module Level 1 est la spécification W3C pour les effets de filtre SVG et CSS.
• Filtres SVG en C# explique la création de flou, ombres, éclairage et effets couleur avec Aspose.SVG for .NET.
• Travailler avec les filtres SVG en Python montre comment créer, appliquer et modifier des filtres avec Aspose.SVG for Python via .NET.
• Gaussian Blur, Drop Shadow Effect et Color Filters donnent des workflows C# ciblés.
• Dégradés SVG et Couleur SVG complètent les effets visuels.