Join Morten Rand-Hendriksen for an in-depth discussion in this video What we'll cover in this course, part of Web Icons with SVG.
- View Offline
- [Voiceover] My goal for this course…is to give you the tools and know-how you need…to use SVGs in your Web projects.…To do so, I'll present you with several methods…for adding and displaying SVGs on the Web…and, for each of the methods, I'll explain…how to provide proper backwards-compatibility…for older browsers and browsers that don't support SVGs.…I've created a natural progression in the course,…first explaining how to create and optimize SVGs.…Then, how to use different methods for adding…and customizing individual SVGs,…how to generate and use inline and external SVG Sprites…and how to use advanced command line tools…to optimize and generate…robust cross-browser implementations of SVG icon.…
And, to top it off, at the end, I'll even show you…how to use some of these techniques in a WordPress theme.…What you'll discover is because an SVG is a markup document,…there are a myriad of ways…we can use and manipulate that document…to display the graphic exactly the way we want.…The following chapters walk you through…
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