Once upon a time, icon fonts were the exciting new tools we used to build better websites. That time has passed, yet most of us are still relying on a tool that’s no longer relevant in the landscape of the modern web. In this talk, I’ll discuss the various merits of making the switch to SVG and some neat things you can do with SVG. We’ll touch on various use cases, and present some ideas for determining the workflow that’s best suited to your individual needs. We’ll provide some practical tips and tools for using SVG sprites more easily and efficiently in your work. We’ll also discuss ideas for implementing SVG within WordPress themes and plugins in a simple, consistent manner. Along the way, we’ll discuss various challenges you may encounter, and how to approach them. By the time we’re done, you’ll be fully armed to start using SVG today!
Easy-as-SVG Github repo. (Code sources)
Resources
- Basics of SVG
- An overview of SVG sprite creation methods
- Typefaces for dyslexia
- CSS Tricks' vault of SVG articles
- Seren Davies: Death to icon fonts
- Building an icon system with React
- Styling and animating SVGs with CSS
- A guide to SVG fallbacks
- Understanding the SVG coordinate system
- Accessible SVGs
- A complete guide to SVG fallbacks
- Emoji, the world's fastest-growing language
- Styling SVG <use> content with CSS
- SVG on the web: a practical guide