How to size image to fill its container while maintaining aspect ratio (using svg as source)?

I’m struggling a bit to manage the size and fill of a GUI Image control. Can anyone offer some insight? Also, please note that we are still on an older version of Babylon.

Babylon version: 5.57.1
Playground example

I want the image to fill the width of the its parent container, the StackPanel, and automatically size it’s height to maintain its aspect ratio. What am I missing here?

NOTE: The link to the SVG file is in the playground source code. I included the original URL (which doesn’t work in the playground) as well as the Dropbox download link that is working in the sandbox. View this SVG to get an idea of what it should look like.

Ok it seems linked to the SVG resolution done by the browser

This is not related to the StackPanel as the problem occurs even with just the image:
Babylon.js Playground (

If you reduce the size of the rendering window you can see the SVG appearing…

Whereas no problem with regular image:
Babylon.js Playground (

Digging it more deeply…

Temporary fix:
Babylon.js Playground (

We have to force the domImage into the dom to ensure the SVG size is properly computed

You can do that in your case.

I will fix that behavior on the main framework

Main fix: Fix SVG loader for GUI by deltakosh · Pull Request #15181 · BabylonJS/Babylon.js (