Re: Recoloring of symbolic icons

[Arnaud <elboulangero gmail com>]

Dear Gtk+,

just following up with myself. I struggled and struggled, until finally
giving up on recoloring images using the 'color' CSS property. This
attribute seems to be ignored in most cases, so I guess it's just not
supposed to be used the way I wanted to use it.

In the end, the only case where I managed to re-color my icons using the
CSS property 'color' is when I loaded them using
'gtk_image_new_from_icon_name()' with png files. Later on I switched to
'gtk_image_new_from_resource()', and I lost the re-coloring forever.

My solution right now is to color my icons manually, and therefore have
different set of files for different colors. It work just as good, but
it's less elegant.

It's still unclear to me if I was abusing the 'color' attribute (so it's
OK that I failed to use it), or if I was using it in a legitimate way
(and therefore, why so much pain ?????).

Cheers guy, have a nice day !

Arnaud


On 05/23/2017 09:32 AM, El Boulangero wrote:
> Hi Gtk+,
>
> Short story:
>
> In my application, I have use custom symbolic icons, and I want to
> recolor them with the css.
>
> What I observe right now is that, as long as my icons are loaded from a
> svg file, they are not recolored and remain grey. However, if I render
> my icons to png with 'gtk-encode-symbolic-svg', these png files are
> loaded instead, and recolored.
>
> I'm wondering if this behavior is expected, as I couldn't find any
> information on that matter.
>
> ----
>
> Long story:
>
> I'm building an application in which I have dice buttons. Depending if
> the button is clicked or not, I want to change the color of the
> background of the dices, and also the color of the dots on the dices.
>
> I'm trying to implement that by using symbolic icons. I have svg dice
> icons, and typically a dot looks like that in the svg file:
>
>     <circle cx="117" cy="440" r="70"
> style="display:inline;fill:#bebebe;fill-opacity:1;stroke:none"/>
>
> My icon is named 'dice-1-symbolic.svg', I load it with a call like this one:
>
>     Gtk.Image.new_from_icon_name('dice-1-symbolic', size)
>
> I have a css that looks like that for my dicebutton.
>
>     .dicebutton {
>       color: #ffffff;
>       background-color: #6199ff; }
>
> The idea is to recolor the dices by changing the css attributes.
>
> - What works: recoloring the background (aka changing 'background-color').
> - What doesn't work: recoloring the icon (aka changing 'color' has no
> effect).
>
> I tried again and again, and what I observe at the moment is that:
> - as long as I use a svg file as the source, the icon is not recolored
> - if, however, I render my svg to png using 'gtk-encode-symbolic-svg',
> the png is picked up instead of the svg, and the icon is then recolored
> according to the CSS.
>
> That's a bit puzzling to me. Moreover, my naive understanding was that a
> SVG was trivial to recolor (since it's just about changing the colors
> definitions in the file), while PNG was harder to recolor, since it's
> binary data. So, I thought that SVG were recolored first, then rendered
> to PNG with the right color.
>
> But it looks like it doesn't work like that, especially since I
> discovered that the icon theme on my system is full of '.symbolic.png'
> files, which makes me wonder, what's the point with the svg files in the
> end ? Are they used at all by Gtk ?
>
> So, I'm wondering if anyone could enlighten me a bit about how gtk
> handles this re-coloring. I didn't find the right piece of information yet.
>
> In the end, should I always render my svg to png ? Or is there a way to
> have my svg recolorized by the css ?
>
> Any advice welcome !
>
> Cheers,
> Arnaud