Differences in Functionality

[00:00:00]
>> Sarah Drasner: So what happens when we apply it to an SVG? So what happened?
>> Speaker 2: It's applying it to the div and not the SVG, so?
>> Sarah Drasner: No, it's actually applying it to the SVG.
>> Speaker 2: Really?
>> Speaker 3: It's applying it to the SVG as opposed to the circle.
>> Sarah Drasner: That's right, that's right.

[00:00:18]
So it is applying it to the SVG instead of the circle. And the SVG is an HTML element. Everything inside of an SVG, circle, recs, things like that are not, are within the SVG dump. But the SVG element itself is an HTML element, so it has a background.

[00:00:38]
So we can actually use background, not that we want to, right? And it's still moving across, right? That's great Hank, thanks. So why? We're moving the whole SVG instead of the circle, not really a problem. Background doesn't work for SVG, we use fill, right, instead of background. So in HTML land we're using background and borders, in SVG land we're using fills and strokes instead.

[00:01:08]
They work pretty similarly. So what do we wanna do? We wanna apply the fill to the circle, not just the SVG, right? So we're gonna apply that animation, we're gonna put a class on the circle and animate that instead. Does that sound good? Okay, so let's try that.

[00:01:29]
>> Sarah Drasner: No. [LAUGH] What's happening now?
>> Speaker 3: It's going outside of the viewBox.
>> Sarah Drasner: That's right, remember we talked about the viewBox, like canvas that's infinite in every direction, but we're actually looking at it through a window. Well it's sliding outside of the viewBox. I'm bringing this up because this is always the first thing that happens when you first start animating in SVG.

[00:01:48]
The first time I worked with an SVG I was like what is happening. So when a designer gives you an SVG or you're working with an SVG, what you're going to find you need to end up doing is expanding that viewBox. And so usually, because you are gonna move things around, typically if you don't expand it a little bit, when you start moving it, its gonna get cut off somehow.

[00:02:08]
So you could do that within your graphics program totally fine. But you also know about viewBoxes now, so if somebody gives you that, you don't necessarily have to go back to the literal drawing board. You can expand the viewBox by doing some negative values for X and Y.

[00:02:24]
You can always start at zero zero, so you could do negative 20, negative 20 and then expand the viewBox in this direction by 20, 20, but also compensating for this 40, 40. So we can just expand that viewBox. In this case, we are moving it over, right? We are making it longer.

[00:02:41]
So we just need to change the viewBox. How would I change the viewBox? What would I update to give it room?
>> Speaker 2: Remove the width and height.
>> Sarah Drasner: No, we wouldn't remove the width and height. I mean, you could actually remove the width and height. We're gonna actually have to expand the width, as well, so you're not wrong.

[00:03:04]
So removing the width and height isn't a bad idea, but we would probably just make it a little bit bigger, right? But what would we change in the viewBox, which thing?
>> Speaker 3: The third number.
>> Sarah Drasner: The third number.
>> Speaker 3: At the X coordinate, or the X, yeah, coordinate.

[00:03:20]
>> Sarah Drasner: Well not the X coordinate. This is the X coordinate.
>> Speaker 2: Or the X width, I guess.
>> Sarah Drasner: The X width, that's exactly right. We would change the third number, absolutely right, 0, 0, and then make this like 300 or something, and then 70. So we'll target the circle, expand the viewBox, use fill instead of background right?

[00:03:43]
Because before we were using background and now we need to change that to fill inside of our key frames. And remove fill from the markup. So now we target the circle, expand the viewBox, use fill, remove fill from the markup and we have our beautiful animation. My god it's just a circle.

[00:04:00]
[LAUGH] All right, well we did just a whole bunch of things just to move circle around. And you might be thinking, I can already move divs. Why should I learn all of this new stuff and change all these view boxes and do all this stuff?