How to draw an SVG from a string to the fullscreen UI?

Hi everybody!

I want to draw an SVG that I have as a string to a fullscreen UI.

I found a forum thread with a similar problem: Change SVG texture in realtime, where someone tried to draw an SVG to a normal texture. One of the solutions, it seems like I cannot use, because the AdvancedDynamicTexture does not have a LoadFromDataString method. The other solution in the thread involved creating an ObjectURL. I tried to adapt that to my problem (although I think that even in the playground of that solution it doesn’t actually work, still, it’s my best shot).

This is what I have so far (it doesn’t work):
https://www.babylonjs-playground.com/#8G2YJD#2

Thanks for your help! (Usually, when I post here, I just miss something very obvious, let’s hope that’s the case here, too).

You can use a GUI image and pass it a base64 encoded url:

https://www.babylonjs-playground.com/#8G2YJD#4

Note that I had to set a non zero width and height in the svg for this to work (the values don’t matter, you can use 1 instead of 300).

2 Likes

You rock!
I think I had tried something like that, but without setting the width and height, so I didn’t think it would work like that.
Thanks a lot!