Filtres de couleur – Code C#

Dans cet article, vous découvrirez les principaux filtres de couleur – <feColorMatrix> et <feComponentTransfer>. Vous trouverez ici des exemples montrant comment écrire du code SVG pour créer des effets de saturation, hueRotate et luminanceToAlpha, ainsi que des exemples détaillés en C# d’utilisation de l’espace de noms Aspose.Svg.Filters pour appliquer des filtres de couleur aux éléments SVG ou des bitmaps.

Filtres de couleur – Color Filters

Aspose.SVG for .NET vous permet de créer divers effets de filtre SVG pris en charge dans presque tous les navigateurs modernes. Lorsqu’il s’agit de gestion des couleurs, <feColorMatrix> est la meilleure option. Il s’agit d’un type de filtre de couleur qui utilise une matrice pour affecter les valeurs de couleur de chaque canal RGBA. Le <feComponentTransfer> est l’une des primitives de filtre SVG les plus puissantes. Il donne le contrôle sur les canaux RGBA individuels de l’image, vous permettant de créer des effets SVG de type Photoshop ; par exemple, il peut être utilisé pour posteriser des images.

Color Matrix – Primitive de filtre <feColorMatrix>

Le <feColorMatrix> est l’un des principaux filtres de couleur. Cette primitive de filtre applique une transformation matricielle aux canaux RGBA de chaque pixel de l’image d’entrée. En conséquence, un nouvel ensemble de valeurs de couleur et alpha est produit. Dans le cas courant, la matrice de couleurs est écrite comme une opération de l’attribut type de l’élément <feColorMatrix>. Dans les cas particuliers des matrices de couleurs, les opérations auxiliaires de type ’type’ sont utilisées: saturate, hueRotate, luminanceToAlpha.

Effet de saturation – Saturation Effect

L’effet de saturation est un cas particulier d’utilisation de la matrice de couleurs. Voyons des exemples de l’opération saturate utilisée dans l’attribut type de la primitive de filtre <feColorMatrix>:

<svg xmlns="http://www.w3.org/2000/svg">
    <image filter="url(#saturation-effect)" href="http://docs.aspose.com/svg/net/images/api/lighthouse.jpg" x="20" y="20" height="440" width="330" />
    <defs>
        <filter id="saturation-effect">
            <feColorMatrix in="SourceGraphic" type="saturate" values="2"></feColorMatrix>
        </filter>
    </defs>
</svg>

Le code SVG ci-dessus illustre la création de l’effet de saturation et vous rappelle qu’en SVG, un filtre est défini par un élément <filter> qui est défini à l’intérieur d’un élément <defs>. Il n’est jamais rendu lui-même et est décrit conceptuellement comme un élément qui inclut ses éléments enfants, les primitives de filtre.

Le code C# suivant crée un fichier SVG avec une image avec une saturation accrue, rendant les couleurs plus éclatantes. L’effet de saturation est obtenu par la primitive de filtre <feColorMatrix> avec les valeurs spécifiées dans le code.

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

// Apply saturation filter to an <image> element in SVG programmatically

// 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 an <image> element and add it to the <svg> element
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/lighthouse.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 440;
    imageElement.Width.BaseVal.Value = 330;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#saturation)");
    svgElement.AppendChild(imageElement);

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

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

    // Create a <feColorMatrix> element and add it to the <filter> element
    SVGFEColorMatrixElement feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
    feColorMatrixElement.SetAttribute("type", "saturate");
    feColorMatrixElement.SetAttribute("values", "2");
    filterElement.AppendChild(feColorMatrixElement);

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

Considérons le code é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 <image> avec des attributs et ajoutez-le à l’élément <svg>:
   • Vous pouvez utiliser la méthode CreateElementNS(namespaceURI, qualifiedName) pour créer une instance de la classe SVGImageElement.
   • Définir des attributs spécifiant sa source, sa position et sa taille. L’utilisation d’un attribut filter de imageElement faisant référence au nom d’url d’un attribut id dans filterElement permet d’appliquer l’effet de filtre SVG à l’image.
   • Pour ajouter un imageElement à svgElement, vous pouvez utiliser la méthode AppendChild().
4. 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>.
5. 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>, il peut être appliqué à l’image.
   • Utilisez la méthode AppendChild() pour ajouter le <filter> à l’élément <defs>.
6. Créez un élément <feColorMatrix>, définissez les attributs et ajoutez-le à l’élément <filter>:
   • Utilisez la méthode CreateElementNS() pour créer une instance de la classe SVGFEColorMatrix.
   • Appelez la méthode SetAttribute(name, value) pour définir les attributs type et values.
   • 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 feColorMatrixElement.In1.BaseVal = "SourceGraphic".
   • Utilisez la méthode AppendChild() pour ajouter <feColorMatrix> à l’élément <filter>.
7. Appelez la méthode Save() pour enregistrer le document SVG avec l’image saturée dans un fichier local spécifié par chemin.

HueRotate

Le cas spécifique des matrices de couleurs est la rotation de l’image le long de la roue chromatique. L’opération type="hueRotate" est utilisée pour changer la tonalité de couleur d’une image ou d’un élément. Avec hueRotate, vous pouvez créer des effets de couleurs vives et riches et personnaliser l’apparence des éléments de votre site Web. Le hueRotate prend des values – l’angle de rotation en degrés. Cet angle indique l’angle de rotation de la roue chromatique. La valeur peut être comprise entre 0 et 360, où 0 et 360 représentent la tonalité de couleur d’origine et 180 représente une rotation de 180 degrés (les couleurs sont inversées).

L’exemple SVG suivant illustre l’utilisation de l’opération type="hueRotate" dans la primitive de filtre <feColorMatrix>:

<defs>
    <filter id="hueRotate">
        <feColorMatrix in="SourceGraphic" type="hueRotate" values="150"></feColorMatrix>
    </filter>
</defs>

Le code C# ci-dessous crée une primitive de filtre <feColorMatrix> et l’ajoute à un élément SVG <filter> existant pour appliquer un effet hueRotate à l’aide d’Aspose.SVG pour l’API .NET. L’effet de rotation de teinte modifie la teinte du graphique d’entrée, déplaçant efficacement ses couleurs autour de la roue chromatique.

    // Creating a <feColorMatrix> element and add to the <filter> element
    var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
    feColorMatrixElement.SetAttribute("type", "hueRotate");
    feColorMatrixElement.SetAttribute("values", "150");
    filterElement.AppendChild(feColorMatrixElement);

Cette figure est une série d’images avec diverses valeurs d’attribut type. La figure montre l’image source (a), les images traitées par le filtre feColorMatrix – après l’application de l’effet de saturation (b), hueRotate (c) et luminanceToAlpha (d).

Canaux de couleur – Primitive de filtre <feComponentTransfer>

La primitive de filtre <feComponentTransfer> est un élément SVG puissant qui vous permet d’effectuer des opérations linéaires, tabulaires et discrètes avec les canaux d’image et de modifier le gamma de chaque canal (RGBA). Cela permet divers réglages et effets de couleur tels que les changements de contraste, la correction gamma, l’inversion des couleurs, le réglage de la luminosité, etc.

Habituellement, les sous-éléments <feFuncR>, <feFuncG>, <feFuncB> et <feFuncA> sont utilisés avec <feComponentTransfer>. Ils définissent les fonctions de transformation pour les canaux rouge, vert, bleu et alpha, respectivement, et peuvent contenir des attributs tels que type, tableValues, slope, intercept, amplitude, exponent et offset qui définissent le comportement de la transformation. Dans l’attribut type, le type de fonction qui permet de modifier ce composant est déterminé. Il existe cinq types de fonctions: identity, table, discrete, linear et gamma. Lorsque type="linear", l’attribut slope indique la pente de la fonction linéaire. Si l’attribut n’est pas spécifié, alors l’effet est comme si une valeur de 1 était spécifiée. Regardons un exemple SVG:

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="330" width="440" x="10" y="10" filter="url(#rgba)" />
    <defs>
		<filter id="rgba">
			<feComponentTransfer>
				<feFuncR type="linear" slope="1.1"/>
				<feFuncG type="linear" slope="1.5"/>
				<feFuncB type="linear" slope="2.0"/>
				<feFuncA type="identity"/>
			</feComponentTransfer>
		</filter>
	</defs>
</svg>

Ici, nous allons écrire du code C# pour créer le même effet de transformation linéaire de canal d’image que dans le code SVG ci-dessus.

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

// Apply RGBA component transfer filter to an <image> element in SVG programmatically

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

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

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

    // Create a <feComponentTransfer> element and add it to the <filter> element
    SVGFEComponentTransferElement feComponentTransferElement = (SVGFEComponentTransferElement)document.CreateElementNS(SvgNamespace, "feComponentTransfer");
    filterElement.AppendChild(feComponentTransferElement);

    // Create a <feFuncR> element and add it to the <feComponentTransfer> element
    SVGFEFuncRElement feFuncRElement = (SVGFEFuncRElement)document.CreateElementNS(SvgNamespace, "feFuncR");
    feFuncRElement.SetAttribute("type", "linear");
    feFuncRElement.SetAttribute("slope", "1.1");
    feComponentTransferElement.AppendChild(feFuncRElement);

    // Creating a <feFuncG> element and add it to the <feComponentTransfer> element
    SVGFEFuncGElement feFuncGElement = (SVGFEFuncGElement)document.CreateElementNS(SvgNamespace, "feFuncG");
    feFuncGElement.SetAttribute("type", "linear");
    feFuncGElement.SetAttribute("slope", "1.5");
    feComponentTransferElement.AppendChild(feFuncGElement);

    // Create a <feFuncB> element and add it to the <feComponentTransfer> element
    SVGFEFuncBElement feFuncBElement = (SVGFEFuncBElement)document.CreateElementNS(SvgNamespace, "feFuncB");
    feFuncBElement.SetAttribute("type", "linear");
    feFuncBElement.SetAttribute("slope", "2.0");
    feComponentTransferElement.AppendChild(feFuncBElement);

   // Create a <feFuncA> element and add it to the <feComponentTransfer> element
   SVGFEFuncAElement feFuncAElement = (SVGFEFuncAElement)document.CreateElementNS(SvgNamespace, "feFuncA");
   feFuncAElement.SetAttribute("type", "identity");
   feComponentTransferElement.AppendChild(feFuncAElement);
  
    // Save the document
    document.Save(Path.Combine(OutputDir, "rgba.svg"));
}

La figure montre l’image source (a) et les images traitées par le filtre feComponentTransfer (b, c).

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!