title: How can I create an SVG checkbox?
body: <p>I want to make a simple checkbox using an svg.</p>
  
  <p>It doesn't have to be animated nor anything. I just want it to change the fill color when checked. As simple as that.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;header&gt;
  
          &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
  
          &lt;style&gt;
          svg input:checked  {
              fill:yellow;
          }
  
          .my-image:hover {
              background-color:green;
              fill:red;
          }
  
          .my-image input:checked {
              fill:red;
          }
  
          &lt;/style&gt;
      &lt;/header&gt;
  
      &lt;body&gt;
  
          &lt;label&gt;
              &lt;input type="checkbox" name="" value="" checked/&gt;
              &lt;svg class = "my-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="17"
              height="16" viewBox="0 0 17 16"&gt;
              &lt;path d="M8.500,0.000 L11.301,5.028 L16.999,6.112 L13.033,10.302 L13.753,16.000 L8.500,13.561 L3.247,16.000 L3.967,10.302 L0.001,6.112 L5.699,5.028 L8.500,0.000"
              class="cls-1" /&gt;
              &lt;/svg&gt;
  
          &lt;/label&gt;
  
          &lt;script src="{{ asset('js/app.js') }}" type="application/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is driving me absolutely crazy. The svg even has a red background that I don't know where it comes from.</p>
  
  <p><a href="https://i.stack.imgur.com/hjwGv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hjwGv.jpg" alt="enter image description here"></a></p>
  
  <p>I watched a lot of tutorials, read a lot and tried a lot of examples. None of them worked.</p>
  
  <p>I just need a simple checkbox using svgs. Can you please help me out?</p>
  
  <p>Also, I'm new to CSS and HTML. I'm sure I'm missing something.</p>
  
  <p>Thanks.</p>