Uncategorized

Performance update for breeze icons

Icons following colors

As breeze is a monochrome icon set the contrast is one of the biggest issues. With Plasma 5.6, the developers solved this problem by applying the system color scheme to the icons. Now the icons use the same color (and contrast) as the text. With this shiny new feature, users can define the colors of the icon set by themselves.

Screenshot_20160425_231500

To bring this feature to the user, ALL icons have to have include a style component. Marco Martin added the style stuff with a script but we had a second issue, the file size. In the last release (KF 5.20), the breeze icons need 28 mb of disk size, the applet icons for the widget explorer therefore need way too long to render, … so it was time for a rework.

Screenshot_20160423_121153

How does the style stuff work? It follows an SVG standard and you define in the header <defs> area the styled colors and in the body you use in style instead of fill:#f2f2f2 fill:currentColor and define the class=”ColorScheme-Text” which say use the defined Text color from the color scheme.

With the Qt app “SVG Cleaner”, the colored icons were optimized and all monochrome icons were optimized in this way:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
 <defs id="defs3051">
   <style type="text/css" id="current-color-scheme">
     .ColorScheme-Text {
       color:#f2f2f2
     }
     </style>
 </defs>
   <path
      style="fill:currentColor;fill-opacity:1;stroke:none"
      d="M 3 3 L 3 4 L 3 19 L 4 19 L 14 19 L 14 18 L 4 18 L 4 10 L 7 10 L 7 9.9921875 L 7.0078125 10 L 9.0078125 8 L 18 8 L 18 14 L 19 14 L 19 5 L 12.007812 5 L 10.007812 3 L 10 3.0078125 L 10 3 L 4 3 L 3 3 z M 16 14 L 16 16 L 14 16 L 14 17 L 16 17 L 16 19 L 17 19 L 17 17 L 19 17 L 19 16 L 17 16 L 17 14 L 16 14 z "
      class="ColorScheme-Text" />
</svg>

Remove ⅔ of the code

Make a template file with only the needed elements, SVG header, style element and the path section was removed with the individual file input. As I’m not a developer it was done by hand. So it took a while but now all monochrome icons can be styled according to the color scheme and the disk size is now 9,4 mb instead of 28,0 mb for the 6.183 breeze icons.

As the icons got rid of unnecessary code the rendering should now be way faster, and with the style stuff I hope to find users to play with it and will find nice solutions for our awesome Plasma desktop.

Open Issue

All in all there is one (big) issue: The style stuff works for now only for Plasma and QML apps, but I hope that in the future we can have this feature for the (QWidget) KDE applications, too.

So if you are an icon designer, bring this shiny new functionality to your icon set and the devs will bring the functionality to the KDE applications.

Advertisements
Standard

19 Gedanken zu “Performance update for breeze icons

  1. Nice, I use the same approach for QWidgets and it works – the currentcolor follows text color.. All at the cost of removing support for icon themes (btw, breeze is not a mono theme, there are icons with fill:currentColor plus blue, etc).

      • I feel that the icon designer stops her work exactly in at point: icons. When my app start to depend on currentColor, imagine this: I am setting currentColor to light and background color on which the icons is painted (button, selection, panel, etc.) to something dark. Icon themes that don’t support currentColor will be render as dark-on-dark at least in some places. This is why I disabled general theme support in my app. Not wanting to limit the freedom the theme support can be delegated to volunteers that want to _maintain_ given extra themes. I don’t…

        The same goes to QStyle support but that’s another story. In this designer’s vision, icon theme, widget style and application layout is a big inseparable „3“.

        The code would be presented in a few weeks.

  2. Markus S. schreibt:

    > The style stuff works for now only for Plasma and QML apps

    So under other applications „color:#f2f2f2“ will be used as fallback?

  3. mkl schreibt:

    slightly off-topic, but…

    what’s the name of the theme you’re using on the first screenshot? is it breeze dark? how do I make mine look like that – I like it 🙂

  4. Maarten schreibt:

    Will KDE Plasma 5 have access to the original Oxygen iconset by Nuno Pinheiro? You’re doing great work, but in terms of usability and recognition, Oxygen still wins over flat/monochrome. Our brains are wired for depth, texture and colour.

  5. robin schreibt:

    Very nice for step further to a constent experience. Maybe a bit off topic but something for the near future regarding colours: there has been a recent documentary on 3sat about good sleep and one of the key disruptors is looking at your screen during evening hours which contains too much blue light. So it would be great if plasma was to support some „dawn“-colours with less blue which fade in via some complex algorithm based on forseen user shutdown and sunset based on current geolocation (or maybe just much simpler!). Many thanks to all of you developers. it`s a great joy to follow kde! Best regards, robin

  6. Pingback: Performance update for breeze icons https://kdeonlinux.wordpress.co… | Roy Schestowitz - API Key Placeholder

  7. Pingback: Rainbow Folders | KDE and LINUX

  8. Pingback: | Kdenlive

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s