My icon takes up to much space

Hello,

It's always tricky working with SVG files.

Instead of using the icon on the "Image" field, leave that field empty by removing the image, and try to use that icon as a "Background Image" and then use the option "Contain" below on the "Background Image Size".

I'm pretty sure that there's a decent way we can work with the SVG's, but I don't master it yet.

I've downloaded a big SVG file, and tried to use it as an image. It was so big, that it didn't even show up on the button. As soon as I used it as a Background Image and set the option to "Contain", the SVG showed up, centered and correctly resized.

Example below so you can see the differences:

1. Icon as image, doesn't show because it's too big;

2. Icon as background image, Stretch option;

3. Icon as background image, Cover option;

4.  Icon as background image, Contain option;

Hope it helps.

Best regards

Thanks for the suggestion but this didn't solve it. I would like the images to appear like top screenshot. In this case both images appear OK, but the image on the left actually changes size based on the window size of my browser. In the iPhone app the size of the left image is always too big. The svg-file is the same in both objects.  

Hello,

Are you sure you're using "Contain" in the Background Image Size?

I've quickly placed a similar layout:

Both of them are as "Contain", and they both behave correctly when resizing.

If I change the first one to "Cover", then it looks like yours:

If I use "Contain" on both, apparently in my case it's working. Please double check, to see if we can help.

Best regards

Yes, I am sure. I think the problem is related to the svg-file. Other files work as expected.

Most probably...

As I said, it's pretty tricky working with SVG. I don't understand quite yet how to correctly work with them, especially regarding making an SVG file with both black and white versions just like the default ones on bOS.

Try to edit the SVG file on Adobe Illustrator or similar, and try to increase or lower the size of the SVG, and try it again.

I've tested with a small size SVG and it didn't behave correctly, but the bigger ones do. Probably bOS goes better with big SVG files that will actually get slimmer, rather than the opposite. Who knows!

Best regards