JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="15" width="100" height="35" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
  <text x="100" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>

CSS

#svg-image-gray {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
#svg-image-gray:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}