A beginners guide to SVG | Part One: The Why, What, and How

SPG's has been around for a long time now and you can do some really awesome things with them so let's go see how we can actually use them hi there my name is Kevin and here at my channel we learned how to make the web and how to make it look good while we're at it this video is the start of a miniseries taking a look at SVG's and the series really is for complete noobs and I feel well qualified to help you out if you are a complete noob for SVG because I am too I've long wanted to figure out SVG's I even bought a book on SVG's to try and really understand them well and for the longest time I didn't understand them at all and I just used them in the most basic simple way possible without actually leveraging the advantages that SVG's give you and I wanted that to change and I figured since I'm learning all this now and I'm finally understanding it then it'd be a good opportunity to share this knowledge with you this video itself is just about what SVG's are and why you should be using them as well as a really basic look at a couple of different ways that you can input an SVG into one of your websites after that we're gonna look at how you can actually code up your own SVG's you're writing it out yourself for simple ones we'll take a look at how you can create more complicated ones or you use more complicated SPG's and then we'll also look at how we make a nice icon system that uses some CSS variables to do some really cool stuff and lastly we're gonna be taking a look at how we can add some animations to our SVG's and do some little cool fun trickery and stuff like that because that's one of the really cool things about SVG as far as I'm concerned now as I mentioned I didn't really understand SPG's for a long time and honestly they sort of scared me they look really complicated but they're not as bad as they seem but then it's also they look complicated when you look at it and then there's all these different ways of using it should I just link to it should it be in line if it is in line which way should I be using it in line so this video itself is going to be looking at that with the different ways we can use it and some of the advantages and disadvantages of each so first off why should we even bother with SVG well it's a good question and to understand it we should know what SVG is so SVG stands for scalable the vector graphic I find the name kind of funny just because the word scalable is in there a vector graphic is something that's made math and it's inherently scalable so it's the fact that scalable Xin there is kind of weird but that's okay so if I take a normal image like a JPEG or a PNG and I make it bigger than a hundred percent it will lose quality and that's because these are raster images which basically means they're made up of pixels and they're limited by that pixel information so here I am in Photoshop which is a raster image software and normally it's for photo editing and stuff and I have a nice crisp looking smiley face here all the lines look really nice they look nice and smooth but if I come and I zoom in on this it starts getting blurry and you start seeing the edges of everything and all all these little squares these are all the pixels so every pixel has a bit of information in it this pixel is white this pixel is a light gray a darker gray darker gray eventually getting to black and then we can see here on the yellow too so I'm at 20 or mm you know let's see how far we can zoom in on this I'm going it up to 12 almost 13 thousand percent zoom and we can really see these nice big pixels here with all the information and then this all when i zoom out it starts getting crisper and crisper until I get to the hundred percent or if I go smaller in general it won't cause any issue now this does depend also on the resolution of the images a lot of things that you'll download on the Internet have a resolution of 72 dpi such as this one which means there's 72 dots per inch or pixels per inch and if you go into the print world they get up to 300 so there's a lot more pixels so there's more pixels packed into a the same amount of space there's more information you can do a little bit more with those types of images and that just means if I take this smiley face and I make him bigger I lose quality on it so you can see here I've made it a lot bigger and now it's making my image look blurry even though I'm still zoomed out every zoom into a hundred percent and a hundred percent it's getting all blurry because I've made the image bigger those pixels there was no information in between those pixels I'm inventing new stuff and I'm trying to invent new information there was no in Photoshop sits best but at the end of the day it just makes things start getting blurry vectors on the other hand are made up of math which is can be scary but let's go and see what that's about so here we are in Illustrator and just to show you a quick example of vector graphics in work so this is the vector we're going to be using for my little demo today and to show you the difference we just saw Photoshop before and now in Illustrator and if i zoom out obviously it will stay nice and clear but if i zoom in if you look at these lines they're staying perfectly perfectly sharp I can zoom in zoom in zoom in I'm at 12,000 percent here I can keep going keep going 64,000 % zoomed in of the original and it's still a nice clean perfect line there's no little pixel weirdness going on so they're completely made up of math if I look at them so as you can see here they're made up this is made up of what we call anchor points so we can see that there's these lines on here so the anchor points are these points here these ones right there and these points get handles off of them which are these funny and sort of things that are sticking off which control how the line is getting from how the the line is entering this Anchor Point and then how the line is exiting that Anchor Point so if I move these it's controlling the shape of my line and the shape of my face so you can literally go some you know make some interesting shapes normally the anchors are sort of linked together but we can also break the anchors and get hard corners or we can have the anchors do different things in different directions and stuff like that now the most well known vector software is Adobe Illustrator which is what I'm using right here but there are free ones like Inkscape which I have put a link down to in the description below so one of the advantages with SVG's is that they're scalable you can make them as big or small as you want as we just saw and that can be really nice for some sort of icon system if you need your icons smaller medium big different things in different situations but another nice thing with them is because they're made of math they're just code their file sizes are minuscule and you can actually just put it directly in your code as well you can put an SVG in with your markup so that also means in the super lightweight but it also won't make an HTTP request which is always good so just a really quick there's overviews the reasons you might want to be using them but let's go and see how we can actually do it now alright so here we are I'm using vs code as my code editor and I have Firefox open over here so we can embed an SVG just like an image so the same way you'd link to an image you literally just use an image tag and here we do I have it as example dot SVG we might as well give this a little and an SVG I'll save that and we should see a smiley face show up so there we go now I'm just so we can come and look here we can see that this is the SVG itself it's just a whole bunch of stuff I have some circles a path I'm not going to worry too much about all of this right now there's a whole bunch of stuff in here though we're gonna sort of focus more on that in the next video so it's just linking there and you'll notice that it's pretty big and the reason it's pretty big is it's going to be responsive and it's gonna grow and shrink with my screen which you probably don't want so what we normally can do is you have two choices you can come on to here and assign it a width just like you would an image so with 50 and you can also give them Heights and you can see that's a shrunk it down it nice and small and I could go to 500 and it's gonna be bigger and I grew up to 5,000 and it's gonna be absolutely massive there we go is my gigantic smiley face normally I don't like doing it that way though I usually come up into my actual style so in here let's just give us a class example and then we can come on to my Styles which normally be an external file but just for demo purposes it's a bit easier to do it here and I give this a width of say 100 pixels and save that and there we go there is my SV geographic now this is one way to do it this is the easy way this is the way that I often usually would do it but we can also put an SVG inline instead of having it linked like an image now inline has some advantages as it gives us a bit more control over things it also is a less it's not making HTTP requests it's going to be inline in your code the only problem is it can add some bulk to your code so I'm going to leave this guy right here and just because I'm gonna comment it out though I want to use that as an example in a second but as I said we can take this so I can literally just go to here and copy it and any text editor should be able to open an SVG file like this so you can see it and then I can literally just paste it in and hit save and you can see it's right there and it's working and and the reason that it's that size is because this still has the class of example on it so once again just to show you that it's working I can still control how big he is right here now I mentioned I'm going to turn the second face back on so we have our two faces um so I mentioned that there is an advantage with this one giving us more control compared to this one so here I have my example and he looks like that and while they look the same but one cool thing with SVG is it's just made up of code which means we can control it I'm gonna be looking more what all these things mean but we can see here I have my two eyes so if i select the class of eye i can change what it looks like so right now the background on these is black but what if i wanted to fill and change that to white and i can make the eyes white but notice how it's only working on this one and it's not changing on this one here and you know I could come and even change the color of the face fill purple and the face will change but once again it's only changing on this one it's not changing on this one because this one is linking off to an external file whereas this one is embedded in my code and I can control it directly so this gives us a lot more control and different things that we can do on it so I think that's all really neat and cool the only problem with this is if you have a complicated SVG it can take up lots of line of code and you might not want to crowd up your markup luckily we can sort of do something similar and I'm gonna use my example too which is almost the same except am using a symbol in here but I'm gonna copy this and let's add this down at the bottom here it's exactly the same thing I've just wrapped it all in a symbol and you'll notice it's not appear on my screen anywhere so it's in here let's comment these two out for the moment so it's if we look here it's not showing up on my screen anywhere but I can come into here and once again I need an SVG so I can write SVG like that and then in here it's called use so we want to use an SVG pretty much we just have to tell it what we want to use and we give it an href now this href is going to look for an ID which is the reason I have an ID on my symbol here so href and example save that and my smiley face appears now the cool thing with this is it's still in line and generally what you do is you'd have this saved down at the bottom somewhere so it would be all the way out of the way of your code it's all the way at the bottom you could have been a whole bunch of SVG's in there so that means I still get the control that I want it so face could be fill red so I still get the control that I had before but I only I'm using a little bit of code here and you could even you know throw it on one line if you really want it to now the one thing is if you are going this wrote H there the old way of doing it was x-linked href like this so if I save that it's still gonna work this was the old way of doing it with SVG one SPG's reached level 2 so it's SVG 2 right now and this has been depreciated and all the browser's support X link or without the X link everything supports it with just an href like this except for Safari Safari still needs the X link hopefully that changes in the future because X link has been depreciated so hopefully we get rid of it and we fall back one thing you can do if you want to just make sure for browser compatibility reasons is you could just put it twice which is kind of annoying that it won't hurt it will still work and you won't have any issues if you want to use it like this now I'm gonna be going into a lot more detail so the next video as I mentioned is going to be looking at sort of this whole fill thing and how we can make our own SVG's in the browser writing the code ourselves and then the video after that's going to explore this a little bit more because and this can be really useful for coming up with nice icon systems and doing stuff like that so that can be really useful we'd be looking at that in another future video and there we have it the very basics of SVG's turns out they're not that scary after all and in the next video we're gonna see how we can actually code them up ourselves if you have any questions comments anything like that please leave one down below if you're too shy to leave a comment at least hit that thumbs up and let me know you liked the video a big thank you to my patrons who helped make these videos possible and my patrons are actually the ones who voted for the SVG series to be the one that went into action next so one of the perks of being a patreon is you can help decide the direction that the channel is going so if you're curious about that you can go and check out my patreon it's a link down below and of course until next time don't forget to make your corner me Internet just a little bit more awesome

Channel: Kevin Powell

Views: 230,964

Keywords: Kevin Powell, tutorial, html, css, svg, svg beginner, svg beginner tutorial, why svg, how to use svg, what is an svg, scalable vector graphic, xlink:href

Id: ZJSCl6XEdP8

Length: 14min 21sec (861 seconds)

Published: Wed Jun 20 2018