Ombre portée – Filtres SVG – Code C#

Filtres SVG

Aspose.SVG pour .NET vous permet d’ouvrir, de créer ou de modifier un document SVG et d’apporter des modifications à son contenu. Vous pouvez appliquer de nombreux filtres SVG disponibles pour les éléments SVG ou les bitmaps afin d’obtenir le résultat souhaité. L’espace de noms Aspose.Svg.Filters contient des classes et des interfaces liées aux effets de filtre dans la spécification SVG. Pour créer un effet d’ombre portée, vous pouvez utiliser quelques primitives de filtre:

• la classe SVGFEDropShadowElement pour créer un élément <feDropShadow> pour implémenter l’effet d’ombre portée ;
• la classe SVGFEOffsetElement pour créer un élément <feOffset> pour décaler un calque en SVG ;
• la classe SVGFEGaussianBlurElement correspond à un élément <feGaussianBlur> pour implémenter l’effet Flou Gaussien ;
• le SVGFEBlendElement pour créer un élément <feBlend> pour mélanger deux objets ou plus.

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

Ombre portée – Drop Shadow – Code SVG

L’effet d’ombre en SVG est un effet visuel courant utilisé pour créer l’illusion d’une ombre derrière un élément SVG. Il apporte de la profondeur et du réalisme au contenu SVG en donnant l’impression que l’élément flotte au-dessus de l’arrière-plan. En outre, un effet d’ombre portée peut être utilisé pour faire ressortir une image. Il existe plusieurs façons d’implémenter l’effet d’ombre en SVG. Examinons-en deux.

Remarque: En SVG, le filtre est défini par l’élément <filter>, qui est défini dans un élément <defs>. Il n’est jamais rendu lui-même et est décrit conceptuellement comme l’élément qui inclut ses enfants – les primitives de filtre. L’élément <filter> possède un ensemble d’attributs. Les attributs requis pour la primitive de filtre sont x, y, width, height et id. Ils définissent la zone de l’image à laquelle le filtre sera appliqué. Et l’attribut id donne un identifiant unique à un élément SVG et identifie un élément dans un document SVG.

Primitives de filtre feOffset + feGaussianBlur + feBlend

À notre avis, le plus efficace est d’utiliser trois filtres pour obtenir l’effet d’ombre. Cela vous permettra d’affiner l’effet même si cela nécessite plus de code:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20" y="-20" height="150" width="150" >
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
</svg>

Trois filtres sont utilisés pour créer un effet d’ombre portée (figure c):

1. La primitive de filtre <feOffset> est utilisée pour décaler un calque en SVG. Il prend in="SourceAlpha", décale le résultat de 10 px vers la droite et de 10 px vers le bas, et stocke le résultat dans le tampon sous "offset". Notez que le canal alpha de la forme est utilisé comme entrée. La valeur SourceAlpha conduit à un résultat de couleur noire (figure a).
2. <feGaussianBlur> prend in="offset", applique un flou de stdDeviation="3" et stocke le résultat dans un tampon temporaire nommé "blur".
3. Le filtre <feBlend> mélange deux objets ; il prend deux entrées in="SourceGraphic" et in2="blur" puis mélange le SourceGraphic au-dessus de l’image floue noire décalée (figure b). Son attribut mode spécifie le mode de fusion.

La figure suivante illustre étape par étape la création d’une ombre portée:

Primitive de filtre feDropShadow

En SVG, l’effet d’ombre peut être obtenu en utilisant la primitive de filtre feDropShadow sur l’élément <filter>. L’élément <feDropShadow> possède les attributs nécessaires pour créer l’ombre portée, tels que dx, dy et stdDeviation, et il vous permet également d’ajouter de la couleur et de la transparence à l’ombre portée! Ceci est réalisé en utilisant les attributs flood-color et flood-opacity. Voyons comment créer un effet d’ombre à l’aide de la primitive de filtre feDropShadow:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
	<defs>
        <filter id="shadow-red" x="-20" y="-20" height="100" width="100" >
			<feDropShadow dx="10" dy="10" stdDeviation="3"  flood-color="CornflowerBlue" />
		</filter>
	</defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow-red)" />
</svg>

Remarque: si l’attribut flood-color n’est pas spécifié ou est mal spécifié, alors l’ombre par défaut sera noire.

Ombre portée – Code C#

Ici, nous allons écrire le code С# pour créer un effet d’ombre portée pour un rectangle orange à l’aide de trois primitives de filtre.

L’extrait de code suivant montre comment créer un effet d’ombre portée à l’aide de l’API Aspose.SVG pour .NET.

1. Utilisez le constructeur SVGDocument() pour créer un document SVG vide.
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() 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 les attributs et ajoutez-le à l’élément <defs>:
   • Utilisez la méthode CreateElementNS() de la classe SVGDocument pour créer une instance de la classe SVGFilterElement.
   • Appelez la méthode SetAttribute(name, value) pour définir les attributs x, y, height et width.
   • N’oubliez pas de définir l’attribut id.
   • Utilisez la méthode AppendChild() pour ajouter le <filter> à l’élément <defs>.
5. Créez un élément <feOffset>, définissez les attributs et ajoutez-le à l’élément <filter>:
   • Utilisez la méthode CreateElementNS() de la classe SVGDocument pour créer une instance de la classe SVGFEOffsetElement.
   • Appelez la méthode SetAttribute() pour définir les attributs dx, dy et result.
   • N’oubliez pas de définir l’attribut in1. Utilisez la propriété de type SVGAnimatedLength, dont les données statiques peuvent être définies ou lues via la construction feOffsetElement.In1.BaseVal = "SourceAlpha".
   • Utilisez la méthode AppendChild() pour ajouter le <feOffset> à l’élément <filter>.
6. De la même manière, créez, définissez des attributs et ajoutez à l’élément <filter> des éléments tels que <feGaussianBlur> et <feBlend>.
7. Créez un élément rectangle <rect> qui sera une forme SVG avec un effet d’ombre portée. Il reçoit une couleur fill (#ffa500 – orange) et l’attribut filter est défini sur "url(#shadow)," faisant référence au filtre précédemment défini avec Id = "shadow".
8. Appelez la méthode Save() pour enregistrer le document avec le filtre d’ombre portée dans un fichier local spécifié par chemin.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;
...
    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

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

        // Creating a <filter> element and add to the defsElement
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.Id = "shadow";
        filterElement.SetAttribute("x", "-20px");
        filterElement.SetAttribute("y", "-20px");
        filterElement.SetAttribute("height", "150px");
        filterElement.SetAttribute("width", "150px");
        defsElement.AppendChild(filterElement);

        // Create a <feOffset> filter primitive and add it to the filterElement
        var feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
        feOffsetElement.In1.BaseVal = "SourceAlpha";
        feOffsetElement.SetAttribute("result", "offset");
        feOffsetElement.SetAttribute("dx", "10");
        feOffsetElement.SetAttribute("dy", "10");
        filterElement.AppendChild(feOffsetElement);

        // Create a <feGaussianBlur> filter primitive and add it to the filterElement
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "offset";
        feGaussianBlurElement.StdDeviationX.BaseVal = 3;
        feGaussianBlurElement.StdDeviationY.BaseVal = 3;
        feGaussianBlurElement.SetAttribute("result", "blur");
        filterElement.AppendChild(feGaussianBlurElement);

        // Create a <feBlend> filter primitive and add it to the filterElement
        var feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
        feBlendElement.In1.BaseVal = "SourceGraphic";
        feBlendElement.In2.BaseVal = "blur";
        feBlendElement.SetAttribute("mode", "normal");
        filterElement.AppendChild(feBlendElement);

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

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

Lorsque vous exécutez ce code C#, il génère un fichier SVG avec un effet d’ombre portée pour un rectangle orange. L’ombre sera de couleur noire, décalée de 10 unités horizontalement et de 10 unités verticalement par rapport au rectangle source. Le fichier drop-shadow-effect.svg résultant ressemble à la figure c: un rectangle orange avec une ombre noire.

Effet d’ombre portée à l’aide de l’API SVG Builder

L’API Aspose.SVG Builder est conçue pour rationaliser la création et la mise à jour d’éléments SVG en C#. Regardons un exemple C# pour implémenter l’effet d’ombre portée (exactement le même exemple que dans le paragraphe précédent) en utilisant SVG Builder API. Ce code présente l’utilisation d’un modèle de création fluide (fluent builder pattern) pour créer des documents SVG concis et lisibles, en tirant parti des capacités de la bibliothèque Aspose.SVG:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...

    using (var document = new SVGDocument())
    {
        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
        var svg = new SVGSVGElementBuilder()
            .Width(400).Height(400)
            .AddDefs(d => d
                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                    .AddFeDropShadow(sh => sh
                        .Dx(10).Dy(10)
                        .StdDeviation(3)
                    )
                )
            )
            .AddRect(r => r
                .Rect(40, 40, 100, 100)
                .Filter(f => f.FilterId("shadow"))
                .Style(s => s.Fill(Color.Orange))
            )
            //Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
    }

Le modèle de générateur fluide vous permet de créer des éléments SVG et d’appliquer des filtres de manière plus concise et lisible. Chaque appel de méthode, comme .AddFilter ou .AddRect indique clairement son objectif, vous permettant de comprendre la structure du document SVG en un coup d’œil. Cet exemple démontre une approche plus expressive de la création de documents SVG à l’aide de SVG Builder, offrant une lisibilité, une maintenabilité et une flexibilité améliorées par rapport à l’approche manuelle de création d’éléments présentée dans l’exemple précédent. À la suite de l’exécution du code, nous obtenons le même rectangle orange avec une ombre noire:

Ombre portée du texte – Text Drop Shadow

Cet exemple C# crée un fichier SVG similaire à celui que nous avons vu précédemment dans la section feDropShadow filter primitive. Seulement ici, nous utilisons la primitive de filtre feDropShadow pour créer une ombre colorée pour un texte SVG, pas pour le rectangle orange.

L’extrait de code suivant montre comment créer une ombre portée de texte à l’aide de l’API Aspose.SVG pour .NET:

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

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

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

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

        // Creating a <filter> element and add to the defsElement
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.Id = "text-shadow";
        filterElement.SetAttribute("x", "-20px");
        filterElement.SetAttribute("y", "-20px");
        filterElement.SetAttribute("height", "150px");
        filterElement.SetAttribute("width", "150px");
        defsElement.AppendChild(filterElement);

        // Create a <feDropShadow> filter primitive and add it to the filterElement
        var feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
        feDropShadowElement.StdDeviationX.BaseVal = 3;
        feDropShadowElement.StdDeviationY.BaseVal = 3;
        feDropShadowElement.SetAttribute("dx", "3");
        feDropShadowElement.SetAttribute("dy", "3");
        feDropShadowElement.SetAttribute("flood-color", "LightCoral");
        filterElement.AppendChild(feDropShadowElement);

        // Create a <text> element and add it to the svgElement
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "4em";
        textElement.SetAttribute("x", "20px");
        textElement.SetAttribute("fill", "CornflowerBlue");
        textElement.SetAttribute("y", "100px");
        textElement.TextContent = "Drop Shadow Effect";
        textElement.SetAttribute("filter", "url(#text-shadow)");
        svgElement.InsertBefore(textElement, svgElement.FirstChild);

        // Save the document
        document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
    }

Ombre portée du texte – Utilisation de SVG Builder

Exactement le même exemple pour un texte avec une ombre colorée, mais nous l’implémentons à l’aide d’Aspose.SVG Builder:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...

    using (var document = new SVGDocument())
    {
        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
        var svg = new SVGSVGElementBuilder()
            .AddDefs(d => d
                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                    .AddFeDropShadow(sh => sh
                        .Dx(3).Dy(3)
                        .StdDeviation(3)
                        .FloodColor(Color.LightCoral)
                    )
                )
            )
            .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
                .Filter(f => f.FilterId("shadow"))
                .AddContent("Drop Shadow Effect")
            )
            
            // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
    }

Les images text-drop-shadow.svg et text-drop-shadow-builder.svg résultantes ressemblent à ceci:

Le texte comporte une ombre portée avec une couleur de remplissage LightCoral et un rayon de flou de 3 unités. L’ombre sera décalée de 3 unités horizontalement et de 3 unités verticalement par rapport au texte, créant ainsi un effet d’ombre portée visuellement attrayant.

Voir également

• Pour plus d’informations sur les primitives de filtre, voir le W3C Filter Effects Module.
• Si vous vous demandez comment écrire du code SVG pour créer des filtres SVG, un flou gaussien, des effets d’ombre, des effets d’éclairage ou un dégradé linéaire et un dégradé radial, veuillez consulter l’article Filtres et dégradés SVG.
• 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.