How to create SVG shapes [ A beginners guide to SVG part 2 ]

in this video we're gonna be looking at how you can code up your own SVG's hi my name is Kevin and here at my channel we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials today's video is all about SVG's and how to code up your own SVG's this video is the second part of a series where we're looking at the complete basics of SPG's it's really for noobs just like me SVG's used to really scare me I didn't really understand how they worked and now that I am understanding them I want to share that with you if you missed the first video of this series I encourage you to go and check it out it's why we want to use SVG's and the link for that is in the description below for now we're gonna be looking at how we can code them up ourselves coding up SPG's is what made them not scary to me anymore understanding how to actually type it in what every little piece was doing it made me realize they're not as complicated and as scary as I originally had thought they were it really does go a long way into helping you understand SVG's and what's going on behind the scenes and also what a lot of the possibilities of SPG's really are so with all out of the way let's go and jump into vs code and check them out so here I have a nice blank page then first thing we're going to do is put in the very basic code that we need which is just SVG and close SVG and everything we're going to do is going to come inside of this when we put in the SVG tag like this it's a little bit like using the style tags up in the head of our document when we add a style tag we're telling the browser that everything inside of here is the enemy CSS with an SVG tag we're telling the code inside of here is XML so it works a little bit differently this is one of the things that scared me the most when I first started looking at it but for the most part it's actually pretty straightforward so to see how straightforward it actually is let's start by making a circle now the first thing I'm going to do is I'm going to come on here and I'm actually gonna give this a width and a height and you'll notice I'm not putting units if you want to put units you can but if you don't put units it just assumes that they're pixels you'll also might be aware of the viewport that we're gonna be looking at that in another video though so for now we're just going to stick with width and height so to make a circle inside of here what I'm going to add is a circle tag or a circle like this now you have two choices when you're putting in things here you'll notice it's open circle and closed circle you do need the closing circle but there's never anything that's actually in here everything just becomes attributes on the opening tag so if you'd prefer and how I prefer to do it is to have it as self closing either way is completely valid and will work just as well this just saves you having to have the closing tag on the outside which is sort of not doing anything now if you know with html5 you didn't need if it's a self closing tag you don't need to close it like this that's not the same as this because we're not writing HTML here we're writing XML and we need to write the closing tag for something that's self closing here now if I save that and look there's actually nothing on my page at all so we need a little bit more here on my circle so the first thing we do is put in R and R on a circle will reference the radius so I'm just gonna do 125 and I'm gonna hit save and look at that we sort of have a circle coming in there it's not exactly what we want but you can see there is a circle sort of showing up so what we can do now is also add a CX and a CY so this is to tell it where the center is on the x-axis and this is a word that the center would be on the y-axis so right now the my SVG itself is 250 and 250 and height so if I want the Center behalf of that so we'll do that 125 and 125 and I'm gonna hit save and you can see now I actually see my whole SVG it's not being clipped off now this CX and CY are just properties used for circles and as well as ellipses and radial gradients so you might see a pop up a few other times depending on what you're doing so that's the C X and the CY here now you notice when I first did it it was clipped and just to give you a bit better of an idea of what's actually happening here let's move this here we have the center on my x-axis so if I change where the center is on there let's just make it 225 so it's moving it further along and you know that the width and the height of this so I have a 250 by 250 here so it's sort of a box here and I can move my circle around there and if the circles outside of that it does not overflow out it's just gonna clip it like that and we lose a little part of it let's save that and put it back right where we can see it now there's a whole bunch of stuff we can do on here and actually I'm gonna change my windows here a little bit to make them a lot bigger there we go just because we're gonna have a lot of code sort of on this here and so the next thing I'm going to look at is that we in Jinja the color of the background now it's not background that wouldn't work in this case we wanted to do something called fill and fill is pretty much just like background and if you're coming from a vector software you'd probably know Phil so Phil just to take a look we can change that to red and my circle will change to red like that or if I put in a hex code SAVE you can see that it changes color now just like I have a fill I also have a stroke so I can write a stroke and Stroke is basically a border so stroke and let's say this one is going to be black and you can see that now I have a border on that that black and we can also change the size of it which is gonna be stroke width and let's make this 10 pixels so it's fairly big but you'll notice there's a bit of an issue and that's that my stroke is disappearing a little bit and what's happening is the stroke is half on the inside and half on the outside so I have five pixels on the inside and five pixels on the outside there so the problem is now that my radius is too big because of my stroke that's on there so let's come and change the radius here to 120 and hit save and now we get the entire stroke on there and we can see the whole thing now what we can also do is we can come and change things up around here a little bit so let's just change this to red for fun and on the fill if you don't want to fill you can turn it off by putting none so but none it just completely disappears now if you don't include the fill it's going to default to black so if you want no fill on it you really have to make sure that fill is set to none and then I only have a stroke now we only have one shape in our SVG but we can have a lot of shapes in here so let's come and add in a new circle so I'm gonna come up to here and do another circle with a self-closing tag on it and in this case I'm gonna give it a smaller radius so this number will be smaller or go 70 and I'm gonna give it a CX 125 and a Cy of 125 before I hit save just think for a second why am i giving these the same CX and CY is here even if it has a smaller radius and it's because if you remember the CX is the center and the X and the CI Y is the center on the y axis so I still want these to be centered directly in the middle it's just gonna be a smaller circle so I've hit save I get a black circle right in the middle of my other one and we can come and give it the same thing so fill equals none stroke equals red and stroke width is equal to I think I did 10 yeah I put 10 pixels on here again you don't need pixels units and here I didn't sell stroke rate not sure what happened there there we go and you can see that I get a second circle inside and we can repeat that Matt a third circle and a fourth circle and do as much in there as we want but let's go and look at how we can create another shape instead of having more of the same so the next shape that I'm going to look at is a rectangle so for a rectangle it's just wrecked you're not writing the full rectangle word out which is good because I'd probably spell it wrong but just wreck like that is nice and easy so once again I'm gonna do a self closing tag on that but if you came and did it like this that's completely fine too and in fact this is how it will be rendered in the browser even if you do that if you go and look in the Dom with you inspect element you're gonna see it with its own closing tag on there so now here we have a radius but rectangles don't have radiuses and we have a CX and CY and we don't get any of these three in a rectangle the radius makes sense and the other one it's because instead of the center we're defining where the top left is so just to take a look at this I'm going to X is equal to 0 and Y is equal to 0 so you can see it's not a CX and a CY it's just an X and a Y so this is the top left of my rectangle so um I'm also gonna give this a height and we'll just go with a hundred pixels for now and a width of 100 pixels for now and hit saved so we can see our rectangle in there so just to show you how we can play around a little bit with it if I do 25 here and 25 here it should move across by 25 pixels and down by 25 pixels and there we go it moved it around a little bit let's make it a bit bigger than that actually and there we go now this is perfectly centered but you sort of have to do some math on that to actually get that to happen so I have a height and width of 200 so and I have a total of 250 here so I'm going to 25 because I'm starting 25 pixels across so 25 plus 200 is 225 plus another 25 is 250 so that means this is perfectly centered right in the middle and if I do want this to be in the back I can put it as the first thing and then it will go behind the other things there so remember it's not background it's not color it's filled so my field can be equal to let's say light blue and we get that inside of there on behind my circles there so things like stroke and stroke width are also going to work on my rectangle and one other thing that we can do that's a bit unique to rectangles is we can give them rounded corners so I'm gonna do it right in the front here just so you can see it a little bit easier and we don't get side scrolling so to do that it's our X which is radius X of let's go with I don't know 25 again and our y is equal to 25 so if I save that we get round corners on there and the bigger the number the bigger the radius now actually let's just go and move this to the front so you can see it a little better and let's go a steel blue just there we go just so you we can see a bit more tapping with my corners here so you can see that they're rounded now and with this it's my x-axis and my y-axis now the way this works is a little bit strange it's a bit like when you give a rounded corner with CSS in the sense that where does it start rounding on this way and then where does it start rounding here so I'm gonna make the ry here a lot bigger so we can visualize it a little bit so you can see on the Y the up and down XS they're much more round now so it's going a hundred pixels up so if we start from the top it's gonna take a hundred pixels before it stops curving so from here it's a hundred pixels up and we start getting this nice low curve here and then we get the little 25 here on this side and if I switch this to zero though this is where you get a little bit of an unexpected behavior because if I save that they go back to being perfectly square and that's because on the x axis the curve is zero so if this isn't curving at all we can't curve this other one either it as long as I have something on that it's you know this is going from a hundred pixels to here how far in should it go on the x axis and how far in should it go from the y axis now the other thing here is if I do 100 100 it's going to give me a perfect circle and that's because my height is 200 pixels so it's going and this is sort of like doing a border radius of 50% on a circle or on a rectangle or square this is weird like doing a border radius of 50% on something with CSS because the curved edges starting at 50% of the way in you know it's starting here and it's starting it there so it makes it a perfectly round corner so let's make this a little bit smaller again and hit save and actually I want make it a lot smaller than that let's just go with 15 so we can still okay so we'll leave it like that for now now the next thing we're gonna look at is a line and so if I come on here you guess it probably blind just like that now lines are literally just straight lines and that take they need to have a starting point and an ending point so they use an X 1 so we give it an x1 let's say it's at 10:00 and we'll give it a y1 and we'll start that at 1:25 which is right in the middle of my SVG so again we're going in the x-axis and then the y-axis I'm going 10 pixels this way and then I'm going 125 pixels down and that's where my line is going to start and then I want to tell it where my line is going to end so then I can do a x2 is equal to let's say 225 and a y2 is equal to 225 if I hit save on that and then we don't see anything yet that's because we also need to give it a stroke so I'm going to give it a stroke of green and we also need to give it a stroke width and we'll make this one like 25 so it makes it really easy juicy and again spell things properly when you're doing it there we go so I get a nice big stroke line going there there's my line so my line is starting there and ending there now you might be wondering if you can do a line that sort of goes to here and then moves and goes somewhere else that would be a path and at the moment we're not gonna look at paths in this video because they do get kind of complicated and how they work a line is just a starting point and ending point and that is it for this video we're not gonna be looking at paths like I mentioned but we are gonna look at polygons so a polygon is a pretty versatile so once again just like that now the what a polygon is is it pretty much means you can draw any shape you want so I'm gonna give this one a fill right away let's give it a fill of pink and what you do with a polygon is you give it points now with the points it works a little bit like having a line except you're in your drawing a shape instead of drawing a line and actually for this I'm gonna turn off my line so we can really see what's going on and I'll try and draw something interesting in here so my points and it's not point it's points plural so first I want to give it my first point so my first point let's go with fifty down and fifty across so my first point they're gonna be comma separated so fifty and fifty there's the X and y-axis and then I put a space and I can do my second point so I'm at fifty fifty which should be somewhere around here and now I want to go all the way across so on my y-axis I want to stay the same but on my x-axis I want to go across so I'm gonna do 200 to go across but I'm gonna keep at fifteen and I'm gonna hit save but we're not actually gonna see it change because I don't have a I need a third point before my polygon starts taking shape unlike a line which is always just along two points a polygon needs at least three points to start getting something so for this one we'll do 200 200 so I'm already at 250 and then we're gonna go all the way down it save and now you can start seeing it come together now it's automatically closing this off on me here but I can come and add another point on here so let's do 50 comma 200 and there we go I made a square now that's kind of boring that I made a square though right so in between these two points let's add another one of like 125 comma 125 which should be directly in the middle and I'll hit save and now we have a bit more of an interesting shape there and even here we have my first point my second point could be in the same place 125 comma 125 I'll hit save and I can do that and I can technically come and add as many points into this as I want and end up drawing sort of any type of shape I want as long as that shape is made up of straight lines I can't use curves and things like that on a polygon to do that it's where you're going to be using a path and paths are out of the scope of what I'm covering right now and for the more complicated things in general I'd be using software and to generate my SVG and you know I'd actually draw it in with a pen tool instead of writing it all out and that's it for this video thank you so much for watching now there's a lot more to SVG's than what we just looked at there's paths there's groups there's a viewport and a bunch of other stuff and the viewport is a really important one so that will be what we're covering in the next video but until then I just want to give a big thank you to my patrons the this video topic is was voted on by them and it's been clearly a really popular topic idea based on the comments and the responses to the first video in the series so thank you so much guys also just if you have any comments or questions about whatever I did in this video or just other ideas or whatever it is you want to ask about please leave a comment down below and until next time don't forget to make your corner in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 72,753

Rating: 4.960494 out of 5

Keywords: Kevin Powell, tutorial, html, css, svg, svg tutorial, svg newbs, how to use svg, how to code svg, svg circle, svg rect, svg rectangle, svg line, svg polygon, understanding svg, how to code svgs, svg fill, svg stroke, svg stroke-width

Id: 9Y4P3FvZ5bg

Length: 18min 0sec (1080 seconds)

Published: Wed Jun 27 2018