SVG

[00:00:00]
>> You might have heard of SVG before. We're not gonna go too, too in depth what it stands for Scalable Vector Graphics. So it's an XML based markup language that describes two dimensional graphics. It's also a text based or open web standard describing images that can be rendered cleanly at any size.

[00:00:19]
Works really well with other web standards like CSS. So unlike JPEG or PNG, SVG can be rendered at any size without loss of quality. So it's really great, and we'll see that with some of the icons, right? We can also change some of the properties of SVG, like the color of it, which is super useful, so you don't have to load different types of assets.

[00:00:42]
So you might have heard of inline SVG. There are a couple benefits to using inline SVG, for reference, this is what it looks like. You're literally defining the element inline, so you're seeing the path and the strokes, and things like that, that's what that looks like. So there are fewer HTTP requests.

[00:00:58]
You're not requesting a file, it's there. And we can use fill property and change the color of our strokes and our paths and things like that. Unfortunately, it is a little bit verbose, like this isn't the nice thing to look at, but it does have some benefits. The alternative is you have a link to an SVG file, which is absolutely something that you can do.

[00:01:20]
But again, it's gonna require a request. With images, we're gonna be working with them in the code. It's a little bit easier to explain like, in real time, so I didn't put any slides in there. We're just gonna jump into it and explain things as we go. Okay, homepage is done.

[00:01:40]
Here's our speaker page, white background, orange text. Right now, we have an orange background and white text. So, let's start at the top, our header does not have the same styles as our homepage, right, we need to apply apply those. Does anyone know why they're not being applied at the moment if we open our speakers page?

[00:02:02]
How come there are styles aren't being applied there in the base file here? So why are they not applied? That's because we don't have any class names on our elements here, right? I'm gonna copy and paste for time sake here, but here in our index file we have to find all these like them class names, right?

[00:02:25]
I'm gonna copy and paste over our nav here, to our speakers file. Okay, so when we do that, look at that. Magically, it's beautiful again. So let's address the color palette change here. So while the homepage has an orange background with white text, speakers page has a white background with orange text.

[00:02:49]
So in order to alleviate this, I'm gonna create a body class on both a class for the body elements on both Home and Speakers. So let's go ahead and do that. So in our index file, we'll start there, set a class on the body. So we'll call it body, and this one will have a modifier, we'll call it primary.

[00:03:10]
It's our primary color palette. Speakers will be very similar, but it'll be secondary, body, body, secondary. So in our base file here, remember we defined all of these styles on the body element here, let's change that. So we still wanna keep this font family, I'm gonna leave that there.

[00:03:31]
Let's just pull out these. So we still wanna have those, stay body, Primary. Well, we can set those values back on there, right, it's working like expected. I'm gonna copy and paste this for the secondary as well, secondary. Text on primary, again, I could create new variables for this, but at this point, it's kind of a matter of opinion how many variables you wanna create.

[00:04:00]
Color, primary, like that. Cool, so there we go. However, something is wrong with our header. Anyone know what's wrong with our header? We're missing our shopping cart, it's gone away. Well, at least it looks like it has. It's actually still there, right? That's because we are importing this SVG using the image tag.

[00:04:29]
And so, SVGs rendered as images, they're not gonna inherit color. So instead, let's change these to inline SVGs. I'm going to go into our File Explorer, let's say icons, shopping.cart. Let's copy all of this SVG code as ugly as it is. I'm going to replace the image of this icon with the inline svg, right?

[00:04:55]
It's angry, but it will work. Let me see here. So as soon as I save this and go back to the homepage, it still renders. So that works great. It renders properly in the homepage. How do we make this orange on our speakers page? Let's inspect this again.

[00:05:18]
It would help if I replaced all the speakers page two. Let me do that, okay? So now, It's there, it's an inline SVG, but it's still not visible. There are a couple of different properties that we can use on this SVG to change the styling. So if I highlight this SVG, let's just say for fun, give it a stroke.

[00:05:47]
Let's change the stroke color to orange. Look at that, we see our icon. It looks like just an outline, a very thin outline, right? So we're changing the stroke color of this SVG. Instead, there's something called fill. Now, it's not gonna work around the SVG, in fact, we have to go in and find the path.

[00:06:07]
We can say fill orange, right? So by finding this path element, we can set the color of it right there. So we don't need a separate file, we can just change this in our CSS code. So let's do that, I'm going to give this a class. This is on my Speakers page class =, we'll call you shopping-cart-icon.

[00:06:35]
We'll give this a primary. All right, this one will be secondary, no, it's a primary color. So I'm giving it a primary name here. So shopping-cart icon primary. This is just for the Speaker's page. So let's go ahead into our speaker CSS file, target this. Now, we tried to set the fill on the SVG element itself, notice it didn't work, right?

[00:07:01]
We need to target this path. So in order to do that, we can see here inside SVG, we've got g, we've got path. So that's how we're gonna target that. We're gonna say, target the g and then target path. And then we can go ahead and set the fill on there.

[00:07:18]
And we will use our color-primer. Color-primary, there we go. So that's working. So now on our home page, it's white, on our speakers page, it's orange, and we only have one file, so that's great. Or we don't even need the file because it's inline. The content is right up against the viewport yet again, right?

[00:07:40]
So it doesn't have the same padding around it. Our index page remember we set a class on that main content area, and that's where we defined padding. Where do you go? Main, I moved into home, didn't I? Yeah, here we go, main. We set a padding on the homepage of 150 pixels.

[00:08:03]
We set that on our main element, right? We need to do the same thing for our speakers page, so, the content sign up against the viewport. So let's go ahead and add a class to our main content area. Class is main. Now, remember I said, we've defined that in the index file, right?

[00:08:30]
So I'm gonna pull this out, it's gonna be common and shared across both of our pages. I'm gonna plop it into the base file. It's being imported into both. So yeah, we see it now, but of course, there's some overflow issues with some of these large images. We're gonna ignore that, but at least the padding is there now.

[00:08:55]
And real quick, back in our index file, there were two other selectors here that styled the main element, right, but these were really specific to the home page. So, I could keep them listed as like main heading and main subheading, but semantically, it's a little bit confusing because this is not being applied to both pages.

[00:09:14]
So, inside of our index.html file again, let's do something like this. We've got our classes on our body here. We had body primary and index, and body secondary and speakers. Let's add a third class here, we'll call this one home. We'll do the same here, but we'll call this one speakers, all right?

[00:09:36]
So now, back inside of our index file set of just mean heading, we can be extra clear that this is living inside of the home page, or the home element, or element containing the class of home. So it should be pretty clear looking at this like, okay, this is not for every main heading, it's the main headings inside of the homepage.

[00:09:58]
Just to check that I haven't broken anything. Yeah, it's still working. We'll do the same thing here with the speaker's page, right, cuz we do have a title in our speakers page here, right, it's an h1. So we'll give this a class main_title, right? All right, so we're still using that main, but we wanna preface it now by that speaker's class.

[00:10:21]
We just added on our body speakers main_title, like that. We need a larger font size here, 98 pixels for that heading. All right, so there we go. That was a little more like our design, let's go back over here.