Microsoft Edge disregards the height in images embedded as objects using SVG

<!DOCTYPE html>
<html>
  <body>
    Here is some text immediately before the object
    <object type="text/xml+svg" data="image.svg" width="100%"></object>
    Here is some text immediately after the object
  </body>
</html>

<!DOCTYPE svg PUBLIC
    "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"

    x="0" y="0" width="100%" height="300">
  
    <rect x="0%" y="0%" width="25%" height="100" fill="#cc3333" />
    <rect x="25%" y="0%" width="25%" height="100" fill="#66cc33" />
    <rect x="50%" y="0%" width="25%" height="100" fill="#7733cc" />
    <rect x="75%" y="0%" width="25%" height="100" fill="#33cc99" />
  
    <rect x="0%" y="200" width="25%" height="100" fill="#99cc99" />
    <rect x="25%" y="200" width="25%" height="100" fill="#cc66cc" />
    <rect x="50%" y="200" width="25%" height="100" fill="#338814" />
    <rect x="75%" y="200" width="25%" height="100" fill="#5566cc" />
    
    <text x="10" y="130" font-size="24">Here is some SVG text that should not resize when scaled</text>
    
    <svg x="10" y="150" height="48" viewBox="0 0 800 48" preserveAspectRatio="xMinYMid meet">
      <text x="0" y="24" font-size="24">Here is some SVG text that should not distort when scaled down</text>  
    </svg>
  
</svg>