Join Morten Rand-Hendriksen for an in-depth discussion in this video Overview of the methods, part of Web Icons with SVG.
- View Offline
- [Voiceover] At their core SVG's are images.…That means we can use them like we use any…other image files either as reference elements…or as background elements using CSS.…However, because SVG's are code based…we can also add them directly to the markup…of an HTML document to unlock some cool…extra functionalities.…In this chapter we'll look at three different…methods to add individual SVG's…to an HTML document.…In the process I'll also show you how to make…your graphics backwards compatible…to browsers that don't support SVG's.…
The first method replaces an existing…PNG header image with a reference…to the matching SVG I created and optimized…in the previous chapter.…The second method places the actual SVG…code inside the HTML document allowing…us to change the appearance of the SVG using CSS.…And the third method swaps out existing…PNG icons for SVG varieties using…background image CSS functionality.…all right, now that you know what we're doing…let's get cracking.…
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