A fairly common use case is to have vector images for icons, and then colorize this based on a current theme.

Doing this as post-processing with a fragment shader is quite wasteful, since we will be drawing the shape in one color and then manually converting it to another color pixel-by-pixel. Since we do control the output here, it is possible to do the colorization directly on the input instead.

Currently this is possible using Javascript and traversing the Qt Quick scene generated in VectorImage: You can check each type if it's a Shape and then change the fill and stroke colors dynamically.

This is quite inconvenient though, and difficult to implement in tooling.

It would be easy to implement this in VectorImage. You could have a "overrideColor" property and then the generator will just replace all colors with this.

The main challenge is finding an API which is less ad hoc and does not only cover a single use case. For instance, chances are that someone will at some point make an icon which does not only have a single color, but also different shades of that color, and they want them all colorized to the new theme.

A more flexible solution might then be to have a "colorize" property. Instead of replacing colors directly, we check the luminance of the original color and colorize it using the same algorithm as in a "colorize" postprocessing effect.

This still adds a very specific filter to the API, so an even more flexible approach would be something like this:

VectorImage {
    source: "file.svg"
    filters: [
        ColorizeFilter { color: "red" }
    ]
}

These filters could then be special interfaces that are consulted by the generator and adapt the generated code. So not postprocessing filters, but actually preprocessing filters that modify how the scene for the image is generated. Down the line it could even be a public API, so that you can create your own such filters.

We should probably support more than one filter to validate though. The "type-name" argument to svgtoqml/lottietoqml is currently not supported in VectorImage, but using this approach it could perhaps be.

VectorImage {
    source: "file.svg"
    filters: [
        ShapeNameFilter { typeName: "MyShape" }
    ]
}