Effets d'éclairage SVG – Filtres SVG – Code C#

Effets d’éclairage SVG

Aspose.SVG for .NET vous permet de créer divers effets d’éclairage pour améliorer l’attrait visuel des graphiques et des illustrations. Les effets d’éclairage peuvent ajouter de la profondeur, du réalisme et une sensation d’éclairage aux images plates. L’effet d’éclairage est créé en SVG à l’aide d’un ensemble de filtres. Considérez-en quelques-uns: <feSpecularLighting> et <fePointLight>. Vous pouvez combiner plusieurs filtres, créer et contrôler les détails pour un effet d’éclairage.

Dans cet article, vous apprendrez à écrire du code SVG pour créer des effets d’éclairage SVG et examinerez des exemples C# détaillés d’utilisation de l’espace de noms Aspose.Svg.Filters pour appliquer les effets d’éclairage aux éléments SVG ou aux bitmaps.

Source de lumière ponctuelle – Code SVG

Le filtre <fePointLight> définit une source de lumière qui définit un effet de lumière ponctuelle. Il peut être utilisé dans la primitive <feDiffuseLighting> ou <feSpecularLighting> en tant qu’enfant. Les attributs spécifiques x, y et z indiquent la position de la source lumineuse ponctuelle. Le filtre <feSpecularLighting> éclaire une image en utilisant son canal alpha comme bump map. Prenons un exemple SVG d’effet de lumière:

<svg xmlns="http://www.w3.org/2000/svg">
	<rect x="40" y="40" width="150" height="150" fill="Teal" filter="url(#light)"/>
	<defs>
		<filter id="light">
			<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
			<feSpecularLighting in="blur" result="light" specularExponent="30" lighting-color="#ddd">
				<fePointLight x="70" y="70" z="150"/>
			</feSpecularLighting>
			<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
		</filter>
	</defs>
</svg>

Dans cet exemple, quatre filtres SVG sont appliqués pour créer l’effet de lumière (figure b):

1. <feGaussianBlur> prend l’entrée SourceAlpha, qui est le canal alpha de l’image source. Le résultat est stocké dans un tampon temporaire nommé "blur".
2. L’éclairage est réalisé avec les primitives de filtre <feSpecularLighting> et <fePointLighting>. Le <feSpecularLighting> utilise le tampon "blur" comme modèle d’élévation de surface et génère un effet d’éclairage à partir d’une source ponctuelle qui est définie dans le filtre <fePointLighting>. Le résultat est stocké dans le tampon "light".
3. Le filtre <feComposite> prend deux entrées in ="SourceGraphic" et in2 ="light" et les combine à l’aide de l’opération de composition arithmétique. La sortie de l’opérateur arithmétique pour chaque pixel de résultat est calculée comme suit : k1·in1·in2 + k2·in1 + k3·in2 + k4

Si l’on supprime le filtre flou gaussien dans le code du filtre “light” (figure b), on obtient le filtre “flat-light” suivant, qui donne une lumière plus plate (figure c):

<filter id="flat-light">
    <feSpecularLighting  result="light" specularExponent="30" lighting-color="#ddd">
        <fePointLight x="70" y="70" z="150"/>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>

Source de lumière SVG – Code C#

L’extrait de code C# suivant montre comment créer le même effet d’éclairage SVG (filtre “light”) que dans le code SVG ci-dessus. Considérons le code C# étape par étape:

1. Créez une instance de la classe SVGDocument.
2. La propriété RootElement de la classe SVGDocument pointe vers l’élément racine <svg> du document.
3. Créez un élément <defs> et ajoutez-le à l’élément <svg>:
   • Utilisez la méthode CreateElementNS(namespaceURI,qualifiedName) pour créer une instance de la classe SVGDefsElement.
   • Utilisez la méthode AppendChild() pour ajouter l’élément <defs> à l’élément <svg>.
4. Créez un élément <filter>, définissez un attribut id et ajoutez <filter> à l’élément <defs>:
   • Utilisez la méthode CreateElementNS() pour créer une instance de la classe SVGFilterElement.
   • Définissez un filterElement.Id pour l’élément <filter>. Utilisez la propriété Id de la classe SVGElement.
   • Utilisez la méthode AppendChild() pour ajouter le <filter> à l’élément <defs>.
5. Créez un élément <feGaussianBlur> et définissez les attributs in, result et stdDeviation. Ajoutez-le ensuite à l’élément <filter>.
   • Utilisez la méthode CreateElementNS() pour créer une instance de la classe SVGFEGaussianBlurElement.
   • Appelez la méthode SetAttribute(name, value) pour définir les attributs in1 et result.
   • Utilisez les propriétés StdDeviationX et StdDeviationY de la classe SVGFEGaussianBlurElement pour définir l’attribut setDerivation.
   • Utilisez la méthode AppendChild() pour ajouter <feGaussianBlur> à l’élément <filter>.
6. Créez les éléments <feSpecularLighting>, <fePointLight> et <feComposite> de la même manière. Spécifiez leurs attributs requis et ajoutez ces éléments dans le bon ordre au filtre.
7. Créez un élément <rect> avec des attributs et ajoutez-le à l’élément <svg>:
   • Vous pouvez utiliser la méthode CreateElementNS() pour créer une instance de la classe SVGRectElement.
   • Définir des attributs spécifiant sa position, sa taille et son remplissage. L’utilisation d’un attribut filter faisant référence au nom url d’un attribut id dans filterElement permet d’appliquer l’effet d’éclairage SVG au rectangle.
   • Pour ajouter le rectElement à svgElement, vous pouvez utiliser la méthode AppendChild().
8. Appelez la méthode Save() pour enregistrer l’image SVG résultante dans un fichier local spécifié par chemin.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Create an SVG <rect> with specular lighting effect using filters in C#

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "light";
    defsElement.AppendChild(filterElement);

    // Create a <feGaussianBlur> element and add to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.StdDeviationX.BaseVal = 5;
    feGaussianBlurElement.StdDeviationY.BaseVal = 5;
    feGaussianBlurElement.SetAttribute("in1", "SourceAlpha");
    feGaussianBlurElement.SetAttribute("result", "blur");
    filterElement.AppendChild(feGaussianBlurElement);

    // Create a feSpecularLighting filter primitive and add it to the filterElement
    SVGFESpecularLightingElement feSpecularLightingElement = (SVGFESpecularLightingElement)document.CreateElementNS(SvgNamespace, "feSpecularLighting");
    feSpecularLightingElement.In1.BaseVal = "blur";
    feSpecularLightingElement.SetAttribute("result", "light");
    feSpecularLightingElement.SetAttribute("specularExponent", "30");
    feSpecularLightingElement.SetAttribute("lighting-color", "#ddd");
    filterElement.AppendChild(feSpecularLightingElement);

    // Create a fePointLight filter primitive and add it to the feSpecularLighting element
    SVGFEPointLightElement fePointLightElement = (SVGFEPointLightElement)document.CreateElementNS(SvgNamespace, "fePointLight");
    fePointLightElement.SetAttribute("x", "70");
    fePointLightElement.SetAttribute("y", "70");
    fePointLightElement.SetAttribute("z", "150");
    feSpecularLightingElement.AppendChild(fePointLightElement);

    // Create a feComposite filter primitive and add it to the filterElement
    SVGFECompositeElement feCompositeElement = (SVGFECompositeElement)document.CreateElementNS(SvgNamespace, "feComposite");
    feCompositeElement.In1.BaseVal = "SourceGraphic";
    feCompositeElement.In2.BaseVal = "light";
    feCompositeElement.SetAttribute("operator", "arithmetic");
    feCompositeElement.SetAttribute("k1", "0");
    feCompositeElement.SetAttribute("k2", "1");
    feCompositeElement.SetAttribute("k3", "1");
    feCompositeElement.SetAttribute("k4", "0");
    filterElement.AppendChild(feCompositeElement);

    // Create a <rect> element and set the "fill" and "filter" attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 40;
    rectElement.Y.BaseVal.Value = 40;
    rectElement.Width.BaseVal.Value = 150;
    rectElement.Height.BaseVal.Value = 150;
    rectElement.SetAttribute("fill", "Teal");
    rectElement.SetAttribute("filter", "url(#light)");
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "svg-lighting-effect.svg"));
}

L’image résultante, Lighting-effect.svg, ressemble exactement à la figure b ci-dessus.

Voir également

• Vous pouvez télécharger les exemples complets et les fichiers de données depuis GitHub.

• À propos du téléchargement depuis GitHub et de l’exécution d’exemples, vous le découvrirez dans la section Comment exécuter les exemples.

• Pour plus d’informations sur les primitives de filtre, consultez la page W3C Filter Effects Module et l’article Filtres et dégradés SVG.