Create a Sprite Map

[MUSIC] 0:00 Loading in lots of images can generate many HTTP requests. 0:04 This is particularly bad if we're using lots of small images like icons where 0:08 the HTTP requests can collectively take more time than the file download itself. 0:13 If we can combine these smaller assets together into one download, 0:19 it will save some time. 0:23 We're using five different SVGs, but 0:25 we can put them together in a single file and then reference them in the HTML. 0:27 It's possible to do this with regular raster images using a slightly different 0:32 technique, but small images like these should almost always be SVGs. 0:36 Now, you might be wondering, why not do this with all of our images, 0:41 including the gallery photos and the profile photo? 0:45 Well, there are a few reasons, but here are two important ones. 0:48 For the purposes of this example, imagine we're running a much larger blog or 0:52 content driven site. 0:57 The first reason for not putting all our images into a sprite map is that it would 0:58 very quickly become a massive file and it would take a very long time to load. 1:03 Worse yet, 1:07 most site visitors will probably only look at a small number of all the images. 1:08 But they're still downloading all of them. 1:13 Second, it would be very difficult for other team members to use and 1:16 maintain the sprite map. 1:20 Every new image would need to be added. 1:22 Instead, it's much better to only use sprites for 1:25 small user interface images that might be common to more than one page. 1:28 We can do that by creating a single SVG that contains all our shapes, and 1:33 then referencing them with the Use element. 1:38 So, looking at our workspace here. 1:42 We can open up our Assets folder and 1:46 you'll see that there's this file called svg-defs.svg. 1:48 And in this file, I've combined all of our SVGs together. 1:53 But I wanna show you how to do that. 2:01 So let's actually just delete this file or 2:03 maybe [SOUND] remove everything in it and we'll start from scratch. 2:06 So first, we need to wrap everything in an SVG element. 2:11 So I'm gonna say svg 2:14 xmlns=http://www.w3.org/2000/svg. 2:19 Then style [NOISE] will be display none. 2:32 Cause we don't actually want to display in this particular SPG when we 2:40 put it onto our page, we just want to reference it's individual parts. 2:45 So then I'm going to use the symbol element. 2:50 And inside of symbol, I'm going to give each one of these an ID. 2:59 So, for this I'll say mail, because this is going to be the mail icon. 3:05 And then we need to populate. 3:10 The view box attribute. 3:14 And we'll get that information in a minute. 3:16 So lets open up mail.svg. 3:18 And here we have same kind of thing, we have the svg element and 3:22 what we want is what's inside of the svg element. 3:28 So let's copy that. 3:33 And we'll paste it there. 3:36 But we also need the viewbox. 3:37 So, from the mail.svg, 3:39 we have the svg element, then the viewbox attribute, and we need what's there 3:44 to go into the attribute on the symbol element. 3:50 So following the same pattern, we'll do this for the phone icon, 3:55 so let's open up phone, and you'll notice the view box is exactly the same. 4:02 So all we really need to do is grab what's inside here. 4:08 And replace it. 4:13 And then same thing for a Twitter icon. 4:16 So we'll open up twitter.svg, we'll get everything, 4:23 inside the svg element, and paste it there, which should be a bit more. 4:29 It's a more complex icon. 4:33 And then, [NOISE] the next two icons are what goes in the footer. 4:36 So let's copy and paste there, 4:44 we'll say Twitter wrap, and let's get this one here. 4:48 So Twitter wrap.svg, we'll copy that. 4:55 And paste it in there. 4:59 And then the view box is different for this one. 5:01 So we need to grab that and replace it. 5:04 [BLANK_AUDIO] 5:07 And let's just make some room to work here. 5:11 We'll copy this Twitter wrap and paste it. 5:14 And then we'll replace it with the ID Facebook wrap. 5:22 So let's grab that. 5:26 And I think the view box is the same. 5:29 Yep. 5:32 We just need to grab what's inside of the SVG. 5:33 And we'll paste that there. 5:37 So now, we're ready to actually use these. 5:43 So let me close these other SVG's, cuz we don't need them anymore. 5:46 And we're not actually going to reference the SVG defs file, 5:52 we're just going to embed it directly into our HTML so let's copy that, and 5:58 we're going to start out with the contact page because that's using. 6:03 Most of these. 6:08 And then we'll move on to the about and 6:09 index page because we really only need a footer icon for those. 6:11 So let's go to contact here. 6:16 And just after the body go ahead and piece this in. 6:18 And let's just make sure that this is properly indented. 6:23 I think that's good, yep. 6:26 And now, 6:31 down here at the bottom, we want to first replace what's in the footer, here. 6:32 So we can do that pretty easily. 6:37 I'm just going to space these out a bit, so we can see what's going on here. 6:40 And let's remove this image, but we'll keep 6:46 the class social icon, and we're going to replace it with the SVG elements. 6:52 SVG class social icon. 6:57 And workspaces will close that for us, and then we can use the use element. 7:03 We'll say use and then the attribute x, link, followed by a colon href. 7:10 Equals and then a pound sign inside there, 7:18 and we'll say facebook-wrap, because we're selecting that ID. 7:23 And this is a self closing element, so we just need to do that. 7:27 And actually this is for Twitter, so 7:33 we want to say Twitter here, and then we'll just copy this. 7:36 And do the same thing down here, so we'll replace this image. 7:42 [SOUND] And we'll say 7:45 facebook-wrap. 7:50 So now we need to replace these images, but these are using background images. 7:54 And we embedded the SVG directly into the page. 8:00 So we can't really use CSS to replace these images anymore. 8:05 We're actually gonna have to place them directly onto the page. 8:10 So let's start out with the markup that we'll need, and 8:15 then we'll do the CSS after that. 8:19 So I'm going to remove this class here. 8:22 Because we're just gonna need to apply a style to all of these now. 8:27 And we were only using that class for selecting the proper background image. 8:31 So I'm gonna do the same thing, svg with no class. 8:36 And then inside of it I'm going to use the use element again with xlink=href. 8:41 And in this case I'm going to say #phone because it is a phone icon. 8:49 Again, that's a self-closing tag. 8:58 And, let's just do the same thing for these other two icons. 9:02 So, mail here, we don't need a class. 9:05 Twitter there, we don't need a class. 9:08 And then, let's just space these out properly. 9:10 And then, I'll just go ahead and paste in that SVG just above the anchor element. 9:15 And now we need to modify our CSS in order to make this work. 9:22 So, let's jump over to main.css. 9:27 And we'll scroll down to the contact page, there it is. 9:33 And now we need to rewrite some of what's here. 9:39 So let's just delete all this stuff, and 9:43 we'll keep contact info and we'll start from scratch here. 9:48 So contact-info on the list items. 9:50 We now want a margin of 10 pixels on the bottom, 9:55 and 0 for everything else. 10:00 And that will just keep everything separated properly. 10:04 Then for the anchor elements, we want to keep that same padding that we had before. 10:07 Just so the icons are a little bit separated from the links. 10:17 And then finally, [SOUND] on the SVGs we want to size these properly. 10:21 So we'll say width: 14 pixels height: 14 pixels, 10:28 we'll save that out.And let's go to our contact page and see how we did. 10:34 So, it looks like there's a phone icon for all of these. 10:43 That's probably because I did not replace the ID here. 10:45 So, let's do that. 10:51 Change it to mail and then twitter. 10:52 Let's go back and refresh and there we go. 10:57 Now, we have the proper icons. 11:00 Their SVGs, they're directly onto the page, and 11:02 they're not background images anymore. 11:05 So let's do the same thing on about and portfolio. 11:07 We just need to go back to our svg-defs. 11:12 We'll copy that. 11:14 Let's go to the about page and just inside the body here. 11:16 We'll paste this. 11:21 Let's indent it properly. 11:23 But remember, we don't need these other icons here. 11:24 Mail, phone and twitter. 11:27 We just need twitter-wrap and facebook-wrap. 11:28 So, let's delete that. 11:31 And let's copy what we have there. 11:36 And we'll paste in on index, and then we need to adjust the footer as well. 11:41 So let's scroll down to the footer in contacts.html, 11:48 and let's copy this new SVG footer. 11:55 And, first of all, replace the footer in about. 11:59 [BLANK_AUDIO] 12:02 Here we go. 12:05 And then I'll replace it in the index. 12:06 [BLANK_AUDIO] 12:10 So, there we go, now all of our SVGs are combined into one file. 12:13 And go back to home here, open up the Chrome Dev Tools and see how we did. 12:20 So I'll go to the Network tab and I'll refresh the page. 12:26 And you can see that we've reduced the number of HTTP requests. 12:30 So there's now 17 requests, we're transferring 210 kilobytes. 12:34 And the page loads pretty quickly in about 250 milliseconds, 12:39 or a quarter of a second. 12:44 Let's just refresh that a few more times. 12:45 And we're pretty consistently at a much lower number than we were before. 12:48 Now, that could be maybe some network traffic got adjusted and 12:52 shifted around but it looks like fairly consistently here. 12:56 We're doing better than we were before, so that's good. 13:01