title: Using svg images as buttons - but not include them in the HTML directly
body: <p>I have a few button images, saved as svgs. I now want to use these images as buttons on my html site. However, I have no idea how to accomplish this.</p>
  
  <p>The images are quite complex, so I do not want them to be inside the actual HTML file, but import them from a separate file (I just mean, I want them to be saved as .svg files separately).The second problem (of which I do not know whether it is a problem or not) is that the buttons are round.</p>
  
  <p>I have thought of solving this by including the buttons as background images in css, or just as standard images which I think give an onclick method, but surely the last method is way too complicated, and making them background images also seems very counter-intuitive to me. I'm just writing this to show that I have thought about this, but do not know.</p>
  
  <p>Here is what I've come up with so far:</p>
  
  <pre><code>&lt;div class="sw-buttons"&gt;
                  &lt;button id="sw-button-1" /&gt;
                  &lt;/button&gt;
  
                  &lt;button id="sw-button-2" /&gt;
                  &lt;/button&gt;
                  ...(more buttons here)
              &lt;/div&gt;
  </code></pre>
  
  <p>I have found <a href="https://stackoverflow.com/questions/13649872/can-i-make-an-svg-image-button">this</a>, but here the svg is included straight in the HTML.</p>