There are two different way to add SVGs to a Web page.

You can embed SVG markup directly into an HTML document, but

we'll learn about that later.

The other way is to add SVGs to a Web page and

use them like traditional image files such as PNGs or JPEGs.

We can use SVGs and

HTML with the image element or we can use SVGs as background images.

Let's check it out.

Before we drop our SVG file into a Web page,

there is one more step I'd like to take, and that is SVG optimization.

There's a really cool tool on GitHub called SVGO,

or SVG Optimizer, and there is a graphical

user interface version of this available for Mac and Windows.

And if you are using Linux, you can still always open up an SVG and

optimize it manually.

However, this is just a quick timesaver.

Now, I've already installed svgo-gui onto my computer.

So I'm going to switch over to it here, and all we have to do to optimize our

SVG and remove some of the additional metadata that we don't really need

is just take our SVG file and drag it directly onto svgo-gui.

And when we release it here, we'll get

a 12% savings in our file size in this particular case.

Now, this file was pretty small to begin with at 2.659 kilobytes.

So, it's actually not a huge savings, but if you do have a more complex SVG file,

this might actually help your page load times quite a bit.

So, let's switch over to our workspace now and just close this.

And when you open up your workspace, you can open up the index.html and

it will look something like this.

And let's just take a look around to see what else we have here before we

get started coding.

Inside of the CSS folder, there's normalize.css, and

that's pretty standard stuff.

That just makes a level playing field for our website and

helps it work across different browsers more easily.

And we also have main.css and that has some starter code in it,

but we'll be writing some additional code down here.

Now, we also have an image called star.svg, and

that's the same SVG file that we saved previously.

I've just named it slightly differently here.

And when we open that up, you'll see that Workspaces recognizes this as XML.

It looks sort of like HTML, but it is in fact different.

You'll notice different elements like circle and path, or

the SVG element itself, but we're not going to worry about that right now.

We're going to jump back into our HTML.

Let's go ahead and include an SVG.

So, I'm going to type out

an image element with the source img/star.svg.

And then I'll give it an alt attribute, and

I'll say something like Star Logo, course, you want to type

out something that is appropriate to whatever SVG you are using.

So, if we save that, and go over to our

example here and refresh, you should see something that looks like this.

It's a pretty giant image, but the nice thing is that it's very crisp.

You'll notice that none of the lines here are pixelated and

that's because everything is being represented as a vector here.

So, it's all very sharp.

But let's try to style this with a little bit of CSS to make it look a bit nicer.

So I'll go into main.css here.

[BLANK_AUDIO]

And I'm going to create a class called graphic, and

I'm going to apply this to another element I'm going to use to wrap my image.

But let's just give it a margin of 1em on the top and bottom, and

auto on the left and right sides, and that will center it.

And then I'll give it a width of 20%.

Now, if I create an element that

wraps our image, the class graphic.

[BLANK_AUDIO]

Then we save that out, and refresh.

We'll get something that looks like this.

You'll notice that the SVG is filling the space that is available to it.

So, if we come out of full screen here and

we resize the browser, you'll see that the scalable vector graphic

scales to fit the size of the containing element, and it still looks pretty good.

Now, there is another way to include an SVG and

that is by using a background image.

So, I'm going to create a second element here,

and I'll give this another pretty generic class name.

I'll say graphic-with-text.

[BLANK_AUDIO]

And then inside of that, I'm going to create a paragraph and

I'll say, This text will go on top of the graphic.

So we'll save that, and then let's switch over to our CSS again.

And I want to maintain these styles on this new class,

so let's just type out that selector there.

We'll add a space just so we can sort of see that there's

two different selectors there separated by a comma.

And then we'll say graphic-with-text.

[BLANK_AUDIO]

And let's just give this text a color of white.

We'll say the background is transparent, so there's no background color.

Then we need to type out the URL to this graphic.

So in this case, we need to step out of the CSS folder,

step into the image folder, and then we'll say star.svg.

And then we just want to center this graphic, say no-repeat,

and let's save this out and see what we have so far.

Now, that looks pretty small.

Why is that?

Well, it's because we don't have an explicit height on our graphic.

Rather, the height is just being set by whatever is in the container.

So, the height is just the height of this text.

However, if we say something like height 200 pixels and then refresh,

you'll see that we now have something that's a little bit more appropriate.

And you can play around with the text, adjust some margin and padding.

Maybe you can set the image to be over on the left and top.

[BLANK_AUDIO]

There we go.

So now, when we resize the browser, you should see something like this.

And if you have an SVG image that maybe you're using as a site background,

you'll probably have text and maybe even other graphics on top of it.

Next, we'll learn about how to embed SVG markup directly into our HTML and

when it's appropriate to do so.

We'll also learn about how to modify SVGs with CSS.