SVGs whose width and height attributes are percentages don't render properly or consistently

[adroitwhiz]

Expected Behavior

All SVGs should render properly and consistently across browsers

Actual Behavior

If an SVG tag has its width and/or height defined as a percentage:

<svg width="100%" height="100%" viewBox="0 0 480 360" version="1.1" xmlns="http://www.w3.org/2000/svg" [...]

it will be rendered differently across different browsers.

In Chrome, the width and height appear to be taken to mean "100% of the width/height of the bounding box containing all the items in the SVG".

In Firefox, nothing appears to be rendered whatsoever.

In Safari, according to the original reporter of this bug, some SVG costumes are rendered larger.

Steps to Reproduce

See this project for an instance of this occurring. Compare the behavior across browsers.

I also created this project file (rename to a .sb3) that showcases the issue. The first cat sprite has been changed to have SVG width and height attributes of 100%.

Operating System and Browser

All OSes, Chrome/Safari/Firefox/others?