Saturation Effect using SVG Color Matrix in C#

Have you ever noticed how some images on the internet look too bright, or the colors are just not quite right? This is because of a phenomenon called the saturation effect. In this article, we will learn how to achieve the saturation effect with an SVG color matrix in C#.

Firstly, we’ll learn about the saturation effect and take a look at C# SVG API to apply the SVG color matrix filter. Next, we’ll walk through the steps of how to fix the saturation effect by using the color matrix to adjust the colors in an image. Finally, we’ll provide useful links for further enhancements. So let’s get started!

This article shall cover the following topics:

  1. What is Saturation Effect and SVG Color Matrix
  2. C# SVG API for Saturation Effect using Color Matrix
  3. How to Use SVG Color Matrix for Saturation Effect
  4. Create Saturation Effect using Color Matrix in C#

What is Saturation Effect and SVG Color Matrix

The saturation effect is a common image processing technique that is used to make an image appear more vibrant. It describes the intensity of the color.

The saturation effect is caused by the way our brains process color. When we see an image, our brain automatically adjusts the colors to make them look more natural. However, when an image has too much color, or the colors are not evenly balanced, our brain has a harder time processing the image, which can cause the saturation effect.

We can achieve the saturation effect using the <feColorMatrix> SVG filter element. It provides a filter for color transforms to change colors based on a transformation matrix.

C# SVG API for Saturation Effect using Color Matrix

The saturation effect is a special case of using the color matrix. We will be using the Aspose.SVG for .NET API for using the saturation operation of the <feColorMatrix> filter primitive. The API allows the loading, parsing, rendering, creation, and conversion of SVG files to popular formats without any software dependencies.

Please either download the DLL of the API or install it using NuGet.

PM> Install-Package Aspose.SVG

How to Use SVG Color Matrix for Saturation Effect

The <feColorMatrix> applies a matrix transformation to the RGBA channels of each pixel in the input image. We can use SVG <feColorMatrix> element for saturation effect by following the steps given below:

  1. Define an SVG document and set the SVG namespace URL.
  2. Create an image element and a filter element.
  3. Append the graphic element.
  4. Create a feColorMatrix element and add it to the filter element.
  5. Save the output SVG image.

The following section describes how to transform these steps into C# code and create a saturation effect in SVG.

Create Saturation Effect using Color Matrix in C#

We can create a saturation effect using the <feColorMatrix> element by following the steps given below:

  1. Firstly, create an instance of the SVGDocument class.
  2. Next, access the root SVG element and specify the namespace URL for SVG.
  3. Then, initialize the SVGImageElement class object.
  4. Meanwhile, set an image path and other properties for the SVGImageElement.
  5. Next, define the SVGDefsElement class object and add it to the root element.
  6. Then, create the SVGFilterElement class object and add it to the SVGDefsElement.
  7. Next, define the SVGFEColorMatrixElement class object.
  8. Then, set the required attributes i.g. type: saturate
  9. After that, add the SVGFEColorMatrixElement to the SVGFilterElement.
  10. Finally, save the output SVG file using the Save() method.

The following code sample shows how to create a saturation effect with the color matrix in C#.

Source image lighthouse.jpg

Source input image

Saturation Effect using SVG Color Matrix

Saturation Effect using SVG Color Matrix in C#

<svg xmlns="http://www.w3.org/2000/svg">
    <image href="file:///C:/Files/lighthouse.jpg" height="640" width="480" x="20" y="20" filter="url(#CM)"/>
    <defs>
        <filter id="CM">
            <feColorMatrix in="SourceGraphic" type="saturate" values="2"/>
        </filter>
    </defs>
</svg>

Get a Free API License

You can get a free temporary license to try the library without evaluation limitations.

Conclusion

In this article, you have learned about the saturation effect on images. We have also seen how to apply the saturation color effect using the SVG color matrix filters in C#. Besides, you can learn more about Aspose.SVG for .NET using documentation and explore various features offered by the API. In case of any ambiguity, please feel free to contact us on our free support forum.

See Also