viewBox

[00:00:00]
>> Sarah Drasner: Let's talk about viewBox and svgOrigin, as the last thing that we do. We talked about transform-origin, but we didn't talk about svgOrigin. What is svgOrigin? It's not a real thing. It's a thing that GreenSock gives us, so it's not a part of the spec. So we talked about how viewBox, as just as like a reminder, zero, zero, width and height, yeah?

[00:00:22]
Remember that? Okay, well if I went and got this little group here, and I looked at where that is inside the SVG Coordinate System, it would be at 215, 160, 42, and 20. That's where that thing lives. And the way that I found that out is I went a grabbed that group, like the idea of that group, and I use a native method called getBBox.

[00:00:48]
So I console log the getBBox, which gives me an object that's called SVGRect. And that gives me x, y, width, and height. Well, that sounds familiar, right? That's all the things that we need to make a viewBox. So if I want to change the viewBox of this particular code pen that is not loading in that window, I'm making the SVG width 100 VW and height 100 VW,which is a really quick way of making it take up the whole screen.

[00:01:18]
And I say houses, which is that group, getBBox, I console logged it so if you you can go check out the console if you want, but basically, I say S.X, S.Y, S.Width, S.Height, and then I create a new viewBox, so if I comment this out, I have the whole scene.

[00:01:41]
That whole scene is there the entire time. But I can change the viewBox on the fly, to just zoom in on those houses. Well, of course, we're gonna animate it. Of course, we're gonna animate it. So we can use it for like data visualization, and zoom in on a piece of our map.

[00:01:58]
What's nice about this is you're not loading multiple things, and you're kind of giving the context of what they're zooming into. So we talked a little bit about, like, what would happen if you were using D3. I would make a whole map with D3 and maybe have some stats and stuff, and then play with interaction in GreenSock and bring everything to life.

[00:02:24]
So, kind of cool, and the nice thing is, because it's an SVG, everything is really stable for responsive. So I can, or touch points, or probably need some padding, but I can also have it work on mobile. So we can also do things that are really weird, like we can do flow charts.

[00:02:49]
So I could say, what graphic format should I use, are you interested in responsive? Yes, mobile first all the way. Is it an image with a lot of tonal variations, like a photo? No, is it super complex? No, SVG, and of course, my friend draw SVG, I use that everywhere, right?

[00:03:06]
And then, I can say, check out our compendium and load in CSS-Tricks. So, for each one of those things, you can kind of go through and find different things on flow chart, and it will bring you to different documentation. So, you can learn more about images through that flow chart.

[00:03:24]
Bustle uses that technique a lot. They have, like fun flow charts where, and theirs are like beautifully illustrated and stuff. So, you can check out their SVG flow charts.