SVG Icons Overview
SVG icons are vector images defined in XML format. Because they are blocks of XML tags, they allow a webpage to display vector graphics. Their major advantage is that you can scale them to any size without any quality degradation.
Advantages
When it comes to displaying vector graphics on a webpage, you have several options. Two of them are font icons and SVG icons.
The main benefits of using SVG icons are:
-
Rendering and Scalability—SVG icons are treated by the browsers as images, so anti-aliasing issues are avoided. This ensures that SVG icons are sharp at all resolutions, without losing quality.
-
Flexibility:
- You can control the individual parts of an SVG icon through CSS (font size, color, animation).
- You can also apply SVG-specific CSS filters and stroke properties.
- Multi-color SVG icons are also supported.
-
Accessibility—Using semantic elements and attributes, such as
title,desc, andaria-labelledbymakes them accessible to screen readers, search engines, and other devices.
Usage
The Telerik and Kendo UI SVG icons are available as an NPM package that contains the definitions and metadata of the icons.
npm install --save @progress/kendo-svg-icons
Framework-Specific Documentation
For specific information about the font icons in the context of the Telerik and Kendo UI libraries, refer to the official product documentation:
