JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg"
	 xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="300"> 

<filter id="greyscale">
	<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
										 0.3333 0.3333 0.3333 0 0
										 0.3333 0.3333 0.3333 0 0
										 0      0      0      1 0"/>
</filter>
<image x="0" y="0" xlink:href="http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg " filter="url(#greyscale)" width="300" height="300"/>
</svg>

CSS

img {
    width: 300px;
    height: 300px;
}