SVGs are vector-based images that are rendered using the browser’s engine. The benefit of using inline SVG icons, is that they do not increase server requests, which could have had an adverse effect on your site’s performance.
Advantages / Differences
- How Icons Render – SVG renders in your page’s HTML rather than as CSS pseudo-elements in Icon Fonts
- Auto Accessibility – SVG supports this feature by default rather than only in a kit
- Advanced Features – SVG supports features such as Power Transforms, Masking, and Layering whereas Icon Fonts do not
- Scalability – Icon fonts may use anti-aliasing techniques implemented by the browser making it less sharp. SVGs are treated as images by browsers, so no anti-aliasing rules are applied.
Note
This feature does not convert Font Awesome Pro icons. If you are a Pro FA user, navigate to your Kit settings at the Font Awesome site at Kit > Settings > Technology and set them to SVG.