Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

I'm creating an application that uses symbolic icons from the default theme.

However, there are a few icons that I need that cannot be represented by those from the default theme, so I'm creating my own ones.

What I did was to simply go to /usr/share/icons/gnome/scalable/actions/, copied a few locally into my app's source tree that could serve as a basis, and started editing them.

So far so good. But I've noticed the following: all symbolic icons are of a light grey color when looking at the original .svg file, but when they are put onto a widget, they become darker.

Here's an example, using the /usr/share/icons/gnome/scalable/actions/view-refresh-symbolic.svg icon from the default theme:

  • Here's what it looks like when opening the original with Inkscape:

view-refresh-symbolic on Inkscape

  • And here's what it looks like on a toolbar on a running application:

view-refresh-symbolic on at runtime

Notice the icon being much darker at runtime. That happens both with the Ambiance and Radiance themes.

I wouldn't mind much, but I noticed it affects my custom icon, whereby parts of it become darker (the inner fill), whereas parts of it remain the same color as the original (the stroke).

So what causes the default symbolic icons to darken and how should implement that for my custom icons?

share|improve this question
    
How are you loading the icon exactly, in the application? –  dobey Jun 12 '12 at 14:39
    
With Glade, in a toolbar button using the 'Load from icon name' setting. –  David Planella Jun 15 '12 at 7:47
    
Then the most likely answer is that it isn't loading your custom icon at all, but one from an icon theme in the stack, which has a matching name (or fallback name). –  dobey Jun 15 '12 at 13:52
add comment

2 Answers

up vote 12 down vote accepted
+50
  • The symbolic icons are created in a chroma-keyed color, gray with full opacity (#bebebeff). They can then be colored based on the fg_color value defined by the theme in settings.ini (GTK3) or gtkrc (GTK2); or on the fg_color defined in the CSS (GTK3).
    • e.g., for Ambiance the foreground color (fg_color) is set to dark gray (#4c4c4c) in /usr/share/themes/Ambiance/gtk-3.0/settings.ini, which is why the symbolic icons appear darker.
  • To make custom symbolic icons look the same, you must remove the stroke and use only fill with the RGBA value set to #bebebeff; otherwise, the stroke will always appear as set (i.e., gray or whatever color).

    • In Inkscape, just select the object, open Fill and Stroke, and click on the No Paint (x) icon under "Stroke Paint":

    enter image description here

  • This gives us a nice and even-looking "MyRefresh" symbolic icon:

    enter image description here


One user indicated that a different, darker icon was being opened instead of the default gnome symbolic icon; as this strace shows, that assertion is incorrect:

enter image description here

share|improve this answer
    
Thanks for the excellent answer! However, there is still one thing I don't quite understand: why can't custom symbolic icons not have a stroke, even if filled with #bebebeff? –  David Planella Jun 23 '12 at 7:18
    
I think that has to do with how Gnome renders (rasterizes) symbolic SVGs, based on the value of fg_color (it uses libRSVG); the engine obviously differentiates between the fills and the strokes, and appears to be coded to apply fg_color only to the fill while leaving the stroke as is. It can do so because SVG is a vectorized (parameterized) format, while for the usual bitmapped icons, it's all just pixels :) –  izx Jun 23 '12 at 7:24
add comment

Symbolic icons are usually set by the theme using the "color" property, that's their great advantage, they look good on any background. You can however load them with your own color.

Example vala code:

//get the icon theme and lookup the icon we want by name, here at a size of 64px
var info = Gtk.IconTheme.get_default ().lookup_icon ("view-refresh-symbolic", 64, 0);

//now load the icon as a symbolic with a color set in the brackets as RGBA, here as plain red
var pixbuf = info.load_symbolic ({1, 0, 0, 1});

//finally we just put in a GtkImage to render it
var image_widget = new Gtk.Image.from_pixbuf (pixbuf);
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.