title: Minor annoyance: mysterious nonbreaking space between two <svg> elements
body: <p>I have a simple pair of SVG circles that I want to use as buttons (see below).  For some reason the browser is inserting what seems to be a nonbreaking space between them, such that when clicking one of the buttons, if I drag the mouse slightly before releasing the button, I accidentally select the blank space between the two circles and that space becomes highlighted.  This happens in both Chrome and Edge, although for whatever reason the apparent font size of the nonbreaking space is larger in Chrome.</p>
  
  <p>Is there an elegant way to get rid of this?  Failing that, is there a kludge to get around it?</p>
  
  <p>Thanks.</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>.rotated {
    transform-origin: 50% 50%;
    transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="36pt" height="36pt"&gt;
     &lt;g onclick="console.log('Delete!');"&gt;
      &lt;circle cx="50%" cy="50%" r="45%" stroke="black" stroke-width="1" fill="white"&gt;&lt;/circle&gt;
     &lt;/g&gt;
     &lt;g&gt;&lt;line x1="50%" y1="25%" x2="50%" y2="75%" style="stroke:black; stroke-width:1" class="rotated"/&gt;&lt;/g&gt;
     &lt;g&gt;&lt;line x1="25%" y1="50%" x2="75%" y2="50%" style="stroke:black; stroke-width:1" class="rotated"/&gt;&lt;/g&gt;
    &lt;/svg&gt;
  
  &lt;!-- MYSTERIOUS SPACE APPEARS HERE! --&gt;
  
  &lt;svg width="36pt" height="36pt"&gt;
     &lt;g onclick="console.log('Save!');"&gt;
      &lt;circle cx="50%" cy="50%" r="45%" stroke="black" stroke-width="1" fill="white"&gt;&lt;/circle&gt;
     &lt;/g&gt;
     &lt;g&gt;&lt;line x1="30%" y1="60%" x2="35%" y2="75%" style="stroke:black; stroke-width:1"/&gt;&lt;/g&gt;
     &lt;g&gt;&lt;line x1="35%" y1="75%" x2="75%" y2="30%" style="stroke:black; stroke-width:1"/&gt;&lt;/g&gt;
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>