Applying shadow color using feColorMatrix tag looks dull in all the browsers, Why?

Question

I created a drop shadow in SVG using feColorMatrix for the shadow, so its kind of blue(rgba(62, 77, 184, 0)).

    <feColorMatrix result="output_0" type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.3 0 0 0 0 0.7 0 0 0 1 0"></feColorMatrix>

The outcome should be the same blue color rgba(62, 77, 184, 1).

The SVG filter seems to render the color a bit too light. Is there any way to fix that?

Answer 1

Your math is a bit off & you need to specify sRGB. The color matrix should be:

<feColorMatrix result="output_0" color-interpolation-filters="sRGB" type="matrix"values="0 0 0 0 0.243 0 0 0 0 0.302 0 0 0 0 0.7215 0 0 0 1 0"/>

Answer 2

Use color-interpolation:"sRGB" as property or CSS style for the filter/feColorMatrix tag. What is color interpolation? How it works?

I spend more time to find the reason behind this issue because When I googled it, I didn't see any clear explanation and felt nobody faced kind of issue. After the so much of hard work, I figured it out the solution so I came here to raise the question and share the answer here. Hope Someone will get help from this.