Qt6 color SVG using MultiEffect

[mzimmers]

Update: I tried a much simpler circle file:

<svg width="300" height="550" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="100" r="60" style="fill:red; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7"  />
</svg>

(note the fill:red)

And this code:

    Image {
        id: image
        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
        source: "qrc:/circle2.svg"
        visible: false // <== DON'T FORGET THIS LINE
    }
    MultiEffect {
        source: image
        anchors.fill: image
        colorization: 1.0
        colorizationColor: "blue"
    }

And it works. So it's not a Qt problem; it's the way the .svg files are constructed.

[mzimmers]

another update: further testing revealed that you can't just put a fill= in the path; it has to be:

<path style="fill:#00ff00" ...

and the fill value can't be "none;" it must be a color (either by name or by RGB value).

This works on my original circle (though it's only filling the outline; I think I need to remove part of the path for it to fill the entire circle.

It worked on the puppy too (though there are 3 paths in the puppy; you'd have to add it to all of them).

So...I think we have our answer.

[christofer]

Thanks for the replies @mzimmers !

You inspired me to experiment more. It turns out all I have to do is change the existing SVG fill from black to white.

I changed...

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">

to...

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="white" stroke="none">

Result...

The changes are in the GitLab project, tag qt-forum-post-02

[mzimmers]

@christofer interesting. I did some experimentation of my own on the puppy file, and it appears that the problem wasn't the use of the RGB format for specifying the color, but rather the fill of black, or indeed any color other than white (or #ffffff).

EDIT: scratch the comment below -- I forgot my own advice of hiding the original image.

As a side note, I also noticed that when using the Image inside a Layout, you can't use the anchors property, so the MultiEffect appear below (in the case of a ColumnLayout) the original image. My workaround was to put the Image and the MultiEffect in an Item, so I could use anchors, but there might be a more elegant way to accomplish this.

[ekkescorner]

@mzimmers tried to colorize a png
my old code:

Image {
    id: image
    ....
    ColorOverlay {
        id: colorOverlay
        anchors.fill: image
        source: image
        color: primaryColor
    }

new code:

Image {
        id: image
        ....    
MultiEffect {
        id: colorOverlay
            source: image
            anchors.fill: image
            colorization: 1.0
            colorizationColor: primaryColor
        }

But the Image isn't colorized.
-----------edit: foundSolution

1. separated Image and MultiEffect and placed both inside an Item
2. then set visible false at Image
   result: not colorized, but found the reason
   the png was a black icon - changed this and used a white icon and now colorizing works.
   So this is different to QtQuickEffects and Qt 5.15

[alvarosaes]

Hello, I also had this question so i asked directly via Qt support. I got this response:

> Thank you for you response. So, ColorOverlayEffect from import
> QtQuick.Studio.Effects 1.0 is not equivalent to this? I didnt have this
> problem while using that effect

Yeah, different effect:

fragColor = vec4(mix(pixelColor.rgb/max(pixelColor.a, 0.00390625), color.rgb/max(color.a, 0.00390625), color.a) * pixelColor.a, pixelColor.a) * qt_Opacity;

Compared to this for colorization:

color.rgb = (color.rgb - 0.5 * color.a) * (1.0 + contrast) + 0.5 * color.a;
color.rgb += brightness * color.a;
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
float colorizationAlpha = colorization * colorizationColor.a;
color.rgb = mix(color.rgb, gray * colorizationColor.rgb, colorizationAlpha);
color.rgb = mix(vec3(gray), color.rgb, 1.0 + saturation);

So i only see 2 solutions:

• Convert all your svgs to fill white
• Rollback to use ColorOverlayEffect

@mzimmers @christofer @ekkescorner

[srce]

Rather than converting pngs from black to white, setting brightness to 1 (in addition to colorize) should have a similar effect.

[QKelteseth]

@srce thank you!!

[MattP2]

@srce said in Qt6 color SVG using MultiEffect:

Rather than converting pngs from black to white, setting brightness to 1 (in addition to colorize) should have a similar effect.

This is the answer, a big thank you.

So, visible: false, parent Item and color in svg are not required.
This is working with any svg:

Image {
    // image properties
    layer.enabled: true
    layer.effect: MultiEffect {
        brightness: 1.0
        colorization: 1.0
        colorizationColor: enabled ? Material.primaryTextColor : Material.secondaryTextColor
    }
}

[PeterG76]

@MattP2 Thanks.

Setting "brightness: 1.0" worked for me too. I can now successfully colorize a black PGN Image using MultiEffect.

[Aleksey Asensus]

@srce said in Qt6 color SVG using MultiEffect:

Rather than converting pngs from black to white, setting brightness to 1 (in addition to colorize) should have a similar effect.

Yep, this works for me, thanks, however Qt 5 solution more flexible: with ColorOverlay I can set color: "transparent" to fully keep original icon where necessary, here icon becomes white for some reason, even if MultiEffect item or layer is not visible/enabled. So still forced to stay on ColorOverlay.

[nilsl]

@MattP2 I don't see how this works. Depending on your input/original color you will get a different gray value in the computation:

color.rgb += brightness * color.a;
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));

Then this gray value will affect to colorizationColor in:

color.rgb = mix(color.rgb, gray * colorizationColor.rgb, colorizationAlpha);

So even if colorizationAlpha is 1.0, the gray affects the output.

It would work, if color was clamped to (1,1,1) after applyiing the brightness, but that doesn't seem to happen. I always get my colorizationColor scaled in the result, even with brightness: 1.