title: Weird blue underline on svg hover
body: <p>I have svg for social media icon and everytime I hover on it, it creates this blue underline and nothing seems to take it off. How can I remove it?</p>
  
  <p><a href="https://i.stack.imgur.com/8xRhf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8xRhf.png" alt="enter image description here"></a></p>
  
  <p>Here's how I include it.</p>
  
  <pre><code>&lt;a class="footer-socialmedia-icons" style="padding-right:0.5rem;" target="_blank" href="https://www.facebook.com"&gt;
      &lt;img width="35px" height="35px" src="/files/IMG/facebook.svg" alt="facebook logo" class=""&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>EDIT:
  here's the svg:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch --&gt;
      &lt;title&gt;facebook&lt;/title&gt;
      &lt;desc&gt;Created with Sketch.&lt;/desc&gt;
      &lt;defs&gt;&lt;/defs&gt;
      &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
          &lt;g id="facebook" fill="#DBC5DA"&gt;
              &lt;path d="M24.826,0 C11.137,0 0,11.137 0,24.826 C0,38.514 11.137,49.652 24.826,49.652 C38.514,49.652 49.652,38.514 49.652,24.826 C49.652,11.137 38.516,0 24.826,0 Z M31,25.7 L26.961,25.7 L26.961,40.096 L20.976,40.096 L20.976,25.7 L18.131,25.7 L18.131,20.612 L20.976,20.612 L20.976,17.321 C20.976,14.964 22.096,11.281 27.016,11.281 L31.451,11.298 L31.451,16.237 L28.232,16.237 C27.708,16.237 26.963,16.499 26.963,17.623 L26.963,20.613 L31.523,20.613 L31,25.7 Z" id="Shape"&gt;&lt;/path&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>As it turns out, the blue line is underneath all  tags. Tried <code>text-decoration:none</code> on  but it doesn't do a thing.</p>