How to make the gray scale effect of image in IE browser?

 

 

Hello Developers,
Today I am going to show you how to make the gray scale effect of image in IE browser.
Because filter gray scale css property (filter: grayscale(1)) not working in IE browser.
so please use below code only for IE browser.

<svg>
<defs>
  <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
    <feColorMatrix type="saturate" values="0" />
  </filter>
</defs>
<image xlink:href="https://www.cloudweblabs.com/wp-content/uploads/2019/07/webdeveloper.png" width="600" height="600" filter="url(#desaturate)" />
</svg>

Output will look like as below:

Before

 

After

 

Thanks and keep visiting 🙂

Blog Catagory : HTML / CSS