title: Inline SVG in HTML - same font-size rendered bigger
body: <p>I've just started reading <a href="https://books.google.co.jp/books?id=g44PBQAAQBAJ&amp;pg=PA23&amp;lpg=PA23&amp;dq=Look%20Ma,%20Same%20Font!&amp;source=bl&amp;ots=FUKoUx5xdD&amp;sig=3BocYOEJYC6gEopYHTN1GuONRTU&amp;hl=en&amp;sa=X&amp;redir_esc=y#v=onepage&amp;q=Look%20Ma%2C%20Same%20Font!&amp;f=false" rel="nofollow noreferrer">SVG Essentials</a> book, and there is something I don't understand in the Example 2-2. "Inline SVG within an HTML file".</p>
  
  <p>The font size of "Look Ma, Same Font!" text is bigger than of "And here is regular HTML again...", while both are styled the same way, actually not-styled and using the default. This is the code from the example (also <a href="https://codepen.io/maxint/pen/WOREzp?editors=1100" rel="nofollow noreferrer">see here</a>):</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          svg {
            display:block;
            width:500px;
            height:500px;
            margin: auto;
            border: thick double navy;
            background-color: lightblue;
          }
          body {
            font-family: cursive;
          }
          circle {
            fill: lavender;
            stroke: navy;
            stroke-width: 5;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Inline SVG in HTML Demo Page&lt;/h1&gt;
          &lt;svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"&gt;
              &lt;title&gt;An SVG circle&lt;/title&gt;
              &lt;circle cx="125" cy="125" r="100"/&gt;
              &lt;text x="125" y="125" dy="0.5em" text-anchor="middle"&gt;Look Ma, Same Font!&lt;/text&gt;
          &lt;/svg&gt;
          &lt;p&gt;And here is regular HTML again...&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas what am I missing here?</p>