The simplest way to create SVG graphics is with the platonic shapes. These elements let you define rectangles, circles, polygons, etc. Sarah walks through a couple examples and also talks briefly about the SVG ViewBox.
- So, first we're gonna get into platonic shapes. The first thing I want you to notice is that's not a lot of code for the amount of things drawn on your screen right now. And what we have here inside the SVG are just like the designations of letting it know that it's going to be in XML format. This is not strictly important to have in when you're doing in line for when you designate a doc type of HTML5 but I would say keep it in because it's really good for backwards compatibility.
Up here you have X and Y at zero px. That is basically not that important because that's the default for everything, so we're gonna show you how to optimize and pull some of this stuff out. The width and height I'll get into in a minute. That's also not as important as you might think it is, and the ViewBox is something that we're definitely going to talk about. So, if we look at this first rect we've got X and Y with the fill that's white and the stroke that's black, so that's how we talk about SVG colors, right, and we're not using backgrounds anymore or borders, we're using fill and stroke.
So, imagine like a piece of graph paper that you're drawing all of these coordinates on. So, if we go to 10 in from X and five down from Y and then the width and height basically just draws the rest of the rects, and it's important to note that as we go in further, rects are also squares but circles are only circles. The other way of writing an oval is elips, so that's the only main difference there that if you extend something like a circle it becomes actually another shape path.
So, for the circle we have CX which is basically the center point on the X axis and then the center point on the Y axis and then the radius and then it draws a perfect circle for you. Now, with elips the only difference is you have RX and RY, so then it's also drawing those radius points. Then we have a polygon for the star, and it basically is just an array of coordinates, right? You can all see that.
And it doesn't have to be perfect. I can move any of those around and make it look completely wonky or anything. It's not very opinionated towards being a very like symmetrical object or anything, and the last two I put in because we've got two lines and they're both the same, even though one of them is diagonal and one of them is straight, and that's gonna become important when we look at path data. So, basically it's just X1 to X2, Y1 to Y2.
So, now you know what all of that stuff means in there. So again, it's kind of like considering the whole ViewBox a graph. So, if you're plotting coordinates on said graph, then you can actually pull the width and height out of an SVG and that's when it becomes powerful for scaling. So, it's really difficult to override our width and height if it's in line in the SVG in CSS. I would suggest pulling the width and height out and designating that in the CSS instead but so, if you look at the ViewBox here, the ViewBox stays the same for the bigger and smaller graphic, and then we just designate the width differently, and all the coordinates map the same as it scales.
The other thing to remember about the ViewBox is that because it's defined, you can actually crop things or leave things out, and that also becomes really important when you start animating because let's say your ViewBox is only as big as, you know, this area that we're seeing here that's not gray, then if something I moving outside of that area, you won't see it anymore. So, that's kind of important to like give yourself a little bit of room when you're animating. So, this is just a tiny little demo to show that I'm cropping this animation with the ViewBox.
I'm basically just using the ViewBox to move those elements out of the way and then it appears like they're moving off canvas.
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