Flou gaussien – Filtres SVG – Code C#

Filtres SVG

Aspose.SVG pour .NET vous permet d’ouvrir ou de créer, de modifier un document SVG et d’apporter des modifications à son contenu. Vous pouvez modifier le document, notamment en appliquant les nombreux filtres disponibles pour 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. La classe SVGFEGaussianBlurElement correspond à un élément <feGaussianBlur> pour implémenter l’effet Flou Gaussien.

En SVG, un filtre est défini par l’élément <filter>, qui se définit 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.

Dans cet article, vous apprendrez à écrire du code SVG pour créer un filtre de flou gaussien et examinerez des exemples C# détaillés d’utilisation de la classe SVGFEGaussianBlurElement pour appliquer l’effet de flou gaussien aux éléments SVG et aux bitmaps.

Flou gaussien – Code SVG

Le filtre SVG de flou gaussien est un type de filtre qui applique un effet de flou au contenu d’un élément SVG à l’aide d’une distribution gaussienne. C’est l’un des filtres les plus utilisés en SVG pour créer des effets doux, fluides et visuellement attrayants. Le filtre <feGaussianBlur> crée un effet de flou doux. L’attribut StdDeviation spécifie le nombre qui caractérise l’écart type pour l’opération de flou. Si deux nombres sont fournis, le premier nombre représente une valeur d’écart type le long de l’axe x du système de coordonnées et le second – sur l’axe y. Chaque filtre nécessite le traitement d’une image source. Sinon, le filtre n’aura rien à restituer et ne fonctionnera donc pas. Les données d’entrée de la primitive de filtre sont spécifiées dans l’attribut in. La valeur par défaut est in="SourceGraphic".

Voici un exemple d’application d’un filtre SVG de flou gaussien avec différentes valeurs de l’attribut stdDeviation à un élément rectangle SVG :

<svg height="150" width="750" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="f1" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
        <filter id="f2" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
        </filter>
        <filter id="f3" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
        </filter>
		<filter id="f4" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
		<filter id="f5" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <g fill="#ffa500">
        <rect x="40" y="40" width="60" height="60" />
        <rect x="40" y="40" width="60" height="60" transform="translate(120)" filter="url(#f1)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(240)" filter="url(#f2)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(360)" filter="url(#f3)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(480)" filter="url(#f4)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(600)" filter="url(#f5)" />
    </g>
</svg>

Comme vous le voyez, la valeur stdDeviation contrôle la propagation de la distribution gaussienne. Une valeur stdDeviation plus grande entraîne plus de flou, tandis qu’une valeur plus petite crée un effet plus doux. Remarque: Le flou ajouté autour d’une forme rend souvent l’image de sortie plus grande que celle d’origine. Nous devons utiliser des nombres négatifs pour x et y pour éviter de couper les graphiques ajoutés par le filtre. Dans l’exemple ci-dessus, nous utilisons x="-20" et y="-20".

Flou gaussien – Code C#

Dans l’exemple de code SVG précédent, nous avons expliqué en détail comment créer un filtre de flou gaussien, et nous savons maintenant quels éléments et attributs utiliser. Créons le code C# pour implémenter un tel filtre à l’aide d’Aspose.SVG pour l’API .NET.

Selon la syntaxe SVG, l’élément <filter> doit être situé dans un élément <defs>, et la primitive de filtre <feGaussianBlur> se trouve uniquement à l’intérieur de l’élément <filter>. Par conséquent, pour programmer des filtres SVG, vous devez créer et imbriquer correctement les éléments requis.

1. Si vous créez un document SVG à partir de zéro, 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 <rect>, définissez les attributs requis et ajoutez-le à l’élément <svg>.
   • Utilisez la méthode CreateElementNS(namespaceURI, qualifiedName) de la classe SVGDocument pour créer une instance de SVGRectElement.
   • Une option pour définir les valeurs de l’attribut consiste à utiliser la méthode SetAttribute(name, value). Une autre façon consiste à utiliser les méthodes d’accès aux points SVG DOM en utilisant des propriétés du type SVGAnimatedLength, dont les données statiques peuvent être définies ou lues via la construction: element.X.BaseVal.Value.
   • Utilisez la méthode AppendChild() pour ajouter l’élément <rect> à l’élément <svg>.
4. De même, créez un élément <defs> et ajoutez-le à l’élément <svg>.
5. Pour créer un élément <filter>, utilisez le même algorithme : Utilisez la méthode CreateElementNS() pour créer une instance de SVGFilterElement. N’oubliez pas de définir les attributs x, y, height, width et id à l’aide de la méthode SetAttribute() et d’ajouter le <filter> à l’élément <defs>.
6. Créez un élément <feGaussianBlur> et définissez les attributs in et stdDeviation. Ajoutez-le ensuite à l’élément <filter>.
   • Utilisez la méthode CreateElementNS() pour créer une instance de la classe SVGFEGaussianBlurElement.
   • Pour 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 feGaussianBlurElement.In1.BaseVal = "SourceGraphic".
   • Utilisez les propriétés StdDeviationX et StdDeviationY de la classe SVGFEGaussianBlurElement pour définir l’attribut setDerivation.
   • Appelez la méthode AppendChild() pour ajouter le <feGaussianBlur> à l’élément <filter>.
7. Appelez la méthode Save() pour enregistrer le document 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 <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 = 60;
        rectElement.Height.BaseVal.Value = 60;
        rectElement.SetAttribute("fill", "#ffa500");
        rectElement.SetAttribute("filter", "url(#F1)");
        svgElement.AppendChild(rectElement);

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

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

        // Create a <feGaussianBlur> element and add it to the <filter> element
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
        feGaussianBlurElement.StdDeviationX.BaseVal = 10;
        feGaussianBlurElement.StdDeviationY.BaseVal = 10;
        filterElement.AppendChild(feGaussianBlurElement);

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

Si vous effectuez le rendu du fichier résultat, vous verrez un rectangle orange flou exactement comme celui de la figure précédente, deuxième dans l’ordre avec stdDeviation=“10”.

Image d’arrière-plan flou

Pour utiliser le filtre SVG de flou gaussien pour le flou d’arrière-plan, vous pouvez appliquer le filtre à un élément SVG qui fait office d’arrière-plan derrière le contenu principal. Il peut s’agir, par exemple, de n’importe quel bitmap. Le filtre de flou vous permet de créer un effet de flou d’arrière-plan visuellement attrayant tout en gardant le contenu du premier plan net et net.

Pour obtenir un flou d’image d’arrière-plan avec SVG, suivez ces quelques étapes. Elles sont similaires aux étapes décrites dans l’exemple C# précédent:

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. Vous pouvez utiliser la méthode CreateElementNS(namespaceURI, qualifiedName) de la classe SVGDocument pour créer des instances de SVGImageElement, SVGDefsElement, SVGFilterElement, et les classes SVGFEGaussianBlurElement.
   Par exemple, si vous envisagez d’utiliser un bitmap comme arrière-plan, créez une instance de la classe SvgImageElement et définissez des attributs spécifiant sa source, sa position et sa taille. Pour ajouter un imageElement à svgElement, vous pouvez utiliser la méthode AppendChild(). L’utilisation d’un attribut filter de imageElement faisant référence au nom url de filterElement (dans l’attribut id) permet d’appliquer l’effet de filtre SVG à l’image.
4. Ajoutez tous les attributs nécessaires aux éléments créés et imbriquez-les correctement.
5. Après avoir créé un filtre de flou et défini un filterElement.Id pour l’élément <filter>, il peut être appliqué à l’image.
6. Appelez la méthode Save() pour enregistrer le document avec l’image d’arrière-plan flou dans un fichier local spécifié par chemin.

Voici un exemple illustrant l’implémentation d’une image d’arrière-plan flou:

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 an <image> element and add to the <svg> element
        var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
        imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
        imageElement.Height.BaseVal.Value = 480;
        imageElement.Width.BaseVal.Value = 640;
        imageElement.X.BaseVal.Value = 20;
        imageElement.Y.BaseVal.Value = 20;
        imageElement.SetAttribute("filter", "url(#F1)");
        svgElement.AppendChild(imageElement);

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

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

        // Create a <feGaussianBlur> element and add to the <filter> element
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
        feGaussianBlurElement.StdDeviationX.BaseVal = 5;
        feGaussianBlurElement.StdDeviationY.BaseVal = 5;
        filterElement.AppendChild(feGaussianBlurElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "blur-background-image.svg"));
    }

Flou de l’image d’arrière-plan à 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 le flou d’arrière-plan (exactement le même exemple que dans le paragraphe précédent) à l’aide de 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.IO;
...

    var svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
    using (var document = new SVGDocument(svgContent, "."))
    {
        // 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("gaussian-blur")
                    .AddFeGaussianBlur(g => g
                    .StdDeviation(5, 5)
                    )
                )
            )
            .AddImage(i => i
                .X(20).Y(20).Height(480).Width(640)
                .Href("http://docs.aspose.com/svg/images/api/seaside.jpg")
                .Filter(fl => fl
                    .FilterId("gaussian-blur")
                )
            )
            // 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, "gaussian-blur-builder.svg"));
    }

Le modèle de générateur fluide (fluent builder pattern) 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 indique clairement son objectif, vous permettant de comprendre d’un seul coup d’œil la structure du document SVG. 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.

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.
• Aspose.SVG propose des Applications Web SVG gratuites pour convertir des fichiers SVG ou image, fusionner des SVG, vectoriser des images, générer des sprites SVG, encoder des données SVG en Base64, et bien plus encore. Ces applications en ligne fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur Web et ne nécessitent pas d’installation de logiciel supplémentaire. C’est un moyen rapide et simple de résoudre efficacement vos tâches liées au SVG!