SVG Viewport & Coordinates

[00:00:00]
>> So yeah, let's get started with SVG. The very first thing I wanna talk about SVG is its viewport and coordinate system. Just because with the viewpoint it's a little bit different from how we might think about HTML and divs and paragraphs. So the way that I like to think about SVG is as a window into this world.

[00:00:20]
[LAUGH] Okay so I'm a little bit embarrassed about this picture I drew, but I'm also really happy with that little bird I drew. So anyways, I kept it. But I like to think SVG as kind of a window into this world of shapes. And they exist beyond the boundaries of this window but, our SVG element is this window.

[00:00:46]
And to be able to see kind of into this world, we need to be able to specify the width and height of the window. And this is how we do it, we say SVG, and we set the width and we set the height, and this is where we put in our SVG shapes.

[00:01:07]
And then within this SVG world, the x increases going to the right, and the y increases going down. So the (0,0) starts at wherever we've specified the window to be and then yeah, it goes across and down. And that's something to keep in mind I think this is pretty common in graphics programming, but anyone that hasn't really done that, It's a little bit of a mental shift to work with the y increasing down.

[00:01:45]
So it's just something that we should always keep in mind cuz that's potentially where bugs could show up. And if you're interested in a really deep dive of the SVG coordinate system, I really highly recommend this blog post, blog series from sara Soueidan. It's extremely comprehensive, goes into a lot of really great detail about how this SVG viewport works.

[00:02:13]
There's a lot of functionality there, that we're not going to touch today. But that's just because in my experience a lot of times, in general with data visualization, I found that using width and height attributes are more than enough for the projects I have. So, I wanted to kind of go through some of the SVG elements I use very often.

[00:02:43]
This is definitely not a comprehensive list, it's just the ones that I tend to prefer. And I have this list of, if you want to see all of the SVG shapes available to you, Mozilla has a basic shapes article that you can check out. But the ones I like to use often is, rectangle, circle, path, and text.

[00:03:09]
And so for each of these, there are some attributes that we always need to set or else we're not going to be able to see it rendering on the screen, and these are usually the dimension, attributes. So for rectangle, we always have to set our width and height, to be able to see it rendering for the circle, we always have to set the radius, for the path, we always have to set this D attribute, which is a think short for define.

[00:03:40]
And this is kind of the string where we tell SVG, the kind of path that we want to draw. And then the optional attributes are usually kind of the positioning attributes and if we don't provide these. Actually for all of these I think if we don't provide these, it defaults to (0,0), and that's also a good thing to keep in mind.

[00:04:02]
But the optional attributes if we want to move them around or anything is the x, y positions and for the text, we also have text-anchor. And that I like to think of it as like in CSS we have text align, and that's doing pretty much the same thing.

[00:04:26]
So text-anchor, instead of you saying text on lines left, center, or right, you have text-anchor, start, middle, and end. [LAUGH] So, that's a slight syntax difference.