JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jquery/jquery-color/master/jquery.color.js"></script>
<div id="svgwrapper">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="72.667px" height="22px" viewBox="0 0 72.667 22" enable-background="new 0 0 72.667 22" xml:space="preserve">
<g>
 <image src="https://s3-eu-west-1.amazonaws.com/nasimir-static/Nasimir-G01.svg"></image>
</g>
</svg>
    </div>

JavaScript

/*notice: includes https://raw.github.com/jquery/jquery-color/master/jquery.color.js in managed resources panel*/

jQuery.Color.hook('fill');

var animationSpeed = 200;

$('#svgwrapper svg').hover(    
    function(){    
        $(this).animate({backgroundColor:'#000000'},animationSpeed)
        .find('path').animate({fill:'#ffffff'},animationSpeed );
    },                         
    function(){
         $(this).animate({backgroundColor:'#ffffff'},animationSpeed)
        .find('path').animate({fill:'#000000'},animationSpeed );
    }
);