SVGs as Images8:50 with Nick Pettit
The simplest way to add an SVG to a webpage is to use it just like a normal image file. All modern browsers will accept the SVG file format in the <img> element.
Browser support for SVGs is generally good. However, there are a few issues to be aware of in Internet Explorer, particularly that SVGs are only supported in IE 9+. Read more about SVG browser support at caniuse.com.
SVG and Illustrator Files
Here are the SVG and Adobe Illustrator files used in this course. If you're using Workspaces with this course, there is no need to download these files; they are just listed here in case you prefer to use another text editor.
Free Vector Drawing Tools
If you're looking for an alternative to Adobe Illustrator, here are some free vector drawing tools that work in a web browser. All of them should be able to export to the SVG format.
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
You need to sign up for Treehouse in order to download course files.Sign up