title: What is wrong with my SVG Path Code?
body: <p>I'm following this code pen but the author's code doesn't work for my own custom SVG from Illustrator. The original author puts a fill as an inline CSS style on the SVG path code. The white hover fill won't work if I don't make the SVG path code to white.</p>
  
  <p>By default - The image is invisible but should be color #788F9B.</p>
  
  <p><a href="https://i.stack.imgur.com/tnmnP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tnmnP.jpg" alt="Default"></a></p>
  
  <p>On hover it works:</p>
  
  <p><a href="https://i.stack.imgur.com/dls8O.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dls8O.jpg" alt="hover rollover"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a svg:hover #bino { 
    fill: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.84 136.85"&gt;
      &lt;path id="bino" d="M58.07,139.42a23.28,23.28,0,0,1-23.13-18.92v2.63a22.71,22.71,0,0,0,23.13,21.55A22.34,22.34,0,0,0,81.2,123.15v-2.66A22.86,22.86,0,0,1,58.07,139.42Z" transform="translate(-10.14 -29.37)" style="fill:#29aae1" /&gt;
      &lt;path d="M172.65,139.42a23.28,23.28,0,0,1-23.13-18.92v2.63a22.71,22.71,0,0,0,23.13,21.55,22.34,22.34,0,0,0,23.13-21.52v-2.66A23.28,23.28,0,0,1,172.65,139.42Z" transform="translate(-10.14 -29.37)" style="fill:#29aae1" /&gt;
      &lt;path d="M204.72,82.65h0l-43.63-47.3a29.17,29.17,0,0,0-24.18-4.2,21,21,0,0,0-16.29,21v2.63a15.35,15.35,0,0,0-4.73-1.05,14,14,0,0,0-6.31,1.58l0.53-4.2a21,21,0,0,0-16.29-21,29.75,29.75,0,0,0-23.65,4.73L25.48,83.18h0a47.88,47.88,0,1,0,80.42,35.22v-5.26a11.25,11.25,0,0,0,8.94,4.2,11.93,11.93,0,0,0,9.46-4.73v5.78a47.83,47.83,0,0,0,95.66,0A46.83,46.83,0,0,0,204.72,82.65ZM58.07,151.51a33.11,33.11,0,1,1,33.11-33.11h0a33,33,0,0,1-32.8,33.11H58.07Zm114.58,0a33.11,33.11,0,1,1,33.11-33.11h0A33,33,0,0,1,173,151.51h-0.32Z" transform="translate(-10.14 -29.37)" style="fill:#fff" /&gt;
    &lt;/svg&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>