title: How do I use SVG icons in HTML?
body: <p>I have an svg file with 3 icons.</p>
  
  <p>When I import it via the <code>&lt;img&gt;</code> tag, I get the 3 icons one below each other.
  I want to use the icons in a row, one next to the other.
  How can I use them separately? </p>
  
  <p>The .svg file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
       height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve"&gt;
  &lt;g id="bg"&gt;
  &lt;/g&gt;
  &lt;g id="ui"&gt;
      &lt;g&gt;
          &lt;polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3         "/&gt;
          &lt;polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 
              3.8,26 4.6,21.3 1.1,18 6,17.3       "/&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;g id="pop_ups"&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Thanks!</p>