Blog

SVGs and ICOs

  • 21 January 2019
  • 0 replies
  • 169 views
SVGs and ICOs
Userlevel 7
Badge +11
The icons you use in your applications for tables, prefilters, tasks and reports often show up in multiple locations in the application, like the menu, tab pages, the ribbon, button bars and the context menu. These locations require different icon sizes, and the user interfaces would scale the supported Bitmap (.bmp) or Portable Network Graphics (.png) icons to the required size. This, however, causes the icons to become blurred.

With the latest release of the users interfaces we’ve added support for two new image formats to solve this problem.

Scalable Vector Graphics

Scalable Vector Graphics (.svg) are images based on vectors instead of pixels, allowing them to be scaled to any size without getting blurry.

Another advantage of SVGs is that, because SVGs are XML-based, it is easy to adjust the properties of the image. In the Universal GUI, for example, we will be able to adjust the color of an icon to the background, so that it will always be clearly visible. This is also why SVG is the recommended image format to use for your application.

All browsers and mobile devices support SVG images by default. The Windows user interface however, and therefore also the Thinkwise development environment, needs to scale and convert the SVGs to bitmaps to be able to display the image. Images that are generated by the user interfaces for tasks, reports and prefilters without icon are now also vector images.

Icons

Icons (ico) are files that can contain multiple images in different sizes and color depths. The user interfaces will automatically select the largest image from the icon file that fits within the boundaries.

The image below (which is an actual screenshot from the Windows userinterface) shows how the different image formats are displayed. Notice how the Icon contains a completely different image for the 48×48 size.



Bitmap – SVG – Icon – Generated

Resources

Looking for SVG images for your application? Try this huge collection of open source icons. You can even adjust the color online!


https://iconpharm.com

0 replies

Be the first to reply!

Reply