Join Morten Rand-Hendriksen for an in-depth discussion in this video Patch browser support issues, part of Creating Web Icons with SVG.
- [Voiceover] As with the previous methods we've covered,…using external SVG sprites stored in their own files,…and calling in the symbols in your page,…will not work in older browsers.…However, there's an additional caveat here.…This also doesn't work in modern versions…of Internet Explorer.…Because, Internet Explorer doesn't like…that we are trying to pull content out from one file,…and jamming it into another.…It kinda looks like we're doing something fishy.…It's actually fine, but Internet Explorer doesn't like it.…That means for full, modern, cross-browser support,…we need to add in a shim.…
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