Why is img SVG not being styled?

Question

css

Hello. You need to use an SVG icon. Exported from PSD and inserted via img tag. I read that it is required to process through JavaScript, so that the code in HTML would be visible. But fill does not want to work in any way. I need to change the fill on hover.
Please pay attention to the code

svg code image

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19" height="23" viewBox="0 0 19 23">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image id="Vector_Smart_Object" data-name="Vector Smart Object" width="19" height="23" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAQAAABDyLxRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhBx4UAjgSMU+LAAABJklEQVQoz4XTvUsDMRzG8W9yxSJFHMRFsA4F7SxIVbgMjp0cRPBlkYo6dXWQIhb/AHXRUXDTXTtY6RUHX/AF7CDdhNJJxA4O3ok6pPWWM3nGh09+JCERHpHpZYNF5qkoAGKRaIgyKaDZKWQkOyIFPFI3MYULBKyGVRRzgTemuQkr0T5CD1nSvFOmxgRprhlnhE/uOVV+hy2wS1974TPnjJH5G9Qkp0rCgzX2MeWbjCTJDuYUuYuRJ25Ex2oLJFnLrG19IcNGFFDTzDEyX/1o1jKyRHVQs4ZlbyuaXVrYenUKnKU4s0bmMPcSCK+LBv2WiQ8SnwNs2RMeJKgzYEBPjErgg2UDCsipL/0szyj+y/LqNvwym7Qo0M0FJ1zh4DLDJK8U1CHAL/9aRCBZBw0JAAAAAElFTkSuQmCC"/>
</svg>

in html I wrote img src='path to svg'' but thanks to the script through the inspector I see the code from img.svg

js code

jQuery('img.svg').each(function(){
      var $img = jQuery(this);
      var imgID = $img.attr('id');
      var imgClass = $img.attr('class');
      var imgURL = $img.attr('src');

      jQuery.get(imgURL, function(data) {
          // Get the SVG tag, ignore the rest
          var $svg = jQuery(data).find('svg');

          // Add replaced image's ID to the new SVG
          if(typeof imgID !== 'undefined') {
              $svg = $svg.attr('id', imgID);
          }
          // Add replaced image's classes to the new SVG
          if(typeof imgClass !== 'undefined') {
              $svg = $svg.attr('class', imgClass+' replaced-svg');
          }

          // Remove any invalid XML tags as per http://validator.w3.org
          $svg = $svg.removeAttr('xmlns:a');

          // Replace image with new SVG
          $img.replaceWith($svg);

      }, 'xml');

  });

but no matter how hard I try, fill doesn't work
. I looked at the examples, it's strange that I don't have svg in my code

Answer 1

use symbol+ use
https://css-tricks.com/svg-symbol-good-choice-icons/