title: How do I make an <image> inside of SVG change color?
body: <p>I made an SVG in Photoshop. The two items between the  tags below were layers I had in the PS file before I exported it to SVG (which, I think, is why they are  instead of . Now, I'm trying to make one of those  item turn (#00599c) blue upon mouseover.</p>
  
  <p>I imagine CSS is the easiest way to accomplish this but I can not figure out how to do it.</p>
  
  <p>Thanks</p>
  
  <pre><code>   &lt;style&gt;
        .hover { 
          background-color: #00599c;
      }
        &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="787.25" height="599.75" viewBox="0 0 3149 2399"&gt;
        &lt;image xlink:href="data:img/png;base64,random symbols..." class="hover" x="2512" y="845" width="310" height="419"/&gt;
  
         &lt;image xlink:href="data:img/png;base64,random symbols..." x="2413" y="411" width="578" height="543"/&gt;
  
        &lt;/svg&gt;
  
      &lt;/body&gt;
  </code></pre>