SVG Filter Effects: Duotone Images with

A Quick Recap


To rapidly recap, the feComponentTransfer crude enables you to change every one of the R, G, B and A parts present in a pixel. As such, feComponentTransfer permits the free control of each shading channel, just as the alpha channel, in the info component. 

The RGBA parts are altered by running various types of capacities on these segments. To do that, every segment has its very own component. These part components are settled inside feComponentTransfer. The RGBA segment components are: feFuncR, feFuncG, feFuncB, and feFuncA. 

The sort quality is utilized on a part component to characterize the kind of capacity you need to use to alter this segment. There are as of now five accessible capacity types: character, table, discrete, straight, and gamma. These capacity types are utilized to change the RGBA segments (the hues and alpha channel) of a source realistic. We referenced that you can alter at least one segment at once and that you can change channels autonomously, applying an alternate capacity to every part component.



In the past article, we demystified the discrete capacity and perceived how it very well may be utilized to posterize pictures. In this article, we will begin by utilizing the table capacity to make a duotone impact like what you can make in Photoshop.

Creating a Duotone Effect in SVG

To recreate this effect in SVG, we will need to desaturate the image first. This is possible using the filter primitive.

Then, we need to be able to create and provide a gradient map for the browser to map the new grayscale image to.