SVG Handling and Full Page Background

[00:00:00]
>> Sarah Drasner: There's clipping and masking in images, but you can also clip and mask with GIFs. And you can use SVG to do that as well. So this is like clipping and masking within an SVG, I just masked this, and then you can reveal a pattern and things like that.

[00:00:20]
>> Sarah Drasner: This is that scale and cropping, clipping and masking thing that I showed you from earlier. Again, really, really useful resource, so check that out. I also wrote an article called Clipping Versus Masking, When to Use Each because I could never remember until I wrote down. Sometimes I write articles just so that I can commit it to memory.

[00:00:45]
[LAUGH] Or that I know that CSS tricks has good SEO so I can it later. Basically the difference being, clipping is when you're taking the geometry of a shape and using that to cut out another image. Masking is when you're respecting the gradients that you're seeing in those things.

[00:01:06]
So that one where you saw the gif going around and stuff that had some gradients and stuff inside of it. I'm using that to mask a pattern in SVG. So, actually, let's go to the,
>> Sarah Drasner: Clipping and masking.
>> Sarah Drasner: So this first CodePen kinda shows that if this is the original shade It's got a star, but I also have a stroke with some dashes and stuff.

[00:01:48]
If I'm using a clip path, it's really just taking the geometry of the star. Whereas if I'm taking a mask, it's going to cut out, it's gonna see the tone, basically the tone between the. That green is darker, so it's cutting it out and making it lighter. And then the dashes kinda come through as well.

[00:02:10]
So that's a nice way of kind of looking at it. Noel Delgado did this cool pen where he was layering two images on top of each other and using a clip path. To kind of explore those two images, which is I think a really, really popular code pen, because it's super awesome.

[00:02:32]
So there's different ways of using images, the image tag, the background source. For SVG if you haven't worked with it before, you can use it inline, and that's how I would actually suggest you use it. Instead of applying it as a background tab, tag, or an image source because when you write it in line, that's when you can navigate that dom and apply things.

[00:02:55]
So that in line is the way that you're going to be able to access it for things like animation and stuff like that. Sprites, you might be familiar with sprites. It's when you can have a whole lot of images and PNGs on one thing. And then you're exposing one piece of a background in order to show each piece.

[00:03:16]
Part of the reason why we do that is because it's very expensive to make multiple HTTP requests. So if you have a lot of images you wanna put it on this sprite sheet and there's even things that creates bright sheets automatically for you. But when we move in to HDP2, things like that won't be an issue anymore because that handles those multiple request in a much more responsible way.

[00:03:38]
So if you upgrade your site to using HDP2, you no longer have to use stuff like image sprites full page backgrounds. This is a pretty important one because there's a lot of times where people want a full bleed hero image. Even if you don't want it, everyone else does.

[00:03:56]
Or sometimes you want to use it for some of the geometry of something. I used it because we created something with grid and I wanted it Just sticking in that one spot, right? I wanted it to kind of be flexible. So basically the trick here, actually some of these prefixes, we don't need anymore like the O one.

[00:04:18]
I should go update that article. So we use background no repeat, center, center, fixed. And then we have background size cover, which basically makes it take up that whole space.