[SOLVED] Inline SVG in HTML - same font-size rendered bigger

Inline SVG in HTML - same font-size rendered bigger

I've just started reading SVG Essentials book, and there is something I don't understand in the Example 2-2. "Inline SVG within an HTML file".

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 see here):

<head>
    <style>
        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;
        }
        </style>
    </head>
    <body>
        <h1>Inline SVG in HTML Demo Page</h1>
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
            <title>An SVG circle</title>
            <circle cx="125" cy="125" r="100"/>
            <text x="125" y="125" dy="0.5em" text-anchor="middle">Look Ma, Same Font!</text>
        </svg>
        <p>And here is regular HTML again...</p>
    </body>
</html>

Any ideas what am I missing here?

Solution

The viewBox effectively doubles the size of the contents. The visible area is 500 x 500 px (set in CSS) but you're scaling up a 250 x 250 unit area into that 500 x 500 px box.