title: Embedding HTML in embedded SVG in HTML?
body: <p>It's allowed to embed SVG in HTML...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Hmmm....&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%"&gt;
              &lt;text&gt;Hello cruel world!&lt;/text&gt;
          &lt;/svg&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>...and vice versa:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%"&gt;
      &lt;foreignObject x="0" y="0" width="100%" height="100%"&gt;
          &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
              &lt;h1&gt;Goodbye cruel world...&lt;/h1&gt;
          &lt;/body&gt;
      &lt;/foreignObject&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The specs <a href="http://www.w3.org/TR/SVG/extend.html#EmbeddingForeignObjects" rel="noreferrer">say</a> (23.2, third paragraph) (and I quote:) "If you want to embed SVG in XHTML in SVG in XHTML in SVG, it's okay...". I thought <em>Wow, that's DEEP!</em> and did this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Yeah!&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%"&gt;
              &lt;foreignObject x="0" y="0" width="100%" height="100%"&gt;
                  &lt;body class="svgbody" xmlns="http://www.w3.org/1999/xhtml"&gt;
                      &lt;h1&gt;And hello again!&lt;/h1&gt;
                  &lt;/body&gt;
              &lt;/foreignObject&gt;
          &lt;/svg&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But all browsers merge the body tag with the HTML5 body tag (the HTML5 body tag gets the svgbody class)... This is the <a href="http://jsfiddle.net/_bop/hWhGH/1/" rel="noreferrer">fiddle</a> (<a href="http://jsfiddle.net/_bop/hWhGH/1/show" rel="noreferrer">fullscreen</a>); there's no body tag within the inline svg.</p>
  
  <p>I don't know why, and I hope you can help me out! It might be solved by putting the SVG in a different file, but I don't want to hear about it. Why doesn't it work?</p>