DrawableButton and SVG bounding boxes

Hi, I’ve been fighting the DrawableButton class for some time and have never been able to get it to do exactly what I want. I have lots of SVGs that I need to display on various buttons in my app. The SVGs are all the same size (about 16x16 px), but not all of them fill out their bounding box. This is done to make sure that they are proportionally uniform across the UI.

My problem is that the DrawableButton does not respect the “invisible” bounding box, and the images are not drawn according to how my graphics designer makes them.

I’ve found a similar topic, and while Jules’ proposed solution works when I’m drawing the SVGs myself, I can’t apply it to the DrawableButton.

I’ve made a small example trying all the various image styles that the DrawableButton offers, and none of them respect the original bounding box.

This is a screenshot of the demo:

The desired result is the one on the far left. Is there any way to achieve this with the DrawableButton, or do I have to roll my own button class here?

Here is the demo code: MainComponent.h (5.2 KB)

1 Like

I would love to get an answer to this one too.

My workaround is to place the desired shape inside a a transparent rectangle and to group that with the desired shape when you create the artwork. From all these discussions about SVG drawing it seems the only way to deal with this.