title: Why does <svg> leave containing <div>?
body: <p>Here's some SVG I'm trying to get working, the characters are positioned funny (but that is good), but what isn't good is that the whole SVG is supposed to be inside a <code>&lt;div&gt;</code> inside the <code>&lt;h1&gt;</code>, but it seems to jump down below. I added what I thought should be an unnecessary <code>top: 0;</code> style, and it didn't help.</p>
  
  <p>The second thing I don't understand is why the "svg sample" text in the  gets shoved to the bottom... likely something to do with baseline alignment, I suppose, but I don't understand it, and I don't know how to fix it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  h1 {
    margin: 0;
    padding: 0;
  }
  
  body {
    padding-top: 53px;
  }
  
  h1 {
    background-color: lightblue;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 100;
    height: 47px;
    margin-right: 53px;
    padding-left: 53px;
    border: 3px solid;
    font-size: 25pt;
    font-weight: 800;
  }
  
  #screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  
  .world {
    position: relative;
    font-family: "Times New Roman";
    font-weight: normal;
    font-size: 120px;
    display: inline-block;
  }
  
  .world svg {
    width: 100%;
    height: 100%;
    top: 0;
  }
  
  .world div {
    position: absolute;
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="screen"&gt;
    &lt;h1&gt;
      &lt;div class="world" style="height: 47px; width: 94px;"&gt;
        &lt;div&gt;
          &lt;svg class="h1world" viewBox="0 -200 560 280"&gt;
            &lt;text x="0 30 60 150 152" y="0 0 -30 -30 -90"&gt;Hello&lt;/text&gt;
            &lt;line id="staff" /&gt;
          &lt;/svg&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;span&gt; &amp;nbsp; svg sample&lt;/span&gt;
    &lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>