Scroll

SVG Icons

Exago version 2016.3 ships with a brand new set of icons which make use of the SVG format to dramatically improve image quality and scalability.

What is SVG?

SVG (Scalable Vector Graphics) is an open-source vector image format which has gained widespread use in recent years. SVG is a vector format, meaning that images are not composed of pixels, but of vectors (lines). This has several advantages over raster (pixel) formats, such as PNG.

Vector graphics have the advantage of being indefinitely scalable up or down in size without any loss in quality. For example, see the following comparison:

Raster (original size):

Vector ("original" size):

When small in size, the two formats look roughly the same. But then zoom in:

Raster (2x size):

Vector (2x size):

The difference is now obvious. The vector image looks smooth and crisp, but the raster is blurry and blocky. This also has a noticeable impact when using higher pixel density displays, such as Retina (Apple iMac/iPad), or 4K monitors.

Enabling SVG

Admins can enable SVG on an application-wide basis by toggling the following Admin Console setting to True, or by editing the config file XML:

( Feature/UI Settings Use SVG for Application Icons ) <usesvgforappicons>

SVG files follow the same naming scheme as the PNG files. In other words, every PNG file "ImageName.png"  has a counterpart named "ImageName.svg" in the "svg" subdirectory.

Additionally, CSS id tags are the same regardless of which image type is being used. In other words, custom CSS and Action Events should generally not have to be altered.

Compatibility

The following browsers support the SVG format:

  • Google Chrome
  • Mozilla Firefox 3.0+
  • Microsoft Internet Explorer 9.0+
  • Microsoft Edge
  • Apple Safari

One option for improving compatibility is to automatically detect the user's browser and switch the SVG setting based on compatibility, or give the user a switch that they can use in case the images are not displaying.

For example, using the .NET API:

if (userBrowser == (Chrome || Firefox 3.0+ || IE9+ || Edge || Safari))
	myApi.SetupData.General.UseSVGForAppIcons = true;
else
	myApi.SetupData.General.UseSVGForAppIcons = false;

Additional Info

Download this article.


Hidden Article Information

Article Author
Exago Development
created 2016-11-29 20:28:22 UTC
updated 2017-02-03 17:28:12 UTC

Labels
icon, changing icons, Application Themes, App Themes, svg, scalable, vector graphics, vector, images,
Have more questions? Submit a request