Join Morten Rand-Hendriksen for an in-depth discussion in this video Add an inline SVG with SVGInjector, part of Web Icons with SVG.
- View Offline
- [Voiceover] If you've watched any of my other courses,…you'll know I can't talk about SVGs,…without also showing you how to incorporate…SVGs in your WordPress projects.…So, in the next two movies,…I'll give you a brief rundown of how you can…use the techniques we have covered in this course,…to add SVGs to your WordPress themes.…In this movie, I'll show you how to add an SVG…as a graphic element to the header of the site,…using SVGInjector.…And in the next movie,…I'll show you how to build an advanced, custom,…social media menu using Grunt.json.…This is all done using a child theme…built on top of my theme called Popper.…
And you can get the completed child theme…by going to the Exercise Files for this movie…06, 01, simply grabbing the folder here, Popper.svg,…dumping it into the Themes folder…in whatever WordPress site you're currently working with,…and activating the theme Popper.svg.…That will give you what you see here…and, if you're familiar with the Popper theme,…you'll see the only difference is…I've swapped out the Site Title for this SVG logo…
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