Adding Simple SVG Elements Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

16:40:28 Hi! Everybody! Welcome back in this video, we're gonna learn about how you can add some simple Svg elements to your HTML files.
16:40:36 So how do Svg coordinates work? Let me go ahead and make my icon a little smaller, so you can see.
16:40:44 So Svg, elements set their 0 0 their origin in the upper left-hand corner positive X works the way we might expect where it goes to the right following cartoon coordinates, however, we deep from Cartesian coordinates where our positive Y goes down so for instance, 10
16:41:03 comma. 10 might be somewhere over here. 100 comma 100 might be somewhere over here.
16:41:11 So that's how they work. And why is this important?
16:41:13 Because with all of our Svg elements, we often have to set an X and a Y position.
16:41:20 So, for example, to add a circle we have to set a Cx and a Cy element.
16:41:25 What sets the X position and the y-axisition of the center.
16:41:29 You set the radius by setting the R attribute you set the color of the interior of the circle with a fill attribute, and it's C-thru Ness with the fill opacity stroke will set the color of the circles edge line along with stroke width
16:41:45 and stroke. Opacity setting the width and opacity of that edgeline, as well.
16:41:50 So let's go ahead and open up our HTML within visual studio.
16:41:56 And let's go to the correct lecture first. Here we go.
16:42:08 So here's an example where we add a circle.
16:42:11 So we've got our Cx, our C, y, our the stroke, the width of the stroke, and the fill of the circle.
16:42:20 So let's open it up and fire Forfox, and we can play around.
16:42:23 So here is the Red circle, and if I go through and you can see how it changes, where, if I make my Cx equal to 200 and my Cy equal to 200 and my Cy equal to 300, and my Cy equal to 300, we should see it shift to the right and down okay, so
16:42:37 let's go ahead and check that out. So there we go.
16:42:41 Now it's if we go back and set it back to a 100 comma 100.
16:42:47 We can see. It moved back to the left and up.
16:42:52 Another element. You might be interested in is the rectangle or the rectangle. This adds in a rectangle to your Svg.
16:43:02 So here x and y are the 2 positional arguments.
16:43:05 So these set the X position of the left of the rectangle, and Y sets the Y position of the top of the rectangle then we've got our aesthetic arguments like fill fill opacity strokes stroke with and stroko passage the width
16:43:21 of the rectangle shows how far to draw it from the left to the right, and remember, the Y is the top, so the height tells you how far to draw it from the top down.
16:43:32 So here we have our X and ry, these control. How much you round the cornos of the rectangle!
16:43:39 So let's go back to our code and see the rectangle example.
16:43:42 So here we can see our left is set to be at 300 pixels.
16:43:46 Our top is set to be at 200 pixels.
16:43:49 We are going to have a cyan rectangle with a black outline of width.
16:43:54 2, and we're gonna be 50%. See through, then are with the set to be 90, and our height is set to be 150.
16:44:04 So let's go ahead that's what it looks like.
16:44:05 And now we can. I wanna demonstrate how it draws from the top down. So I'm gonna go ahead and change that from 150 to just 50.
16:44:15 Okay. And then if we change it to maybe 200, we can see how it will go from here.
16:44:21 Go downward!
16:44:24 Hey? And now you can also see that it goes off almost off of the Svg.
16:44:29 Because it's a little too long, so if your element is too long, it won't continue to be drawn outside of the Svg.
16:44:35 These elements can only exist within the Svg. So let's go ahead and change this back to 1 50.
16:44:42 And there we go.
16:44:46 The last thing we might want to add is text. So text will just add text directly onto an Svg, so in an HTML, you often will put your text with a P.
16:44:58 Element or a paragraph element on Svg.
16:45:00 Your text is put in with a text element. So we've got our X and our Y, which sets the exposition of the left and the top of the text just like a rectangle.
16:45:09 Our sits the radius, I think I may be copied and pasted. This ignore the R.
16:45:13 Setting, the radius of the circle that shouldn't be there.
16:45:15 Your version of the slides will not have it, Phil sets the fill of the text stroke, sets the text edge line.
16:45:24 So here we can go back, and we see an example where I add some text.
16:45:29 It's just the word text, and it's set to be at 4, 60, 80.
16:45:34 Okay, so here we go. It also has all the common attributes that text would have things like font, size.
16:45:40 Okay, you can also change the we can track this on the fly.
16:45:45 We could change the Font family to be comic sands.
16:45:54 And of course that didn't work. So maybe it doesn't have that.
16:45:59 We could go back and change it and check it again. But for now let's not try and feasty. One thing maybe I will try and demonstrate is there's a difference between the fill and the stroke, so I could set the fill.
16:46:11 To be red, and the stroke to be black.
16:46:20 And if we zoom in you can see how the outline of the text is black, while the interior of it is red.
16:46:27 Okay, so even text has both an outline and an interior.
16:46:33 Okay. So now you know how to add 3 really common Svg shapes elements to.
16:46:40 An Svg. The circle, the rectangle, and the text.
16:46:45 These are going to come up all the time when you make plots with D.
16:46:47 3 dot js, how do you make a scatter chart with a circle?
16:46:51 How do you make bar charts with rectangles?
16:46:53 How do you annotate your text with text? So these are all really important when we go to make our data visualizations with D, 3 Jses, help? All right.