This is a guide on how to fix QML MultiEffect, specifically colorization and colorizationColor, not working on Image with an svg file set as the source

This was requested by someone on the Quickshell Discord/Matrix server a few months ago, asking me to put this advice somewhere people could search, and I realised I never actually got around to doing that, so here it is.

Main thingy

For some reason, when svgs have to be completely white for colorization to work. That means the fill property has to be completely white, like #FFFFFF

So a valid svg would be something like this, producing a sound icon, AND would work with MultiEffect

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z"/></svg>

While this would not work

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z"/></svg>

← Guide