Exago v2016.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.
Admins can enable SVG on an application-wide basis by toggling General > Feature/UI Settings > Use SVG for Application Icons to True in the Admin Console.
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.
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.