SVG rendering differently on Linux vs windows.

Jammin44fm

Hi All,

Qt 6.5.3,
win10/win11 vs
Ubuntu 24.04.1 xcfe or wayland platform plugin, both exhibit same behavior.

Recently I've ported a number of icons from PNG to SVG, and the new SVG icons are displaying in a smaller size on Linux relative to windows.
I'm using the inbuilt iconengine functionality to load an SVG as a resource from an stylesheet.
Specifically the images are used as the "has siblings open / closed" images within a QTreeView.

My Stylesheet is

    QTreeView::branch:has-children:!has-siblings:closed,
    QTreeView::branch:closed:has-children:has-siblings { border-image: none; image: url(:/BrowserWidget/ClosedArrow.svg); }
    QTreeView::branch:open:has-children:!has-siblings,
    QTreeView::branch:open:has-children:has-siblings { border-image: none; image: url(:/BrowserWidget/OpenArrow.svg); }

On windows this looks like:

however on Linux it looks like:

Notice that the arrow is significantly smaller on the Linux version.
They are both using identical SVG images, stylesheet, and drawing code.

Has anyone seen anything like this before?
I'd really like to avoid using different SVG images on each platform

the source for the SVG itself is very simple,

<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5.00009L2 8.66009V1.34009L8 5.00009Z" fill="#CCCCCC"/>
</svg>

If I had to guess, I would say that the Linux version is showing the SVG at 1:1, but the windows version is doing some additional scaling to increase the visible size of the image used. Because the view box is 10x10, but the actual image drawn is less than that, and the window's screen shot shows the arrow as occupying close to a 10x10 box, But the linux arrow is much smaller.

Because I am using the stylesheet and iconengine to handle the SVG loading, and not explicitly reading it with QtSvg,
I dont have much control over how the image is handled.
I've tried adding a height and width argument to the stylesheet, but that doesn't seem to have any effect?
Perhaps this is the issue/Bug?
I dont have a good understanding of what the width and height values do in the case of an SVG resource.

I'd love some help and or explanation of what is going on?

James

SGaist

Hi,

Out of curiosity, what happens if your set the icon-size in your stylesheet ?

Jammin44fm

Thanks for the suggestion, but using the icon-size in my stylesheet doesn't have any effect.
I'm working on reproducing the issue in simpler Qt only sample.
Perhaps there is some other aspect of our styling that is causing the problem.
But strange that things are OK on Mac and Windows, but I have this specific issue on Linux.

Jammin44fm

I've created a very simple TreeView sample app that lets me modify the stylesheet directly within the code,
but nothing i do seems to effect the size of the Arrow icons attached to the sibling with children items in the Treeview.

the code...

#include <QApplication>
#include <QScreen>
#include <QTreeView>
#include <QStandardItemModel>
#include <QHeaderView>


int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 1. Create the Tree View and populate data
    QTreeView treeView;
    QStandardItemModel model(4, 2);
    model.setHeaderData(0, Qt::Horizontal, "Task Name");
    model.setHeaderData(1, Qt::Horizontal, "Status");

    // Fill dummy hierarchical data
    for (int i = 0; i < 3; ++i) {
        QStandardItem *parentItem = new QStandardItem(QString("Project Phase %1").arg(i + 1));
        QStandardItem *statusItem = new QStandardItem("In Progress");
        model.setItem(i, 0, parentItem);
        model.setItem(i, 1, statusItem);

        for (int j = 0; j < 2; ++j) {
            QStandardItem *childItem = new QStandardItem(QString("Sub-task %1.%2").arg(i + 1).arg(j + 1));
            QStandardItem *childStatus = new QStandardItem("Pending");
            parentItem->appendRow(QList<QStandardItem*>() << childItem << childStatus);
        }
    }

    treeView.setModel(&model);
    treeView.expandAll();

    // Enable alternating backgrounds required by the stylesheet
    treeView.setAlternatingRowColors(true);

    // 2. Define and Apply the QSS Stylesheet
    QString treeStylesheet = R"(
        /* Main view styling */
     QTreeView { background: #4d4d4d; selection-color: black; selection-background-color: #f9d20e; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; show-decoration-selected: 1; }
     QTreeView::item { height: 25px; padding-left: 7px; background-color: transparent; }
     QTreeView::branch:has-siblings:!adjoins-item { border: none; }
     QTreeView::branch:has-siblings:adjoins-item { border: none; }
     QTreeView::branch:!has-children:!has-siblings:adjoins-item { border: none; }
     QTreeView::branch:has-children:!has-siblings:closed,
     QTreeView::branch:closed:has-children:has-siblings { border-image: none; image: url(:/ClosedArrow.svg);      width: 5px; height: 5px; }
     QTreeView::branch:open:has-children:!has-siblings,
     QTreeView::branch:open:has-children:has-siblings { border-image: none; image: url(:/OpenArrow.svg);      width: 5px; height: 5px; }
     QTreeView QLineEdit { color: #000000; background: #ffffff }
     QTreeView QScrollBar:vertical { padding-left: 3px; background: black; width: 11px; margin: 0px; }


    )";

    treeView.setStyleSheet(treeStylesheet);
    treeView.resize(450, 300);
    treeView.show();

    return app.exec();
}

I've been swapping out the PNG's and SVG's - each result in a different size of the triangle that get rendered, but neither SVG or PNG are effected by the icon-size or, width and height properties?

How am I supposed to get matched sizes?
The SVG file is near exact copy of the PNG image, why am i getting such different results?
and what is the correct way to control the icon size for this specific icon / image?

Regards,