Creating Web Icons with SVG

Get crisper, smaller web graphics with SVG. Learn three different methods to implement SVG web icons on websites and in WordPress themes.

Introduction

• Welcome
• What to know before watching this course

1. The Case For SVG

• Difference between SVG and icon fonts
• What we'll cover in this course

2. Create and Optimize SVG Icons

• Where to get existing SVG icons
• Creating your own icons
• Optimize SVG with SVGOMG and SVGO

3. Add Individual SVGs

• Overview of the methods
• Add SVG as a regular image
• Add backwards compatibility with SVGeezy
• Add SVG as an inline element
• Add backwards compatibility and more with SVGInjector
• Add SVG as a background image
• Make SVG background images backward compatible
• A word on SVG accessibility

4. External and Inline SVG Sprites

• Overview of the method
• Create a manual SVG sprite
• Display SVGs from an inline sprite
• Create an optimized SVG sprite with SVGO and spritesh
• Display SVGs from an external sprite
• Patch browser support issues

5. Automate Your SVG Process with Grunticon

• Overview of this method
• Generate cross-browser icons with Grunticon
• Display Grunticon SVG icons in HTML documents
• Generate cross-browser icons in the command line using Grunticon
• Display Grunticon SVG icons in HTML documents

6. SVG in WordPress Themes

• Add an inline SVG with SVGInjector
• Create a custom social media menu with Grunticon

Conclusion

• Thank you