14: SVG Icon System – Building Out Defs

The <use> element is clutch to this whole idea of an inline SVG icon system. We learned that a clean way to do it is to put everything you intend to draw later into a <defs> block so it doesn’t render and we can reference them later (tell them browser to draw that icon).

In this video we’re going to spend some time building our own <defs> block by hand. It’s not particularly difficult and, I think, drives home how all this works.

We’re going to make it from SVG that we find in different places around the web. We grab one from The Noun Project, one from IcoMoon, and one from Shutterstock. We do our due diligence in opening the SVG, fixing any weird shapes, snugging up the canvas size, and whatnot. There is no limit here to where this vector information can come from. These three sources are just to show you SVG can come from anywhere vector.

Later on we’ll hopefully simplify this process, but understanding the nuts and bolts of how it works is always useful. You never know when you’ll need to dig deeper (e.g. to figure out why something ain’t working right).