This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Embed SVG Directly In Markup with the “Use” Tag

    Damon BauerDamon Bauer

    In this lesson, we’ll learn how to embed an SVG sprite into markup and reference it throughout the page using the SVG “use” tag and fragment identifiers.

    This has become the standard way of displaying SVG icons because of the ability to dynamically style individual parts (especially interaction states). Also, because the SVG is just markup embedded on the page, it creates no extra HTTP requests. However, the block of SVG needs repeating on every page where icons are used.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 I'll start by pasting a sprite of SVG symbols directly into the HTML. This is our SVG tag. Each icon is wrapped in a symbol tag that has a unique ID on it. The benefit to symbol elements is that you can add title and description tags for additional accessibility.

    00:20 On the outer SVG tag, I want to set style to Display None so that this block of SVG symbols is not displayed, and it doesn't take up any space. I'm going to collapse this SVG tag. Below it, I'll add another SVG tag, and I'll give it a class of Icon.

    00:41 Inside I'll add a use tag along with an xlink href attribute. I'll provide a value of #plug, which, if I open up the SVG again, you'll recall that this first symbol has an ID of Plug. That's what we are rendering when we say use xlink #plug. The process is the same to add other icons, so I'll just duplicate that code. I'll change plug to star, and I can change it again to umbrella.

    01:17 I'll duplicate umbrella again. This time, I'll add a class to the SVG of Iconsmall. These icons don't have a width and height on their SVG tag, so they'll try to take up as much space as they can. To fix that, let's use CSS and target the icon class. I'll set a width and a height for em, and I'll target Iconsmall and set its width and height to two em.

    Discuss

    Discuss