This is strange and took me a while to come up with a simple test case, this worked in alpha 46 and no longer works in alpha 48. If you use the html below in straight browser and in a component with alpha 46, you end up with a 40px square. However, in alpha 48 you end up with a 200px square.

<div style="width: 40px; height: 40px">
    <svg viewbox="0 0 200 200">
        <rect width="200" height="200"/>
    </svg>
</div>

For others who might be struggling with this the way to fix this in the meantime in alpha 48 is to insert a scale transform like this

<div style="width: 40px; height: 40px">
       <g transform="scale(0.2)">
    <svg viewbox="0 0 200 200">
        <rect width="200" height="200"/>
    </svg>
         </g> 
</div>

Something in alpha 48 is producing something different then the straight browser behavior and alpha 46 some I'm assuming that's the culprit and not alpha 46. However, by a quick check of the w3 specs it might seem that the correct literal rendering might be alpha 48 and browsers are automagically doing a scaling in the background. Nonetheless, inconsistent behavior is a bigger problem so I think alpha 48 is the one that should be fixed.