Color Filters – C# Code

In this article, you will learn about the main color filters – <feColorMatrix> and <feComponentTransfer>. Here you’ll find examples showing how to write SVG code to create saturation, hueRotate, and luminanceToAlpha effects, as well as detailed C# examples of using the Aspose.Svg.Filters namespace to apply color filters to SVG elements or bitmaps.

Color Filters

Aspose.SVG for .NET lets you create various SVG filter effects that are supported in almost all modern browsers. When it comes to color handling, <feColorMatrix> is the best option. It is a type of color filter that uses a matrix to affect the color values for each RGBA channel. The <feComponentTransfer> is one of the most powerful SVG filter primitives. It gives control over the individual RGBA channels of the image, allowing you to create Photoshop-like SVG effects; for example, it can be used to posterize images.

Color Matrix – <feColorMatrix> filter primitive

The <feColorMatrix> is one of the main color filters. This filter primitive applies a matrix transformation to the RGBA channels of each pixel in the input image. As a result, a new set of color and alpha values is produced. In the common case, the color matrix is written as an operation of the type attribute of the <feColorMatrix> element. In the special cases of color matrices, the auxiliary operations of the type are used: saturate, hueRotate, luminanceToAlpha.

Saturation Effect

The saturation effect is a special case of using the color matrix. Let’s see examples of the saturate operation used in the type attribute of the <feColorMatrix> filter primitive:

<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>

The above SVG code illustrates the creation of the saturation effect and reminds you that in SVG, a filter is defined by a <filter> element that is set inside a <defs> element. It is never rendered itself and is conceptually described as an element that includes its child elements, the filter primitives.

The following C# code creates an SVG file with an image with increased saturation, making the colors appear more vibrant. The saturation effect is achieved by the <feColorMatrix> filter primitive with the values specified in the code.

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

    // 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/net/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 to the <svg> element
        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
        svgElement.AppendChild(defsElement);

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

        // Creating a <feColorMatrix> element and add to the <filter> element
        var 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"));
    }

Let’s consider the code step by step:

1. Create an instance of the SVGDocument class.
2. The RootElement property of the SVGDocument class points to the document’s root <svg> element.
3. Create an <image> element with attributes and add it to the <svg> element:
   • You can use the CreateElementNS(namespaceURI, QualifiedName) method to create an instance of the SVGImageElement class.
   • Set attributes specifying its source, position, and size. Using a filter attribute of imageElement referring to the url name of an id attribute in filterElement allows applying the SVG filter effect to the image.
   • To add an imageElement to svgElement, you can use the AppendChild() method.
4. Create a <defs> element and add it to the <svg> element:
   • Use the CreateElementNS() method to create an instance of the SVGDefsElement class.
   • Use the AppendChild() method to add the <defs> element to the <svg> element.
5. Create a <filter> element, set an id attribute, and add <filter> to the <defs> element:
   • Use the CreateElementNS() method to create an instance of the SVGFilterElement class.
   • Set a filterElement.Id for the <filter> element, it can be applied to the image.
   • Use the AppendChild() method to add the <filter> to the <defs> element.
6. Create a <feColorMatrix> element, set attributes, and add it to the <filter> element:
   • Use the CreateElementNS() method to create an instance of the SVGFEColorMatrix class.
   • Call the SetAttribute(name, value) method to set type and value attributes.
   • Don’t forget to set in1 attribute. Use the property of the SVGAnimatedLength type, the static data for which can be set or read through the construction feColorMatrixElement.In1.BaseVal = "SourceGraphic".
   • Use the AppendChild() method to add the <feColorMatrix> to the <filter> element.
7. Call the Save() method to save the SVG document with the saturated image to a local file specified by path.

HueRotate

The specific case of color matrices is image rotation along the color wheel. The type="hueRotate" operation is used to change the color tone of an image or element. With hueRotate, you can create vivid, rich color effects and customize the appearance of your website elements. The hueRotate takes a values – the rotation angle in degrees. This angle indicates the angle to rotate the color wheel. The value can be between 0 and 360, where 0 and 360 represent the original color tone, and 180 represents a 180-degree rotation (the colors are reversed).

The following SVG example illustrates using the type="hueRotate" operation in the <feColorMatrix> filter primitive:

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

The C# code below creates a <feColorMatrix> filter primitive and adds it to an existing SVG <filter> element to apply a hueRotate effect using Aspose.SVG for .NET API. The hue rotation effect changes the hue of the input graphic, effectively shifting its colors around the color wheel.

    // 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);

This figure is a series of images with various type attribute values. The figure demonstrates the source image (a), the images processed by the feColorMatrix filter – after the saturation effect applying (b), hueRotate (c), and luminanceToAlpha (d).

Color Channels – <feComponentTransfer> filter primitive

The <feComponentTransfer> filter primitive is a powerful SVG element that allows you to perform linear, tabular, discrete operations with image channels and change the gamma of each channel (RGBA). This enables various color adjustments and effects such as contrast changes, gamma correction, color inversion, brightness adjustment, and more.

Usually sub-elements <feFuncR>, <feFuncG>, <feFuncB>, and <feFuncA> are used with <feComponentTransfer>. They define the transform functions for the red, green, blue, and alpha channels, respectively, and can contain attributes such as type, tableValues, slope, intercept, amplitude, exponent, and offset that define the behavior of the transform. In the type attribute, the type of function that allows modifying this component is determined. There are five function types: identity, table, discrete, linear, and gamma. When type="linear", the slope attribute indicates the slope of the linear function. If the attribute is not specified, then the effect is as if a value of 1 were specified. Let’s look at an SVG example:

<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>

Here we will write C# code to create the same image channel linear transformation effect as in the above SVG code.

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 = 330;
        imageElement.Width.BaseVal.Value = 440;
        imageElement.X.BaseVal.Value = 10;
        imageElement.Y.BaseVal.Value = 10;
        imageElement.SetAttribute("filter", "url(#rgba)");
        svgElement.AppendChild(imageElement);

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

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

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

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

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

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

        // Creating a <feFuncA> element and add to the <feComponentTransfer> element
        var feFuncAElement = (SVGFEFuncAElement)document.CreateElementNS(SvgNamespace, "feFuncA");
        feFuncAElement.SetAttribute("type", "identity");
        feComponentTransferElement.AppendChild(feFuncAElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "rgba.svg"));
    }

The figure demonstrates the source image (a) and the images processed by the feComponentTransfer filter (b, c).

See also

• You can download the complete examples and data files from GitHub.

• About downloading from GitHub and running examples, you find out from the How to Run the Examples section.

• For more information about filter primitives, see the W3C Filter Effects Module page and the SVG Filters and Gradients article.

• Aspose.SVG offers free SVG Web Applications for converting SVG or image files, merging SVGs, image vectorizing, SVG sprite generating, SVG to Base64 data encoding, and more. These online applications work on any operating system with a web browser and don’t require additional software installation. It’s a fast and easy way to efficiently and effectively solve your SVG-related tasks!