title: Set SVG height and width to that of the <text> node inside it
body: <p>Is there a way to make the width and height of an SVG element equal to the width of the text inside a <code>text</code> node inside it?</p>
  
  <p>Here's a demo:</p>
  
  <p><a href="http://codepen.io/Tiger0915/pen/LEyePy" rel="nofollow">http://codepen.io/Tiger0915/pen/LEyePy</a></p>
  
  <p>Here's the SVG markup:</p>
  
  <pre><code>&lt;span&gt;I want &lt;/span&gt;
  
  &lt;svg width="100%" height="80px"&gt;
    &lt;text x="0" y="0" fill="white"&gt;
      THESE WORDS
    &lt;/text&gt;
  &lt;/svg&gt;
  
  &lt;span&gt;to be an SVG&lt;/span&gt;
  </code></pre>
  
  <p>Ideally, I want the SVG to be treated as an inline element (such as a <code>span</code> node).</p>
  
  <p>I want it to render like this:</p>
  
  <pre><code>I want THESE WORDS to be an SVG
  </code></pre>
  
  <p>Where <code>THESE WORDS</code> are an SVG.</p>
  
  <p>If I do <code>width="auto" height="auto"</code>, on the <code>svg</code> node, it doesn't render at all.</p>
  
  <p>How do I make an SVG element automatically fit the width of the text element inside it?</p>