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.
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.
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
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.