Join Morten Rand-Hendriksen for an in-depth discussion in this video Generate cross-browser icons in the command line using Grunticon, part of Creating Web Icons with SVG.
- [Voiceover] Now that you know…how to use a browser-based Grumpicon,…I want to show you how to use…the command-line tool Grunticon instead.…That's because using Grunt and Grunticon,…we can add additional processes to our SVG generation,…to optimize our SVGs and do other things,…and we can also extend the functionality of our SVGs…with some additional features.…In the exercise files for this movie,…I've reset our project back to where it was…in the beginning of this chapter.…So we are once again looking at…the PNG versions of these icons.…That's so I can walk you through the entire process…of generating Grunticons, using the command-line tool,…and also how to add them into your project.…
Now, in this movie,…I'll be using the task runner called Grunt.js,…and if you're not familiar with Grunt,…you need to watch this course before you continue.…This is Ray Villalobos's Web Workflows with Grunt.js,…and he walks you through the entire process…of setting up Grunt on your computer…and getting it to work properly.…I already have a pre-compiled Grunt file for you…
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