About a year ago we added SVG support to the Windows and Web GUIs. SVG images have the advantage that they can be scaled better than bitmap images and that it is easier to adjust, for example, the color of (parts of) an image. This is used extensively by the Universal GUI to match the color of icons to the chosen light or dark theme.

Colored icons

With the latest 2019.2 release of the Windows and Web GUIs, this feature has also been added to these GUIs.

The Windows and Web GUI will now adjust the color of SVG icons to the theme color of the corresponding label, making it no longer necessary to add the same icon in different colors to the model. This was often done for tile menus or detail tiles, which usually use a dark tile color with light icons.

Adjusting the color is done automatically for elements in SVG images that have a fill style but no color set, or where the color is set to black (#000000).

(And yes, we can do that, because it's never a good idea to use pure black in your UI )

Icons in tab pages

Although SVGs can be scaled better than bitmap images, it can still happen that icons become blurry. For example, consider an SVG icon designed for 24x24 containing a line drawn with a two pixel brush. If this icon is scaled to a size that is not exactly a multiple of the original, the line will be anti-aliased.

To prevent this behavior in the Windows and Web GUIs, we've added the option to influence the size of icons in tab pages. Using the UseManualIconSizeTabHeader extended property, the manual height set for document and component tab pages will not be used as padding for the tabs but will scale the icons to the specified size. 

Icons in tiles

Another point of attention was the use of SVGs in tiles. SVGs (and large bitmaps) in tiles were scaled so that they filled the tile completely. To ensure that it’s no longer necessary to use separate SVGs with increased padding in tiles, we have also fixed this. 

(If you made use of this “feature” in your project and you cannot update the icons yet, you can set the FillTileIcons extended property to temporarily restore the old functionality.)