1 00:00:00,500 --> 00:00:04,290 There are two different way to add SVGs to a Web page. 2 00:00:04,290 --> 00:00:09,420 You can embed SVG markup directly into an HTML document, but 3 00:00:09,420 --> 00:00:11,130 we'll learn about that later. 4 00:00:11,130 --> 00:00:15,050 The other way is to add SVGs to a Web page and 5 00:00:15,050 --> 00:00:20,270 use them like traditional image files such as PNGs or JPEGs. 6 00:00:20,270 --> 00:00:21,960 We can use SVGs and 7 00:00:21,960 --> 00:00:27,970 HTML with the image element or we can use SVGs as background images. 8 00:00:27,970 --> 00:00:29,220 Let's check it out. 9 00:00:29,220 --> 00:00:32,170 Before we drop our SVG file into a Web page, 10 00:00:32,170 --> 00:00:38,780 there is one more step I'd like to take, and that is SVG optimization. 11 00:00:38,780 --> 00:00:45,010 There's a really cool tool on GitHub called SVGO, 12 00:00:45,010 --> 00:00:51,130 or SVG Optimizer, and there is a graphical 13 00:00:51,130 --> 00:00:58,020 user interface version of this available for Mac and Windows. 14 00:00:58,020 --> 00:01:02,850 And if you are using Linux, you can still always open up an SVG and 15 00:01:02,850 --> 00:01:05,030 optimize it manually. 16 00:01:05,030 --> 00:01:08,570 However, this is just a quick timesaver. 17 00:01:08,570 --> 00:01:15,010 Now, I've already installed svgo-gui onto my computer. 18 00:01:15,010 --> 00:01:20,060 So I'm going to switch over to it here, and all we have to do to optimize our 19 00:01:20,060 --> 00:01:25,370 SVG and remove some of the additional metadata that we don't really need 20 00:01:25,370 --> 00:01:31,550 is just take our SVG file and drag it directly onto svgo-gui. 21 00:01:31,550 --> 00:01:35,661 And when we release it here, we'll get 22 00:01:35,661 --> 00:01:41,690 a 12% savings in our file size in this particular case. 23 00:01:41,690 --> 00:01:48,100 Now, this file was pretty small to begin with at 2.659 kilobytes. 24 00:01:48,100 --> 00:01:54,610 So, it's actually not a huge savings, but if you do have a more complex SVG file, 25 00:01:54,610 --> 00:01:59,290 this might actually help your page load times quite a bit. 26 00:01:59,290 --> 00:02:06,019 So, let's switch over to our workspace now and just close this. 27 00:02:07,030 --> 00:02:11,360 And when you open up your workspace, you can open up the index.html and 28 00:02:11,360 --> 00:02:15,530 it will look something like this. 29 00:02:15,530 --> 00:02:20,040 And let's just take a look around to see what else we have here before we 30 00:02:20,040 --> 00:02:21,670 get started coding. 31 00:02:21,670 --> 00:02:25,678 Inside of the CSS folder, there's normalize.css, and 32 00:02:25,678 --> 00:02:27,982 that's pretty standard stuff. 33 00:02:27,982 --> 00:02:31,838 That just makes a level playing field for our website and 34 00:02:31,838 --> 00:02:35,622 helps it work across different browsers more easily. 35 00:02:35,622 --> 00:02:40,688 And we also have main.css and that has some starter code in it, 36 00:02:40,688 --> 00:02:46,070 but we'll be writing some additional code down here. 37 00:02:46,070 --> 00:02:49,814 Now, we also have an image called star.svg, and 38 00:02:49,814 --> 00:02:53,751 that's the same SVG file that we saved previously. 39 00:02:53,751 --> 00:02:56,851 I've just named it slightly differently here. 40 00:02:56,851 --> 00:03:03,900 And when we open that up, you'll see that Workspaces recognizes this as XML. 41 00:03:03,900 --> 00:03:08,560 It looks sort of like HTML, but it is in fact different. 42 00:03:08,560 --> 00:03:13,530 You'll notice different elements like circle and path, or 43 00:03:13,530 --> 00:03:18,860 the SVG element itself, but we're not going to worry about that right now. 44 00:03:18,860 --> 00:03:22,610 We're going to jump back into our HTML. 45 00:03:22,610 --> 00:03:26,590 Let's go ahead and include an SVG. 46 00:03:26,590 --> 00:03:30,071 So, I'm going to type out 47 00:03:30,071 --> 00:03:36,889 an image element with the source img/star.svg. 48 00:03:36,889 --> 00:03:40,822 And then I'll give it an alt attribute, and 49 00:03:40,822 --> 00:03:46,349 I'll say something like Star Logo, course, you want to type 50 00:03:46,349 --> 00:03:52,640 out something that is appropriate to whatever SVG you are using. 51 00:03:52,640 --> 00:03:58,300 So, if we save that, and go over to our 52 00:03:58,300 --> 00:04:03,750 example here and refresh, you should see something that looks like this. 53 00:04:03,750 --> 00:04:10,020 It's a pretty giant image, but the nice thing is that it's very crisp. 54 00:04:10,020 --> 00:04:13,650 You'll notice that none of the lines here are pixelated and 55 00:04:13,650 --> 00:04:17,700 that's because everything is being represented as a vector here. 56 00:04:17,700 --> 00:04:19,100 So, it's all very sharp. 57 00:04:20,700 --> 00:04:26,530 But let's try to style this with a little bit of CSS to make it look a bit nicer. 58 00:04:26,530 --> 00:04:28,669 So I'll go into main.css here. 59 00:04:28,669 --> 00:04:31,606 [BLANK_AUDIO] 60 00:04:31,606 --> 00:04:38,096 And I'm going to create a class called graphic, and 61 00:04:38,096 --> 00:04:47,698 I'm going to apply this to another element I'm going to use to wrap my image. 62 00:04:47,698 --> 00:04:52,258 But let's just give it a margin of 1em on the top and bottom, and 63 00:04:52,258 --> 00:04:56,410 auto on the left and right sides, and that will center it. 64 00:04:56,410 --> 00:05:00,610 And then I'll give it a width of 20%. 65 00:05:00,610 --> 00:05:05,215 Now, if I create an element that 66 00:05:05,215 --> 00:05:10,681 wraps our image, the class graphic. 67 00:05:10,681 --> 00:05:15,523 [BLANK_AUDIO] 68 00:05:15,523 --> 00:05:19,795 Then we save that out, and refresh. 69 00:05:19,795 --> 00:05:22,170 We'll get something that looks like this. 70 00:05:22,170 --> 00:05:27,730 You'll notice that the SVG is filling the space that is available to it. 71 00:05:29,030 --> 00:05:33,410 So, if we come out of full screen here and 72 00:05:33,410 --> 00:05:39,120 we resize the browser, you'll see that the scalable vector graphic 73 00:05:40,640 --> 00:05:46,890 scales to fit the size of the containing element, and it still looks pretty good. 74 00:05:46,890 --> 00:05:50,770 Now, there is another way to include an SVG and 75 00:05:50,770 --> 00:05:53,620 that is by using a background image. 76 00:05:54,720 --> 00:05:58,940 So, I'm going to create a second element here, 77 00:06:02,670 --> 00:06:05,960 and I'll give this another pretty generic class name. 78 00:06:05,960 --> 00:06:08,344 I'll say graphic-with-text. 79 00:06:08,344 --> 00:06:11,699 [BLANK_AUDIO] 80 00:06:11,699 --> 00:06:17,385 And then inside of that, I'm going to create a paragraph and 81 00:06:17,385 --> 00:06:22,190 I'll say, This text will go on top of the graphic. 82 00:06:24,100 --> 00:06:30,240 So we'll save that, and then let's switch over to our CSS again. 83 00:06:30,240 --> 00:06:36,770 And I want to maintain these styles on this new class, 84 00:06:36,770 --> 00:06:42,360 so let's just type out that selector there. 85 00:06:43,978 --> 00:06:47,120 We'll add a space just so we can sort of see that there's 86 00:06:47,120 --> 00:06:49,830 two different selectors there separated by a comma. 87 00:06:50,960 --> 00:06:53,751 And then we'll say graphic-with-text. 88 00:06:53,751 --> 00:06:56,920 [BLANK_AUDIO] 89 00:06:56,920 --> 00:07:00,763 And let's just give this text a color of white. 90 00:07:00,763 --> 00:07:07,840 We'll say the background is transparent, so there's no background color. 91 00:07:07,840 --> 00:07:12,540 Then we need to type out the URL to this graphic. 92 00:07:12,540 --> 00:07:15,750 So in this case, we need to step out of the CSS folder, 93 00:07:15,750 --> 00:07:20,920 step into the image folder, and then we'll say star.svg. 94 00:07:20,920 --> 00:07:27,025 And then we just want to center this graphic, say no-repeat, 95 00:07:27,025 --> 00:07:30,890 and let's save this out and see what we have so far. 96 00:07:32,310 --> 00:07:34,890 Now, that looks pretty small. 97 00:07:36,200 --> 00:07:37,060 Why is that? 98 00:07:37,060 --> 00:07:42,110 Well, it's because we don't have an explicit height on our graphic. 99 00:07:42,110 --> 00:07:47,078 Rather, the height is just being set by whatever is in the container. 100 00:07:47,078 --> 00:07:52,020 So, the height is just the height of this text. 101 00:07:52,020 --> 00:07:59,930 However, if we say something like height 200 pixels and then refresh, 102 00:07:59,930 --> 00:08:04,020 you'll see that we now have something that's a little bit more appropriate. 103 00:08:04,020 --> 00:08:07,980 And you can play around with the text, adjust some margin and padding. 104 00:08:07,980 --> 00:08:15,972 Maybe you can set the image to be over on the left and top. 105 00:08:15,972 --> 00:08:18,526 [BLANK_AUDIO] 106 00:08:18,526 --> 00:08:19,803 There we go. 107 00:08:19,803 --> 00:08:25,130 So now, when we resize the browser, you should see something like this. 108 00:08:25,130 --> 00:08:31,000 And if you have an SVG image that maybe you're using as a site background, 109 00:08:31,000 --> 00:08:35,190 you'll probably have text and maybe even other graphics on top of it. 110 00:08:36,630 --> 00:08:43,120 Next, we'll learn about how to embed SVG markup directly into our HTML and 111 00:08:43,120 --> 00:08:45,460 when it's appropriate to do so. 112 00:08:45,460 --> 00:08:49,840 We'll also learn about how to modify SVGs with CSS.