Join Morten Rand-Hendriksen for an in-depth discussion in this video Difference between SVG and icon fonts, part of Web Icons with SVG.
- [Voiceover] When I say web icon, there's a good chance the first thing you think of is icon font. For the past several years, we've been using custom icon fonts as a stopgap measure to display scalable icons in the browser without having to rely on the somewhat spotty browser support of SVG. However, today, browser support is good enough, and we have the necessary shims and polyfills to cover older browsers and start using SVG in production especially for web icons, so what are the main differences between SVG and icon fonts? First off, an SVG is a bona fide graphic, whereas an icon font is a font glyph.
While SVG support is not ideal across all browsers, inline SVGs will always either be displayed or not be displayed at all depending on whether they are supported. Icon fonts are not that simple. Some browsers do not support custom fonts, others treat fonts in strange ways by applying anti-aliasing, weird positioning, or other effects by default, and when you use icon fonts, we typically have to bake them into pseudo elements to avoid the browser trying to understand what the glyph actually stands for.
This becomes a real issue when you're working with accessibility. All this said, when you compare SVG to icon font, the major deciding factor should be what format best serves your purpose. Icon fonts are incredibly easy to use and well-supported in most browsers. They have their issues, but we know how to deal with them. SVGs, on the other hand, are a bit harder to use, at least until you know how to use them properly, and there are serious browser issues that have to be accounted for, but what you get with SVG that you'll never have with icon fonts is full control over the graphic in the browser.
SVG is, in many ways, the holy grail of web graphics. It can be scaled and styled and animated endlessly right in the browser, and it opens possibilities for programmatically rendered graphics that were previously nothing more than lofty and unrealistic dreams. What I'm about to show you in this course is just the tip of the iceberg where SVGs are concerned. Once you learn how to add SVGs to your own web project, you'll unlock almost unlimited potential for advanced dynamic web graphics.
SVG is an XML-based method for instructing the browser to draw scalable vector graphics based on defined shapes and coordinates. The challenge with SVGs is they are not like other graphic files: Rather than a grid of pixels, they are code instructions interpreted by the browser on the fly. This poses some unique challenges and unique opportunities when it comes to implementation. In this course, you'll learn various methods to deploy SVG icons in webpages, each with its own use cases, benefits, and drawbacks. Morten Rand-Hendriksen shows how to insert individual SVG images, add SVGs as inline elements and SVG sprites via the command line, and automate SVGs with Grunticon. Plus, get tips on making your graphics backward-compatible and accessible, and using SVG icons in WordPress.
- SVG vs. icon fonts
- Getting existing SVG icons
- Creating your own icons
- Adding individual SVG icons to webpages
- Adding SVG as an inline element or background image
- Using external and inline SVG sprites
- Automating SVG generation with Grunticon
- Using SVG icons in WordPress