htmlcssimagesvggrayscale

How to make any SVG image grayscaled using css?


I have some images with svg extension. I need to get those images in grayscale mode. Is it possible to do it only using css or whatever I can do with files or the <svg> tag itself? I don't want to use online tools for this convert, I need the pure styling "tools", like html css js. I have read that adding classes to <img> tag might be helpful. By the way, I need it in its original quality, so just making it gray-colored is the only objective.


Solution

  • Use the <img> and CSS function grayscale().

    <img src="img.svg" style="filter: grayscale(1);"/>