Optimize SVGs for Better Performance using svgo

Include an SVG with an Image Tag

Add an SVG as a Background Image

Add an SVG as an Embedded Background Image

Combine Multiple SVGs into an SVG Sprite

Add an SVG Sprite as a Background Image

Automate SVG Sprite Background Image Variations with a SCSS Mixin

Embed SVG Directly In Markup with the “Use” Tag

Load an External SVG Inside a “Use” Tag

Style an SVG Icon with CSS

 Build an SVG icon component in React

Create an SVG Icon System

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.

https://app.egghead.io/api/v1/lessons/html-5-embed-svg-directly-in-markup-with-the-use-tag/subtitles

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

Embed SVG Directly In Markup with the “Use” Tag

Share this video with your friends

Course

Create an SVG Icon System