It's possible to repeat an svg to use like a background?

[gabedesanta]

Hi,

I would like to begin by saying that I am in the process of learning slint, and so far, I have been enjoying it. Therefore, I apologize if this question has already been answered before. (Even though I haven't come across any.)

I am creating an application that has a "2bit" design, and it uses this pattern from the photo below as the background for some components. This pattern could be recreated using an SVG, repeated multiple times until it reaches the component's size limit.

(The svg is a 4x4px with the top left and bottom right being a white pixel)

Is this possible to achieve? From what I've researched, it's not possible to have an image automatically repeating in this manner. As you have in CSS with "background-repeat" or in Swift Image("background").resizable(resizingMode: .tile).

I tried using Image with HorizontalLayout and VerticalLayout inside a custom button component based on a Rectangle, but I either end up compromising performance (presumably due to numerous SVGs) or I encounter a recursion error, .

[tronical]

That's true, we don't have something like background-repeat. We could either make this a feature of the Image element perhaps, or we could add support for images to the brush type, along with a repetition enum. @ogoffart @FloVanGH what do you think?

Meanwhile, I think your approach of repeating manually with a layout should be fine. If this is slow, then you could try to use the cache-rendering-hint on a Rectangle that contains your layout. Does that help?

[ogoffart]

Something like that