SVG image - wrong positioning in FL_Button

[Dibo]

Hi,

I'm using SVG images from FontAwesome site. Rescaling FL_SVG_Image to the button size and then assigning to button but image has weird offset. It starts from a center of the button and goes up over the button's top bound. See atached screenshot.

I'm using free pascal PasFLTK bindings over CFLTK. I'm also using FontAwesome images over the years and SVG working fine for example in Qt. How to fix that? I also attached source SVG file.

Regards

[Manolo]

You have to set NULL as label of the button, otherwise the image is drawn above the label. 

Setting it to "" isn't enough.

[Greg Ercolano]

On 7/13/26 09:38, Dibo wrote:

Hi,

I'm using SVG images from FontAwesome site. Rescaling FL_SVG_Image to the button size and then assigning to button but image has weird offset. It starts from a center of the button and goes up over the button's top bound. See atached screenshot.

I'm using free pascal PasFLTK bindings over CFLTK. I'm also using FontAwesome images over the years and SVG working fine for example in Qt. How to fix that? I also attached source SVG file.

    It's best to show your code.

    My guess is somehow the align() for the button is set to something non-default and might be causing this offset.

    As a starting point, this works for me with your apple.svg:

---

#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_Shared_Image.H>
#include <FL/Fl_SVG_Image.H>

int main() {
    fl_register_images();
    Fl_Window *win = new Fl_Window(300,200,"Test SVG On Button");
    Fl_Button *but = new Fl_Button(35, 35, 35, 35);
    Fl_SVG_Image svg("apple.svg");
    svg.scale(but->w()-5, but->h()-5);
    but->image(svg);
    win->end();
    win->show();
    return Fl::run();
}

---

    With that, I get:

[Greg Ercolano]

On 7/13/26 10:46, Greg Ercolano wrote:

    As a starting point, this works for me with your apple.svg:

---

[..code example snipped..]

    I should add that last example has no error checking for brevity.
    Adding minimal error checking (red text) will post a friendly dialog if the file can't be read (instead of rudely crashing):

---

#include <errno.h>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_Shared_Image.H>
#include <FL/Fl_SVG_Image.H>
#include <FL/fl_message.H>

int main() {
    fl_register_images();
    Fl_Window *win = new Fl_Window(300,200,"Test SVG On Button");
    Fl_Button *but = new Fl_Button(35, 35, 35, 35);
    Fl_SVG_Image svg("apple.svg");
    switch (svg.fail()) {
	case Fl_Image::ERR_NO_IMAGE:
	case Fl_Image::ERR_FILE_ACCESS:
	    fl_alert("apple.svg: %s", strerror(errno));    // shows actual os error to user
	    return 1;
	case Fl_Image::ERR_FORMAT:
	    fl_alert("apple.svg: couldn't decode image");
	    return 1;
    }
    svg.scale(but->w()-5, but->h()-5);   // scale image to size of button
    but->image(svg);
    win->end();
    win->show();
    return Fl::run();
}

---

[Dibo]

Indeed problem was with label beeing empty instead of nil :( . Thank you guys!