Introduction to SVG

[00:00:00]
>> Shirley Wu: So to start off with, let's talk about how to draw those charts with just SVG elements. So SVG is an XML type language, just like HTML, but instead of drawing kind of, I guess, containers with text, SVG is really great at drawing shapes onto the screen. And so there's a lot of different kinds of SVG elements, but the ones I tend to use the most are rectangles, circles, and text, and paths.

[00:00:32]
And so for rectangles, you are required to give it at least a width or height to draw onto the screen. And if you want to draw it anywhere other than 0, 0 coordinate, you have to give it the x and y of the top left. So that's how you draw a rectangle, x, y, width, height.

[00:00:55]
For circles you want to give it at least a radius and then the x and y coordinates of its center. To draw text, actually, I think you just needed to give it text, but you can give it x, y, some offset and text-anchor, which is the horizontal alignment.

[00:01:20]
So text anchor, think of it as a line, text line, in CSS, except in CSS it's left-center-right and then in SVG, because we just want to make things a slight bit different and difficult it's start, middle, end. [LAUGH] That's how you can think of the text anchor. And then, last but not least, this is my favorite SVG element.

[00:01:46]
These are paths, and with paths, you want to give it a D attribute, which is basically the path command to follow. And you tell it where you want to move to, where you want to draw lines to, curve to, arc to. And we won't really be talking about the specifics of how to draw a path today, just because it can get pretty intimidating-looking actually.

[00:02:16]
But what I do want to show you is that with paths you can draw literally any shape you want, that you imagine. So you can draw curves, you can draw circles, any shape, and so if you ever feel up to it, wait. I just about to show you what you can do with it.

[00:02:43]
So this was one of my projects two years ago and this is how I got really familiarized with SVG paths, you literally can make any of these shapes that you want with SVG paths. It's extremely powerful. So I would highly recommend checking it out sometime, when you have a chance.

[00:03:06]
>> Shirley Wu: And we have to also talk about the SVG Coordinate System. So with the SVG Coordinate System, the 0, 0 starts in the top left corner. And then the x increases as we go towards the right, and the y increases as we go down. And this is really really important to mention, because for example, if we want to be drawing a rectangle in the screen.

[00:03:37]
Like I mentioned earlier, a rectangle you draw by giving it the x, y of the top left and the width and height. So the x, y of the top left, maybe its something like 25, 50, but then the x, y of the bottom is 125, 100. So you'll have to take that into account when you're kind of figuring out your width and height and subtracting the bottom right from the top left.

[00:04:08]
And this will make a bit more sense later when we're talking about figuring out the y coordinate of, say, your bar chart. So I wanted to mention this early on.