GUI button with single SVG icon

Questions
1

Hi,
I’m trying to use a single SVG file for a BABYLON.GUI.Button.CreateImageOnlyButton but I can´t get it to appear properly inside the button. In my local tests, just a part of the SVG is shown inside the button.
How can I get the SVG to scale properly inside the button?
Also, is it possible to remove the white square around the button?

I’ve created a Playground with the only single image SVG I’ve found in the playground folders:

The button on the left has an SVG as image, and the one on the right a PNG:
https://www.babylonjs-playground.com/#664QM9#1

Thanks!

2

Pinging @phaselock who developed it

1 Like
3

um, this isn’t svg loading from spritesheet which was the PR I submitted. :wink:

I went ahead and fixed: https://www.babylonjs-playground.com/#664QM9#2

  1. Uncomment line 20 to remove white square around the button.
  2. This svg image is created using code instead of a svg image editor. Therefore, in order to find out the sourceLeft and sourceTop, I had to reopen the file in inkscape and figure out the actual image coordinates which is somewhere around 42 with width/height of 75.
  3. You may or may not see the icon depending on your monitor resolution because 75*11 was what worked on my screen. You may have to play with the values to get it to display in yours. One major caveat of creating svg from code and loading it is that its size is often dependent on screen res. In the first image below, the icon is displayed normally. When the window is resized, the svg icon shrinks.

single_svg_1
single_svg_11866×937 155 KB

single_svg_2
single_svg_21866×935 155 KB

If your use case involves multiple svg icons, you can use batch loading of svg assets. The demo is here: Babylon.js Playground
Hope it helps !

5 Likes
4

Thanks a lot for taking your time and for your detailed answer. So the main problem I had was actually because of the way the SVGs were generated by Illustrator. I’m now converting the svgs with Icomoon and it works perfect with your system :slightly_smiling_face: (they scale properly with the button size and are independent of the screen).
Next time I’ll install Inkscape and do the whole process there.

2 Likes
5

You rock!

2 Likes