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).

Comments

  1. User Avatar
    Emil
    Permalink to comment#

    Hi, with your videos, SVG isn’t scary. Great job.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag