viewBox & Responsive

[00:00:01]
>> Sarah Drasner: No more number garbage, you now know what all of those things are, cool. So the viewbox and responsive, I mentioned before that it's a piece of graph paper that gets shrunk and gets bigger and smaller. But let's actually look at what that looks like. So if I have this SVG viewbox at 450 100 and the width is 450px, this is what it looks like.

[00:00:24]
If I change that to 250px, it's the same piece of graph paper plotting the same points. It's just a smaller piece of graph paper. Cool.
>> Sarah Drasner: So if I move something out of the viewbox, this is what we'll get. That rectangle will all of a sudden be clipped out.

[00:00:43]
And that means that you can actually clip and mask things on the fly, if you want to. If you wanted to have things not showing up for a little while and then make their grand entrance onto the SVG. You can do that by pushing it outside and bringing it back down.

[00:00:59]
The SVG still knows it's there, unlike a JPEG, where those things are literally cropped out of the frame, they don't exist. It still exists, but this is the other thing about that. If you're working with a designer who has a messy artboard and there's all sorts of stuff [LAUGH] on the side they might exporting.

[00:01:16]
Not necessarily, Illustrator has gotten really smart about this and it started cropping things out better not in the frame. But if they don't pay attention to that stuff, you might be shipping a bunch of that other gunk that they're keeping off on the side. So keep that in consideration, too.

[00:01:34]
So you can do stuff like this. This is a really simple pen. This is not fantastic or anything. But it's just taking a bunch of clouds, moving them off to the side and then moving them across and because of the viewbox, they're clipped. They're not showing up until I've brought them into the scene.