SVGs as Images

There are two different way to add SVGs to a Web page. 0:00 You can embed SVG markup directly into an HTML document, but 0:04 we'll learn about that later. 0:09 The other way is to add SVGs to a Web page and 0:11 use them like traditional image files such as PNGs or JPEGs. 0:15 We can use SVGs and 0:20 HTML with the image element or we can use SVGs as background images. 0:21 Let's check it out. 0:27 Before we drop our SVG file into a Web page, 0:29 there is one more step I'd like to take, and that is SVG optimization. 0:32 There's a really cool tool on GitHub called SVGO, 0:38 or SVG Optimizer, and there is a graphical 0:45 user interface version of this available for Mac and Windows. 0:51 And if you are using Linux, you can still always open up an SVG and 0:58 optimize it manually. 1:02 However, this is just a quick timesaver. 1:05 Now, I've already installed svgo-gui onto my computer. 1:08 So I'm going to switch over to it here, and all we have to do to optimize our 1:15 SVG and remove some of the additional metadata that we don't really need 1:20 is just take our SVG file and drag it directly onto svgo-gui. 1:25 And when we release it here, we'll get 1:31 a 12% savings in our file size in this particular case. 1:35 Now, this file was pretty small to begin with at 2.659 kilobytes. 1:41 So, it's actually not a huge savings, but if you do have a more complex SVG file, 1:48 this might actually help your page load times quite a bit. 1:54 So, let's switch over to our workspace now and just close this. 1:59 And when you open up your workspace, you can open up the index.html and 2:07 it will look something like this. 2:11 And let's just take a look around to see what else we have here before we 2:15 get started coding. 2:20 Inside of the CSS folder, there's normalize.css, and 2:21 that's pretty standard stuff. 2:25 That just makes a level playing field for our website and 2:27 helps it work across different browsers more easily. 2:31 And we also have main.css and that has some starter code in it, 2:35 but we'll be writing some additional code down here. 2:40 Now, we also have an image called star.svg, and 2:46 that's the same SVG file that we saved previously. 2:49 I've just named it slightly differently here. 2:53 And when we open that up, you'll see that Workspaces recognizes this as XML. 2:56 It looks sort of like HTML, but it is in fact different. 3:03 You'll notice different elements like circle and path, or 3:08 the SVG element itself, but we're not going to worry about that right now. 3:13 We're going to jump back into our HTML. 3:18 Let's go ahead and include an SVG. 3:22 So, I'm going to type out 3:26 an image element with the source img/star.svg. 3:30 And then I'll give it an alt attribute, and 3:36 I'll say something like Star Logo, course, you want to type 3:40 out something that is appropriate to whatever SVG you are using. 3:46 So, if we save that, and go over to our 3:52 example here and refresh, you should see something that looks like this. 3:58 It's a pretty giant image, but the nice thing is that it's very crisp. 4:03 You'll notice that none of the lines here are pixelated and 4:10 that's because everything is being represented as a vector here. 4:13 So, it's all very sharp. 4:17 But let's try to style this with a little bit of CSS to make it look a bit nicer. 4:20 So I'll go into main.css here. 4:26 [BLANK_AUDIO] 4:28 And I'm going to create a class called graphic, and 4:31 I'm going to apply this to another element I'm going to use to wrap my image. 4:38 But let's just give it a margin of 1em on the top and bottom, and 4:47 auto on the left and right sides, and that will center it. 4:52 And then I'll give it a width of 20%. 4:56 Now, if I create an element that 5:00 wraps our image, the class graphic. 5:05 [BLANK_AUDIO] 5:10 Then we save that out, and refresh. 5:15 We'll get something that looks like this. 5:19 You'll notice that the SVG is filling the space that is available to it. 5:22 So, if we come out of full screen here and 5:29 we resize the browser, you'll see that the scalable vector graphic 5:33 scales to fit the size of the containing element, and it still looks pretty good. 5:40 Now, there is another way to include an SVG and 5:46 that is by using a background image. 5:50 So, I'm going to create a second element here, 5:54 and I'll give this another pretty generic class name. 6:02 I'll say graphic-with-text. 6:05 [BLANK_AUDIO] 6:08 And then inside of that, I'm going to create a paragraph and 6:11 I'll say, This text will go on top of the graphic. 6:17 So we'll save that, and then let's switch over to our CSS again. 6:24 And I want to maintain these styles on this new class, 6:30 so let's just type out that selector there. 6:36 We'll add a space just so we can sort of see that there's 6:43 two different selectors there separated by a comma. 6:47 And then we'll say graphic-with-text. 6:50 [BLANK_AUDIO] 6:53 And let's just give this text a color of white. 6:56 We'll say the background is transparent, so there's no background color. 7:00 Then we need to type out the URL to this graphic. 7:07 So in this case, we need to step out of the CSS folder, 7:12 step into the image folder, and then we'll say star.svg. 7:15 And then we just want to center this graphic, say no-repeat, 7:20 and let's save this out and see what we have so far. 7:27 Now, that looks pretty small. 7:32 Why is that? 7:36 Well, it's because we don't have an explicit height on our graphic. 7:37 Rather, the height is just being set by whatever is in the container. 7:42 So, the height is just the height of this text. 7:47 However, if we say something like height 200 pixels and then refresh, 7:52 you'll see that we now have something that's a little bit more appropriate. 7:59 And you can play around with the text, adjust some margin and padding. 8:04 Maybe you can set the image to be over on the left and top. 8:07 [BLANK_AUDIO] 8:15 There we go. 8:18 So now, when we resize the browser, you should see something like this. 8:19 And if you have an SVG image that maybe you're using as a site background, 8:25 you'll probably have text and maybe even other graphics on top of it. 8:31 Next, we'll learn about how to embed SVG markup directly into our HTML and 8:36 when it's appropriate to do so. 8:43 We'll also learn about how to modify SVGs with CSS. 8:45