Paths create SVG shapes by specifying a series of coordinates. These coordinates can be lines or curves depending on the letter preceding them. Sarah shares a few examples of SVG paths and also explains the preserveAspectRatio property as well as SVG groups.
(tribal music) - So preserveaspectratio is one of those things that people get very confused about very easily, so I'm gonna go over that a little bit, and yes stop me if you are also confused. The default is preserveaspectratio xMidyMid meet, and that uniformly scales like background-size cover in CSS, so if you look at these parameters we take here, it's gonna be basically, it's an align and meter slice, so we have the x which is xMin, Mid, or Max, yMin, Mid, or Max, and then Mid Meet or Slice, or the other part is none, so if you align, basically what it's saying is, we're aligning the minimum value on the x-axis of the element's viewBox with the smallest value of the viewport.
So if we say Min it will be smallest in that second open area, then Mid is middle, Max is full. I'll show you an example of what I mean. And then to kind of go over Meet or Slice, Meet is the default, the entire viewbox is visible within the viewport. And remember the viewport is what you're seeing on your screen. The viewbox is scaled up as much as possible, meeting other criteria, and the viewbox is smaller than the viewport.
So for Slice, Slice is actually pretty semantically named, it visually looks like it's slicing. The entire viewport is covered by the viewbox. The viewbox is scaled down as much as possible, meeting other criteria, and the viewbox is greater than the viewport. If you wanna play around, Sara Soueidon has a great demo for you guys to play with if you want, but I'm just gonna show you some visual examples, so Meet would have all of the image within the viewport, and then it's basically going to, yMin, yMid, yMax, the smallest part of that axis, and then for Slice, it's cutting it off, so it's basically expanding as big as it can, and then slicing to that area.
And then none is basically when you go in Photoshop, and you take preserveaspectratio off, it just kind of scales to the container, so you'll get these kind of smushy images. I made all of these images, but the way that I conceived of making them was from this book SVG Esssentials by Amelia Bellamy-Royds and David Eisenberg, it's a really good book, you should definitely check it out for further reading, they do a really good job of explaining this.
So if we're paths... - [Male] Quick clarification, what's the difference between viewbox and viewport? - Viewbox is what the SVG is using to understand itself, and the viewport is the entire whatever your medium, the same way you designate viewport's for your screen or displays, so it's the entire amount of the display. - [Female] I'm sorry do we have to set these parameters every time or are there defaults? - You have to set the viewbox, but you don't have to set a viewport, the viewport is what the viewport, whatever device you're on your screen.
So if we look at this viewbox, and then the paths and groups, we'll notice that we have this G-element, that's basically a group, and we put the fill and stroke on the g, instead it will map both of the things inside of it, so that's a quick way of grabbing all of the elements that are commonly styled and doing it that way, you can also do it in CSS, you can write g-class equals grouped class, and do the same thing, so you can kind of move lots of elements at once, style lots of elements at once, or we're gonna get into staggers in a little while, it's really great to put everything in a group, so that you can stagger a bunch of elements that are inside of it.
So we can add classes, we can move multiple things at once. And then the last thing I want to cover before we go into the path data is the polyline. So polyline is actually really good, if you're doing anything with data visualization, because look at that it's just an array of points, and that's just very easy to use when you're mapping coordinates or mapping number systems, anything anytime you have JSON data that you would like to map, that's a really easy to use element in SVG. So when we look at the path data, we can see a bunch of letters inside of there, and some of them are capital, some of them are lowercase, there's a z at the end of one and not the other, there's a demo exploring paths that I'll get into in a second.
So if we look at the actual path data, all of the path data starts with M, which is move to, and the difference between the capital letters and the lowercase letters here, is just absolute versus relative positioning, so the capital letters are absolute, lowercase is relative. The next thing that we're gonna look at is line two, so line two unlike in the SVG DOM, when you say a line and it could be king of horizontal or vertical or diagonal it doesn't matter, in path data it does, so the L would be something more diagonal, and then H and V are for horizontal or vertical lines, and any time you close off a path, if you look at thing one, one of them is closed and one of them is not, you can see that Z, that Z at the end of one and not at the other, so that's basically what that means, it's a pretty nice one, especially if you're designing something in Illustrator or a designer gave you something in Illustrator, that you're going to animate, and you're trying to find where you're at, it's a really quick indicator of, okay that's a closed path, that must be this shape that one's not, so that one's this one.
Then we've got curve commands, so there's a bunch of curve commands, but they're all pretty useful and pretty easy to understand once you look at them a little bit. The first one's cubic bezier, that one you'll see a lot, you're probably familiar with cubic bezier, if you do SVG animation, or CSS animations, that's kind of the way that we plot those easing curves and functions. And S is a reflecting cubic bezier, so anytime it's reflected exactly the same on both sides, it's an S.
Quadratic bezier is when both sides share the same control point. T is command control point that's been reflected, so very close to the S, but a litte bit more opinionated than the S would be. And the A is an elliptical arc, so image something like an oval with part of it cut out, that's what an A would be. So there's this really cool thing, this just came out on phod pen last week, but you can kind of move this around and you see all of the kind of path data down here, and you can change the point type, you can see how it changes, I think it's a really good learning tool, I think this demo is really awesome, you can add points too, and watch how they change as you move it to an A, which is that oval path and things, so that's in the code pen collection that I gave you, so if you wanna play around with that, it kind of demystifies some of that path data for you.
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values