1 00:00:00,000 --> 00:00:04,557 [MUSIC] 2 00:00:04,557 --> 00:00:08,994 Loading in lots of images can generate many HTTP requests. 3 00:00:08,994 --> 00:00:13,984 This is particularly bad if we're using lots of small images like icons where 4 00:00:13,984 --> 00:00:19,950 the HTTP requests can collectively take more time than the file download itself. 5 00:00:19,950 --> 00:00:23,802 If we can combine these smaller assets together into one download, 6 00:00:23,802 --> 00:00:25,550 it will save some time. 7 00:00:25,550 --> 00:00:27,730 We're using five different SVGs, but 8 00:00:27,730 --> 00:00:32,180 we can put them together in a single file and then reference them in the HTML. 9 00:00:32,180 --> 00:00:36,580 It's possible to do this with regular raster images using a slightly different 10 00:00:36,580 --> 00:00:41,690 technique, but small images like these should almost always be SVGs. 11 00:00:41,690 --> 00:00:45,240 Now, you might be wondering, why not do this with all of our images, 12 00:00:45,240 --> 00:00:48,270 including the gallery photos and the profile photo? 13 00:00:48,270 --> 00:00:52,570 Well, there are a few reasons, but here are two important ones. 14 00:00:52,570 --> 00:00:57,180 For the purposes of this example, imagine we're running a much larger blog or 15 00:00:57,180 --> 00:00:58,850 content driven site. 16 00:00:58,850 --> 00:01:03,130 The first reason for not putting all our images into a sprite map is that it would 17 00:01:03,130 --> 00:01:07,940 very quickly become a massive file and it would take a very long time to load. 18 00:01:07,940 --> 00:01:08,590 Worse yet, 19 00:01:08,590 --> 00:01:13,750 most site visitors will probably only look at a small number of all the images. 20 00:01:13,750 --> 00:01:15,440 But they're still downloading all of them. 21 00:01:16,630 --> 00:01:20,630 Second, it would be very difficult for other team members to use and 22 00:01:20,630 --> 00:01:22,550 maintain the sprite map. 23 00:01:22,550 --> 00:01:25,000 Every new image would need to be added. 24 00:01:25,000 --> 00:01:28,310 Instead, it's much better to only use sprites for 25 00:01:28,310 --> 00:01:33,470 small user interface images that might be common to more than one page. 26 00:01:33,470 --> 00:01:38,320 We can do that by creating a single SVG that contains all our shapes, and 27 00:01:38,320 --> 00:01:42,570 then referencing them with the Use element. 28 00:01:42,570 --> 00:01:44,620 So, looking at our workspace here. 29 00:01:46,540 --> 00:01:48,844 We can open up our Assets folder and 30 00:01:48,844 --> 00:01:53,010 you'll see that there's this file called svg-defs.svg. 31 00:01:53,010 --> 00:02:00,620 And in this file, I've combined all of our SVGs together. 32 00:02:01,710 --> 00:02:03,366 But I wanna show you how to do that. 33 00:02:03,366 --> 00:02:06,525 So let's actually just delete this file or 34 00:02:06,525 --> 00:02:11,536 maybe [SOUND] remove everything in it and we'll start from scratch. 35 00:02:11,536 --> 00:02:14,811 So first, we need to wrap everything in an SVG element. 36 00:02:14,811 --> 00:02:19,498 So I'm gonna say svg 37 00:02:19,498 --> 00:02:29,498 xmlns=http://www.w3.org/2000/svg. 38 00:02:32,470 --> 00:02:40,758 Then style [NOISE] will be display none. 39 00:02:40,758 --> 00:02:45,602 Cause we don't actually want to display in this particular SPG when we 40 00:02:45,602 --> 00:02:50,624 put it onto our page, we just want to reference it's individual parts. 41 00:02:50,624 --> 00:02:54,950 So then I'm going to use the symbol element. 42 00:02:59,240 --> 00:03:03,290 And inside of symbol, I'm going to give each one of these an ID. 43 00:03:05,020 --> 00:03:09,610 So, for this I'll say mail, because this is going to be the mail icon. 44 00:03:10,750 --> 00:03:13,150 And then we need to populate. 45 00:03:14,280 --> 00:03:16,590 The view box attribute. 46 00:03:16,590 --> 00:03:18,830 And we'll get that information in a minute. 47 00:03:18,830 --> 00:03:22,920 So lets open up mail.svg. 48 00:03:22,920 --> 00:03:28,940 And here we have same kind of thing, we have the svg element and 49 00:03:28,940 --> 00:03:33,110 what we want is what's inside of the svg element. 50 00:03:33,110 --> 00:03:34,360 So let's copy that. 51 00:03:36,130 --> 00:03:37,750 And we'll paste it there. 52 00:03:37,750 --> 00:03:39,656 But we also need the viewbox. 53 00:03:39,656 --> 00:03:44,220 So, from the mail.svg, 54 00:03:44,220 --> 00:03:50,030 we have the svg element, then the viewbox attribute, and we need what's there 55 00:03:50,030 --> 00:03:54,090 to go into the attribute on the symbol element. 56 00:03:55,830 --> 00:04:02,450 So following the same pattern, we'll do this for the phone icon, 57 00:04:02,450 --> 00:04:07,600 so let's open up phone, and you'll notice the view box is exactly the same. 58 00:04:08,600 --> 00:04:12,450 So all we really need to do is grab what's inside here. 59 00:04:13,970 --> 00:04:14,680 And replace it. 60 00:04:16,140 --> 00:04:21,550 And then same thing for a Twitter icon. 61 00:04:23,560 --> 00:04:29,380 So we'll open up twitter.svg, we'll get everything, 62 00:04:29,380 --> 00:04:33,710 inside the svg element, and paste it there, which should be a bit more. 63 00:04:33,710 --> 00:04:36,587 It's a more complex icon. 64 00:04:36,587 --> 00:04:44,235 And then, [NOISE] the next two icons are what goes in the footer. 65 00:04:44,235 --> 00:04:48,220 So let's copy and paste there, 66 00:04:48,220 --> 00:04:55,167 we'll say Twitter wrap, and let's get this one here. 67 00:04:55,167 --> 00:04:58,310 So Twitter wrap.svg, we'll copy that. 68 00:04:59,310 --> 00:05:01,180 And paste it in there. 69 00:05:01,180 --> 00:05:04,972 And then the view box is different for this one. 70 00:05:04,972 --> 00:05:07,499 So we need to grab that and replace it. 71 00:05:07,499 --> 00:05:11,403 [BLANK_AUDIO] 72 00:05:11,403 --> 00:05:14,998 And let's just make some room to work here. 73 00:05:14,998 --> 00:05:18,590 We'll copy this Twitter wrap and paste it. 74 00:05:22,010 --> 00:05:26,750 And then we'll replace it with the ID Facebook wrap. 75 00:05:26,750 --> 00:05:27,710 So let's grab that. 76 00:05:29,580 --> 00:05:32,090 And I think the view box is the same. 77 00:05:32,090 --> 00:05:32,590 Yep. 78 00:05:33,840 --> 00:05:37,920 We just need to grab what's inside of the SVG. 79 00:05:37,920 --> 00:05:41,820 And we'll paste that there. 80 00:05:43,360 --> 00:05:46,000 So now, we're ready to actually use these. 81 00:05:46,000 --> 00:05:49,600 So let me close these other SVG's, cuz we don't need them anymore. 82 00:05:52,340 --> 00:05:58,000 And we're not actually going to reference the SVG defs file, 83 00:05:58,000 --> 00:06:03,240 we're just going to embed it directly into our HTML so let's copy that, and 84 00:06:03,240 --> 00:06:08,160 we're going to start out with the contact page because that's using. 85 00:06:08,160 --> 00:06:09,110 Most of these. 86 00:06:09,110 --> 00:06:11,840 And then we'll move on to the about and 87 00:06:11,840 --> 00:06:16,370 index page because we really only need a footer icon for those. 88 00:06:16,370 --> 00:06:18,680 So let's go to contact here. 89 00:06:18,680 --> 00:06:21,680 And just after the body go ahead and piece this in. 90 00:06:23,500 --> 00:06:26,840 And let's just make sure that this is properly indented. 91 00:06:26,840 --> 00:06:30,600 I think that's good, yep. 92 00:06:31,720 --> 00:06:32,770 And now, 93 00:06:32,770 --> 00:06:37,740 down here at the bottom, we want to first replace what's in the footer, here. 94 00:06:37,740 --> 00:06:40,140 So we can do that pretty easily. 95 00:06:40,140 --> 00:06:44,830 I'm just going to space these out a bit, so we can see what's going on here. 96 00:06:46,570 --> 00:06:52,210 And let's remove this image, but we'll keep 97 00:06:52,210 --> 00:06:57,640 the class social icon, and we're going to replace it with the SVG elements. 98 00:06:57,640 --> 00:07:01,439 SVG class social icon. 99 00:07:03,760 --> 00:07:10,200 And workspaces will close that for us, and then we can use the use element. 100 00:07:10,200 --> 00:07:18,570 We'll say use and then the attribute x, link, followed by a colon href. 101 00:07:18,570 --> 00:07:23,060 Equals and then a pound sign inside there, 102 00:07:23,060 --> 00:07:27,760 and we'll say facebook-wrap, because we're selecting that ID. 103 00:07:27,760 --> 00:07:31,980 And this is a self closing element, so we just need to do that. 104 00:07:33,390 --> 00:07:36,030 And actually this is for Twitter, so 105 00:07:36,030 --> 00:07:42,310 we want to say Twitter here, and then we'll just copy this. 106 00:07:42,310 --> 00:07:45,241 And do the same thing down here, so we'll replace this image. 107 00:07:45,241 --> 00:07:50,069 [SOUND] And we'll say 108 00:07:50,069 --> 00:07:54,617 facebook-wrap. 109 00:07:54,617 --> 00:08:00,984 So now we need to replace these images, but these are using background images. 110 00:08:00,984 --> 00:08:05,027 And we embedded the SVG directly into the page. 111 00:08:05,027 --> 00:08:10,440 So we can't really use CSS to replace these images anymore. 112 00:08:10,440 --> 00:08:15,270 We're actually gonna have to place them directly onto the page. 113 00:08:15,270 --> 00:08:19,990 So let's start out with the markup that we'll need, and 114 00:08:19,990 --> 00:08:22,960 then we'll do the CSS after that. 115 00:08:22,960 --> 00:08:26,340 So I'm going to remove this class here. 116 00:08:27,970 --> 00:08:31,840 Because we're just gonna need to apply a style to all of these now. 117 00:08:31,840 --> 00:08:36,730 And we were only using that class for selecting the proper background image. 118 00:08:36,730 --> 00:08:41,710 So I'm gonna do the same thing, svg with no class. 119 00:08:41,710 --> 00:08:48,685 And then inside of it I'm going to use the use element again with xlink=href. 120 00:08:49,870 --> 00:08:58,780 And in this case I'm going to say #phone because it is a phone icon. 121 00:08:58,780 --> 00:09:00,450 Again, that's a self-closing tag. 122 00:09:02,535 --> 00:09:05,835 And, let's just do the same thing for these other two icons. 123 00:09:05,835 --> 00:09:08,365 So, mail here, we don't need a class. 124 00:09:08,365 --> 00:09:10,515 Twitter there, we don't need a class. 125 00:09:10,515 --> 00:09:13,755 And then, let's just space these out properly. 126 00:09:15,590 --> 00:09:22,430 And then, I'll just go ahead and paste in that SVG just above the anchor element. 127 00:09:22,430 --> 00:09:27,030 And now we need to modify our CSS in order to make this work. 128 00:09:27,030 --> 00:09:31,874 So, let's jump over to main.css. 129 00:09:33,240 --> 00:09:39,030 And we'll scroll down to the contact page, there it is. 130 00:09:39,030 --> 00:09:43,880 And now we need to rewrite some of what's here. 131 00:09:43,880 --> 00:09:48,040 So let's just delete all this stuff, and 132 00:09:48,040 --> 00:09:50,950 we'll keep contact info and we'll start from scratch here. 133 00:09:50,950 --> 00:09:55,725 So contact-info on the list items. 134 00:09:55,725 --> 00:10:00,976 We now want a margin of 10 pixels on the bottom, 135 00:10:00,976 --> 00:10:04,060 and 0 for everything else. 136 00:10:04,060 --> 00:10:07,966 And that will just keep everything separated properly. 137 00:10:07,966 --> 00:10:15,620 Then for the anchor elements, we want to keep that same padding that we had before. 138 00:10:17,130 --> 00:10:21,650 Just so the icons are a little bit separated from the links. 139 00:10:21,650 --> 00:10:28,636 And then finally, [SOUND] on the SVGs we want to size these properly. 140 00:10:28,636 --> 00:10:34,914 So we'll say width: 14 pixels height: 14 pixels, 141 00:10:34,914 --> 00:10:43,036 we'll save that out.And let's go to our contact page and see how we did. 142 00:10:43,036 --> 00:10:45,890 So, it looks like there's a phone icon for all of these. 143 00:10:45,890 --> 00:10:51,570 That's probably because I did not replace the ID here. 144 00:10:51,570 --> 00:10:52,950 So, let's do that. 145 00:10:52,950 --> 00:10:56,600 Change it to mail and then twitter. 146 00:10:57,820 --> 00:11:00,560 Let's go back and refresh and there we go. 147 00:11:00,560 --> 00:11:02,530 Now, we have the proper icons. 148 00:11:02,530 --> 00:11:05,358 Their SVGs, they're directly onto the page, and 149 00:11:05,358 --> 00:11:07,740 they're not background images anymore. 150 00:11:07,740 --> 00:11:12,490 So let's do the same thing on about and portfolio. 151 00:11:12,490 --> 00:11:14,440 We just need to go back to our svg-defs. 152 00:11:14,440 --> 00:11:16,550 We'll copy that. 153 00:11:16,550 --> 00:11:21,390 Let's go to the about page and just inside the body here. 154 00:11:21,390 --> 00:11:23,410 We'll paste this. 155 00:11:23,410 --> 00:11:24,690 Let's indent it properly. 156 00:11:24,690 --> 00:11:27,180 But remember, we don't need these other icons here. 157 00:11:27,180 --> 00:11:28,730 Mail, phone and twitter. 158 00:11:28,730 --> 00:11:31,690 We just need twitter-wrap and facebook-wrap. 159 00:11:31,690 --> 00:11:33,540 So, let's delete that. 160 00:11:36,870 --> 00:11:39,950 And let's copy what we have there. 161 00:11:41,130 --> 00:11:48,250 And we'll paste in on index, and then we need to adjust the footer as well. 162 00:11:48,250 --> 00:11:55,095 So let's scroll down to the footer in contacts.html, 163 00:11:55,095 --> 00:11:59,618 and let's copy this new SVG footer. 164 00:11:59,618 --> 00:12:02,305 And, first of all, replace the footer in about. 165 00:12:02,305 --> 00:12:05,303 [BLANK_AUDIO] 166 00:12:05,303 --> 00:12:06,785 Here we go. 167 00:12:06,785 --> 00:12:10,409 And then I'll replace it in the index. 168 00:12:10,409 --> 00:12:13,502 [BLANK_AUDIO] 169 00:12:13,502 --> 00:12:20,232 So, there we go, now all of our SVGs are combined into one file. 170 00:12:20,232 --> 00:12:26,387 And go back to home here, open up the Chrome Dev Tools and see how we did. 171 00:12:26,387 --> 00:12:30,562 So I'll go to the Network tab and I'll refresh the page. 172 00:12:30,562 --> 00:12:34,925 And you can see that we've reduced the number of HTTP requests. 173 00:12:34,925 --> 00:12:39,630 So there's now 17 requests, we're transferring 210 kilobytes. 174 00:12:39,630 --> 00:12:44,510 And the page loads pretty quickly in about 250 milliseconds, 175 00:12:44,510 --> 00:12:45,420 or a quarter of a second. 176 00:12:45,420 --> 00:12:48,420 Let's just refresh that a few more times. 177 00:12:48,420 --> 00:12:52,970 And we're pretty consistently at a much lower number than we were before. 178 00:12:52,970 --> 00:12:56,690 Now, that could be maybe some network traffic got adjusted and 179 00:12:56,690 --> 00:13:01,380 shifted around but it looks like fairly consistently here. 180 00:13:01,380 --> 00:13:04,120 We're doing better than we were before, so that's good.