Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating your own icons, part of Web Icons with SVG.
- View Offline
- [Voiceover] If you can't find the SVG icon…you're looking for, or you need a custom SVG to use…in your web project, you can make it yourself…using various graphic design tools.…I personally use Adobe Illustrator, what you see here.…A lot of my colleagues use Sketch.…The tool really doesn't matter all that much.…This course is not about creating SVGs though.…So I won't go into great depth on this topic.…If you want to learn more about how to create SVGs,…or rather, how to use an application like Illustrator…or Sketch that can export SVGs,…then check out some of the other courses in the library…dedicated to this process, including James Williamson's…excellent Creating Icon Fonts for the Web.…
All that said, let me give you a five minute crash course…on my process.…For this course, I've designed this fairly complex graphic.…You can find the Illustrator file…in the exercise files for this movie, 0202.…This graphic has several layers and some text.…Now, so far, this is just a standard Illustrator document,…there's nothing fancy here.…
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