Qt6 color SVG using MultiEffect

christofer

Can we colorize and SVG (or PNG) using MultiEffect in Qt 6.5?

I created a sample project that just has a puppy who should be blue but doesn't get colorized: https://gitlab.com/christoferjennings/qt-6-5-colorize-svg

The code follows the examples in the MultiEffect documentation. But, alas, the puppy doesn't appear blue.

import QtQuick
import QtQuick.Effects

Window {
    id: window
    width: 500
    height: 300
    visible: true
    title: "Puppy should be blue"

    Image {
        id: theImage
        source: "image.svg"
        sourceSize.height: window.height - 20
        fillMode: Image.PreserveAspectFit
        anchors.centerIn: parent
    }
    MultiEffect {
        source: theImage
        anchors.fill: theImage
        colorization: 1.0
        colorizationColor: "blue"
    }
}

In the past, I've used ColorOverlay. But I'd like to use MultiEffect. This old related thread ends with a comment that MultiEffect is expected in Qt 6.5. Everything compiles fine but it doesn't seem to work.

I'm trying this on macOS Monterey and Ubuntu 22.

mzimmers

@christofer I've experienced this as well. I think the problem is in how the .svg file is composed, specifically (but not only) the use of the "fill=" field. I snagged a circle.svg file with this content:

<svg fill="#0000ff" height="200px" width="200px" version="1.1" id="Layer_1" viewBox="0 0 222.334 222.334" xml:space="preserve">
<g>
	<g>
		<g>
			<path d="M111.167,0C49.87,0,0,49.87,0,111.167s49.87,111.167,111.167,111.167s111.167-49.87,111.167-111.167S172.464,0,111.167,0
				z M111.167,214.1c-56.758,0-102.933-46.175-102.933-102.933S54.409,8.235,111.167,8.235S214.1,54.409,214.1,111.167
				S167.925,214.1,111.167,214.1z"/>
		</g>
	</g>
</g>
</svg>

which produces this:

Replacing the fill value from "#0000ff" to "none" produces a black circle.

I tried a similar experiment with the puppy file and couldn't even get that to change color at all.

So...I think the svg file has to be composed in a particular way in order to support fills, but I can't speak with any authority on this. Hopefully someone else with some .svg file knowledge can chime in.

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...
Screen Shot 2023-04-04 at 6.00.26 AM.png

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

separated Image and MultiEffect and placed both inside an Item
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
    }
}

QtWS: Super Early Bird Tickets Available!

Qt6 color SVG using MultiEffect