In this tutorial we're going to talk about SVGs, and should I be using them, or should I not? SVG’s a reasonably new file format. It's like a JPEG, or PNG, and it's really good for use online because it's scalable. SVG is a vector graphic, which means it can be scaled up and down without loss of resolution, whereas JPEGs, if you stretch it really big, it gets all kind of pixelated and yucky.

First thing is, is it great? Yes, it is great for things like icons and logos, things that have really simple colors. Let's have a look at Illustrator here. So things that would work really good as a SVG is this logo. This little icon here is the little arrow we've made, these little guys down the bottom here, these social icons, these will work great as SVGs. Things that don't work good as SVGs is anything that has more than a few colors, like this image here, this is what's called a bitmap image, or a rasta image, and it comes traditionally from Photoshop, whereas these guys, you can kind of tell when you zoom in on them, that they're all vector and paths and all this kind of lovely SVG goodness, whereas this is just a bunch of pixels. So these guys still have to be typically a JPEG, and these guys get exported as one or the other, is a PNG, or a SVG.

Now, should I use a SVG? Yes. If you had asked me a year ago, I would have said, maybe, and a year before that, I would have said, no, because of browser support, but what I'd like to do is keep an eye on this site called caniuse.com, and you type in SVG, and it gives you some useful information as in-- At the moment, it has huge browser support, unless you're supporting IE8. Now you might be working for a really big company, and they're supporting really old versions of this browser. It's nearly 10 years old now, IE8, and I don't know many people supporting IE8 unless you're working at IBM, or big kind of companies, they have to deal with really crappy old computers still. So if you're doing your own portfolio, definitely, skip it, go straight to SVG, it's awesome, but if you're working with a company, just double check with the developer, or if you're a little unsure, and you're not too sure about SVG, just stick to PNGs, it's not going to kill your site, but it makes it easier for responsiveness if we're using SVGs.

Just check up here, you can see, globally, it's used 97%, and there's a few people that don't, aren't allowed to use it. And even IE8, there are a few things, tricks you can do to kind of switch off at SVG, and some other things if you're a bit more hard core into your web development.

Anyway, how do you know if other people are using SVG? I showed you these two earlier, they were Shutterstock and iStock, and you can see they both look great, there are logos at least. What happens is, if I zoom in, so I'm just holding 'Command +' on my keyboard, if you're on a PC, it's 'Control +'. Can you see, eventually it starts looking pixelated, that's PNG, and it's fine. It looks good far out here, but if I had to scale it out nice and big, I'll have to make a really big file size in a PNG to get it to look good at this size. 

If I look at iStock, and I zoom in on this, you can see, their logo, the closer I get, the crisper it is. This becomes really useful when you're dealing with, say, retina screens, or really high resolution screens, 4K, 5K screens, because although this looks good here, zoomed out, it might look terrible on a really high resolution, iMac, or on my Retina Mac here, or on an iPhone, or an iPad. So, PDFs, use them, they're fine, they work everywhere, they’re bulletproof. You might be freaking out your developer, sending them a SVG, that's one thing you might do is, if you are dealing with SVGs, you really want to go down that path, because you understand vector, and it's not that hard, you might have to educate the person you're working with, or just ask them at the beginning, "Can I send you SVGs?" And if they freak out, just send them PNGs. If they're not too sure about that, then one little bit more advise, there's a really cool article on css-tricks. Chris-- What's his name? Chris... I forget your name. Your name is Chris Coyier. That's it. css-tricks is a really cool site for anything web, SVG. 

This one here, it's pretty much how I got to this page, css-tricks.com/lodge/svg. This guy's a genius. Really well explained, and there's-- like, I've given you the one video explanation, there’s 32 videos, so this is getting into the nitty gritty of SVG if you want to go that far.

So that's going to be it for SVGs. If you're not too sure, make PNGs and SVGs, and send them both over, it's really easy to do both. If you're doing your own stuff, and you're using Dreamweaver, use SVGs, it's awesome. Browsers keep up with it. And if you're working with old school stuff, with old school CMS’, you might have to just stick to PNGs. But, just ask your web developer what she wants first.