[MUSIC]

Loading in lots of images can generate many HTTP requests.

This is particularly bad if we're using lots of small images like icons where

the HTTP requests can collectively take more time than the file download itself.

If we can combine these smaller assets together into one download,

it will save some time.

We're using five different SVGs, but

we can put them together in a single file and then reference them in the HTML.

It's possible to do this with regular raster images using a slightly different

technique, but small images like these should almost always be SVGs.

Now, you might be wondering, why not do this with all of our images,

including the gallery photos and the profile photo?

Well, there are a few reasons, but here are two important ones.

For the purposes of this example, imagine we're running a much larger blog or

content driven site.

The first reason for not putting all our images into a sprite map is that it would

very quickly become a massive file and it would take a very long time to load.

Worse yet,

most site visitors will probably only look at a small number of all the images.

But they're still downloading all of them.

Second, it would be very difficult for other team members to use and

maintain the sprite map.

Every new image would need to be added.

Instead, it's much better to only use sprites for

small user interface images that might be common to more than one page.

We can do that by creating a single SVG that contains all our shapes, and

then referencing them with the Use element.

So, looking at our workspace here.

We can open up our Assets folder and

you'll see that there's this file called svg-defs.svg.

And in this file, I've combined all of our SVGs together.

But I wanna show you how to do that.

So let's actually just delete this file or

maybe [SOUND] remove everything in it and we'll start from scratch.

So first, we need to wrap everything in an SVG element.

So I'm gonna say svg

xmlns=http://www.w3.org/2000/svg.

Then style [NOISE] will be display none.

Cause we don't actually want to display in this particular SPG when we

put it onto our page, we just want to reference it's individual parts.

So then I'm going to use the symbol element.

And inside of symbol, I'm going to give each one of these an ID.

So, for this I'll say mail, because this is going to be the mail icon.

And then we need to populate.

The view box attribute.

And we'll get that information in a minute.

So lets open up mail.svg.

And here we have same kind of thing, we have the svg element and

what we want is what's inside of the svg element.

So let's copy that.

And we'll paste it there.

But we also need the viewbox.

So, from the mail.svg,

we have the svg element, then the viewbox attribute, and we need what's there

to go into the attribute on the symbol element.

So following the same pattern, we'll do this for the phone icon,

so let's open up phone, and you'll notice the view box is exactly the same.

So all we really need to do is grab what's inside here.

And replace it.

And then same thing for a Twitter icon.

So we'll open up twitter.svg, we'll get everything,

inside the svg element, and paste it there, which should be a bit more.

It's a more complex icon.

And then, [NOISE] the next two icons are what goes in the footer.

So let's copy and paste there,

we'll say Twitter wrap, and let's get this one here.

So Twitter wrap.svg, we'll copy that.

And paste it in there.

And then the view box is different for this one.

So we need to grab that and replace it.

[BLANK_AUDIO]

And let's just make some room to work here.

We'll copy this Twitter wrap and paste it.

And then we'll replace it with the ID Facebook wrap.

So let's grab that.

And I think the view box is the same.

Yep.

We just need to grab what's inside of the SVG.

And we'll paste that there.

So now, we're ready to actually use these.

So let me close these other SVG's, cuz we don't need them anymore.

And we're not actually going to reference the SVG defs file,

we're just going to embed it directly into our HTML so let's copy that, and

we're going to start out with the contact page because that's using.

Most of these.

And then we'll move on to the about and

index page because we really only need a footer icon for those.

So let's go to contact here.

And just after the body go ahead and piece this in.

And let's just make sure that this is properly indented.

I think that's good, yep.

And now,

down here at the bottom, we want to first replace what's in the footer, here.

So we can do that pretty easily.

I'm just going to space these out a bit, so we can see what's going on here.

And let's remove this image, but we'll keep

the class social icon, and we're going to replace it with the SVG elements.

SVG class social icon.

And workspaces will close that for us, and then we can use the use element.

We'll say use and then the attribute x, link, followed by a colon href.

Equals and then a pound sign inside there,

and we'll say facebook-wrap, because we're selecting that ID.

And this is a self closing element, so we just need to do that.

And actually this is for Twitter, so

we want to say Twitter here, and then we'll just copy this.

And do the same thing down here, so we'll replace this image.

[SOUND] And we'll say

facebook-wrap.

So now we need to replace these images, but these are using background images.

And we embedded the SVG directly into the page.

So we can't really use CSS to replace these images anymore.

We're actually gonna have to place them directly onto the page.

So let's start out with the markup that we'll need, and

then we'll do the CSS after that.

So I'm going to remove this class here.

Because we're just gonna need to apply a style to all of these now.

And we were only using that class for selecting the proper background image.

So I'm gonna do the same thing, svg with no class.

And then inside of it I'm going to use the use element again with xlink=href.

And in this case I'm going to say #phone because it is a phone icon.

Again, that's a self-closing tag.

And, let's just do the same thing for these other two icons.

So, mail here, we don't need a class.

Twitter there, we don't need a class.

And then, let's just space these out properly.

And then, I'll just go ahead and paste in that SVG just above the anchor element.

And now we need to modify our CSS in order to make this work.

So, let's jump over to main.css.

And we'll scroll down to the contact page, there it is.

And now we need to rewrite some of what's here.

So let's just delete all this stuff, and

we'll keep contact info and we'll start from scratch here.

So contact-info on the list items.

We now want a margin of 10 pixels on the bottom,

and 0 for everything else.

And that will just keep everything separated properly.

Then for the anchor elements, we want to keep that same padding that we had before.

Just so the icons are a little bit separated from the links.

And then finally, [SOUND] on the SVGs we want to size these properly.

So we'll say width: 14 pixels height: 14 pixels,

we'll save that out.And let's go to our contact page and see how we did.

So, it looks like there's a phone icon for all of these.

That's probably because I did not replace the ID here.

So, let's do that.

Change it to mail and then twitter.

Let's go back and refresh and there we go.

Now, we have the proper icons.

Their SVGs, they're directly onto the page, and

they're not background images anymore.

So let's do the same thing on about and portfolio.

We just need to go back to our svg-defs.

We'll copy that.

Let's go to the about page and just inside the body here.

We'll paste this.

Let's indent it properly.

But remember, we don't need these other icons here.

Mail, phone and twitter.

We just need twitter-wrap and facebook-wrap.

So, let's delete that.

And let's copy what we have there.

And we'll paste in on index, and then we need to adjust the footer as well.

So let's scroll down to the footer in contacts.html,

and let's copy this new SVG footer.

And, first of all, replace the footer in about.

[BLANK_AUDIO]

Here we go.

And then I'll replace it in the index.

[BLANK_AUDIO]

So, there we go, now all of our SVGs are combined into one file.

And go back to home here, open up the Chrome Dev Tools and see how we did.

So I'll go to the Network tab and I'll refresh the page.

And you can see that we've reduced the number of HTTP requests.

So there's now 17 requests, we're transferring 210 kilobytes.

And the page loads pretty quickly in about 250 milliseconds,

or a quarter of a second.

Let's just refresh that a few more times.

And we're pretty consistently at a much lower number than we were before.

Now, that could be maybe some network traffic got adjusted and

shifted around but it looks like fairly consistently here.

We're doing better than we were before, so that's good.