SVG with software renderer

[igiona]

On a MCU-based embedded device, I'm trying to render some SVG icons with pretty poor results:

In the previewer the icons are looking good:

Is there anything I can do to improve the rendering quality?

[ogoffart]

Right now, the software renderer doesn't do smooth scaling. And it pre-render the .svg at the size configured in the .svg itself (with and height attribute on the svg tag) Eventually, I think we'll need to implement smooth scaling in the software renderer, even if it is much slower. But we also should have a better way to detect or specify the size of scalable image (.svg)

Right now, as a work around, is to make sure the size in the .svg is set to the size it will be shown on the screen.

[igiona]

Right now, the software renderer doesn't do smooth scaling. And it pre-render the .svg at the size configured in the .svg itself (with and height attribute on the svg tag) Eventually, I think we'll need to implement smooth scaling in the software renderer, even if it is much slower. But we also should have a better way to detect or specify the size of scalable image (.svg)

Right now, as a work around, is to make sure the size in the .svg is set to the size it will be shown on the screen.

Okay I see, it explains why the image size did not change, regardless what hight/width value I was setting.

[igiona]

@ogoffart the icons looks nice now :)

If you look at the text though, it also doesn't quite match the previewer. Is the font-size property also ignored? How can it be changed then?

The menu-item component of the UI looks like this:

import { ProgressIndicator, Spinner, Slider, Switch, ListView, GroupBox, ScrollView } from "std-widgets.slint";

export component MenuItem inherits HorizontalLayout {
    in property <string> title;
    in property <image> icon;
    in property <length> icon_size;
    spacing: icon_size * 0.25;
    alignment: start;
    Image {
        preferred-width: icon_size;
        preferred-height: icon_size;
        width: icon_size;
        height: icon_size;
        source: icon;
        vertical-alignment: center;
    }

    Text {
        text: title;
        font-size: icon_size;
        font-weight: 600;
        vertical-alignment: center;
        wrap: word-wrap;
    }
}

[ogoffart]

Font size is not ignored. The compiler tries to detect font size used at compile time, but this fails because the icon_size is not a direct property. The workaround is to set the SLINT_FONT_SIZE property. That is actually not documented. But this thread also talk about it: https://github.com/slint-ui/slint/discussions/4940

[igiona]

Font size is not ignored. The compiler tries to detect font size used at compile time, but this fails because the icon_size is not a direct property. The workaround is to set the SLINT_FONT_SIZE property. That is actually not documented. But this thread also talk about it: #4940

The workaround works 👍