SVG vs. JPG vs. PNG
Hey there, this video is going to be talking about the differences between jpeg PNG s and S V G s will even mention gifts at the end if you know all of that, you can skip on, we're not going to actually do anything in this class. A lot of me talking and explaining, but if you've maybe never heard of an svg scalable vector graphics hang out because this one is awesome. I'll show you an example. See blurry PNG, really nice SVg and scales forever. Watch, keep scaling in, look how good he is. Alright, let's jump in and figure all this out. All right, let's talk about the main image types. Okay, so jpeg PNG and Svg. So jpeg and PNG have been around for awhile, jay pig is probably the most common. So jPG, jpeg, whatever you want to call it. It is amazing for images like this hiding photographs do really well as J pigs. Why? Because the file size is very small in relation to the quality that you can get from it. Okay, so you can get something that looks really good loads of colors. Okay, ther...
e's millions of colors in the J Peg but the file size in comparison is very, very small. So we use that. Where did jpeg stop? And you're like, okay, well we'll just use jpeg for everything. The big trouble with J pigs is that there's no transparency, you can't see through a JP, there's no way of having a hole in it to show things through and that's where PNG starts. Okay, now we'll look at our logo that we did. Okay, so this logo here, you see our raw raw bikes, it's actually an image. Okay, can you kind of see when I drag it around it actually is see through, so I can change the color behind it and the color changes there. If this is a Jpeg, pick a color for the background and that would be it forever. So PNG is awesome. They have loads of colors as well. You can use millions of colors and a PNG but it also has transparency and you might be saying, why don't we just use those? Because the file sizes are huge for PNG in comparison to a jpeg. So you've got to do a trade off. Do I need transparency? Cool. If you do then you have to leave behind if you don't like this image here, definitely a Jpeg because there's no transparency. So I might as well have all the goodness of the colors with the low file size. Now, the third option, the SVG is quite new. So if you haven't heard of this, it's a scalable vector graphic. Okay, And victor is the cool bit. So if you know about vector graphics, you're going to go really, you can do victor online. It's like you totally can. If you've never heard of vector before, you might search the term, it's victor. Okay, V E c T o R because we won't cover it too much in here, but the benefit of it. Okay, As long as it's a really simple shape, like an icon or logo, SVG would be terrible for this even if you wanted transparency, it would be terrible because there's just so much detail. But for simple shapes, SVG are brilliant. So logos here, we're going to switch this out for an SVG and look at the perks. So let's switch it out first and see the difference and then we'll explain the perks for an SVG. So in your graphics, Okay, sorry, in your graphics in your exercise files, so if you go to exercise files, project two, there was a lion PNG that we used earlier on. We're going to use this one called SVG copy it, go to your desktop, put it in your project to folder in your images and paste it in now in your code. Okay. Go to visual studio code here under your image tag in your logo. Div Okay, switch out PNG for SVG. Okay, let's have a little look at the difference. So this is the original one and get ready. Look at the second one ready, crisping clear. Okay, so if you're working you're obviously watching this video and sometimes the quote depending on your internet. Um sometimes people write comments on the bottom like it looks the same. Um you might be looking at a really low resolution of the video. Often if you check in the bottom right of your video you can like raise or lower the quality of the video that you're watching Okay. Just so that you can see these details but let's make it a bit more obvious so I can zoom in. So if I zoom in on this one, I'm holding command plus heading out a couple of times. That's on a Mac control plus on a pc just zooming into my website so that you can kind of see the real big difference. Okay, so PNG uses pixels to make its graphic and while it was really small it was fine. Okay, had a slightly blurry edge but victor. Okay, this SVG it scales to infinity. Okay, you can scale it as big as you like and the cool thing about it is that it will always be crisp and clear on the outside and still have a very small file size. You could get a PNG looking really good at this size. Okay. You can make it bigger and make it great but the file size is going to get really, really big so you'll find lots of websites now using SVG. S browser compatibility is really good now so if it's an icon or a logo using SVG, that's a good kind of blanket rule if it's a an image. Okay, I'll show you a good example. So this one here. Okay, this is a graphic I made for a later part of the class and let's say I wanted to look exactly like this. Okay, my giant weird meat yogurt that I made for you guys, but it's got a background color. This would work best as a Jpeg will do, I'll show you how to export all these in a second, but let's understand them first. So this would be great as a Jpeg because it's got lots of colors in here and you know, it's reasonably photographic and the file size will be nice and small. But let's say I needed to have empty background, this little checkerboard things, computers way of saying that there's nothing behind it. Okay, so this would have to be a PNG. Okay, why wouldn't it be an SVG? And SVG needs that really simple details. If this was an SVG, it just file size would be huge and it would look terrible and it just wouldn't work. I can't make this an SVG and SVG perfect for this type of thing. When there is like a really simple lines, it's anything done in illustrator can be exported as an SVG because that's really basic basic shapes, simple colors, easy Jpeg for images. PNG images that need transparency and anything that is really simple lines like icons and small little graphics arrows, that sort of thing would be perfect for an SVG. Like here's I mentioned gifts, gifts. The only reason you use gifts these days, if you need to animate them. Okay, gifts have a real big drawback as in the, they only have 256 colors, which is a pain. Okay, So you only can do small things and the colors can't be too broad and just there's no reason to use it unless you want to animate it. And even then animating gIFs, a really niche kind of use case you can animate in CSS and lots of other, better ways. So I'm not going to cover gifts here. I do cover a lot more in my other safe Photoshop and illustrator classes. We make all sorts of animated gIFs there, but we're not going to use a kind of traditional web design now. Alright, what I'll do is now you understand this stuff, I might actually shift the next part of this video to another video so that you can just watch that nice and by itself. So later on you can come back and just show you how to kind of export these S V G S P N G s and J pigs easily. Yeah. So let's do that in the next video