SVGs won't stretch to fill the bounds of BABYLON.GUI.Image

Bugs
1

https://playground.babylonjs.com/#VMZ7Q5

I know there are some issues getting SVG’s to distort in-browser, but it looks like there are developments with properties such as preserveAspectRatio="none" which should allow for this. Is there any possibility of BABYLON using this if the browser supports it? I don’t know how the BABYLON GUI works under the hood, so perhaps what I’m asking isn’t possible, but it’d be nice to have raster sources and SVG’s behave in the same manner.

My use-case is creating dynamic and scalable custom UI components, and I’d like to stretch ‘middle’ SVG images of things like slider bars in the x-axis without having to tile them. If this isn’t possible at the moment… any other suggestions? :slight_smile:

Love the GUI component btw, it’s super useful.

2

Is there an option to change the interpolation type of images in the GUI to nearest neighbor? This would allow me to use a rasterized png for the middle section without bluring when it stretches.

3

Managed to fix the issue by manually adding preserveAspectRatio="none" to my SVG files themselves :slight_smile:

2 Likes