Should I be using SVG export in Illustrator CC 2017 for web design

Okay, in this tutorial we're gonna talk about SVGs  and should I be using them or should I not? Uh, SVGs a reasonably new file format. Okay. It's like a JP or a PNG. Um, and it's really good for use online  because it's scalable. Uh, SVG is a vector graphic, which means it can be scaled up  and down without loss of resolution.

Whereas say JPEGs, you know, if you stretch it really big,  it gets all kind of pixelated and yucky. First thing is, is it's 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. Okay, so things that would work really good  as an SVG is this logo. Okay?

Um, this little icon, here's a little arrow. We've made these little guys down the bottom here,  the social icons. These would work great as SVGs. The things that don't work good as SVGs, is there anything  that has more than a few colors? Okay? So like this image here, okay?

This is what's called a bitmap image or a Rasta image,  and it comes traditionally from Photoshop, okay? Whereas these guys, you can kind  of tell when you zoom in on them that they're all vector  and paths and all this kinda lovely SVG goodness, okay? Whereas this, it's just a bunch of pixels, okay? So these guys still have to be typically a jpeg, okay? And these guys get exported as one or the other as a p  and G or an SVG. Now, should I use an SVG?

Yes. If you'd asked me a year ago, I would've said maybe,  and a year before that, I would've said  no 'cause of browser support. But what I like to do is keep an eye on the site called can  I use.com okay? And you type in SVG  and it gives you some useful information, as in,  at the moment it has huge browser support, okay? Unless you're supporting IE eight. Now you might be working for a really big company  and they supporting really old versions of this browser.

Um, that's from, it's nearly 10 years old now,  KIE eight and I don't know many people supporting eight  unless you're working at like IBM  or big kind of companies that have to deal  with really crappy old, uh, computers still. So if you're doing your own portfolio, definitely skip it,  go straight to SVG, it's awesome. But if you are working with a company,  you just double check with the developer. Or if you're a little unsure  and you're not too sure about SVG, just stick to p and g. It's not gonna kill your site,  but it's, it makes it easier  for responsiveness if we are using SVGs. Okay?

So, um, just check up here. You can see globally it's used 97%. Okay? There's a few people that don't, aren't allowed to use it. And even eight you there are, there are a few things,  tricks you can do to kind of switch out for SVG  and some other things if you're a bit more hardcore into  your web development. But anyway, how do you know if other people are using SVG?

Um, I showed you these two earlier. They were Shutterstock and iStock  and you can see they both look great. Okay? There are logos at least. Um, and what happens is if I zoom in, okay,  so I'm just holding command plus on my keyboard. If you're on a pc,  it's control plus you can see eventually  it starts looking pixelated.

So that's A PMG and it's fine. Okay? It looks good far out here, but if I had to scale it up nice  and big, I'd have to make a really big file size  and a PMG to get it to look good at this size. Okay? And if I look at iStock  and I zoom in on theirs, you can see their logo. The closer I get, the more crisp it is.

And this becomes really useful when you're dealing  with re um, say retina screens  or really high resolution screens, 4K, 5K screens because  although this looks good here, okay, zoomed out,  it might look terrible on a really high resolution, uh, 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 an SVG. That's one thing you might do is if you are dealing  with SVGs and you really want to go down that path  'cause you understand Vector and it's not that hard,  you might have to educate the person  you're working with, okay?

Or just ask them at the beginning, can I send you SVGs? And they, if they freak out, just send them PNGs if they're  not too sure about them and want a little bit more advice. There's a really cool article on uh, CSS tricks. Uh, Chris, what's his name? Chris, I forget your name. Your name is Chris Coya.

That's it. CSS Tricks is a really cool site for anything. Web SVG. Okay. And this one here. That's pretty much how I got to speed CSS tricks.com Lodge.

SVG. This guy's a genius, okay. Really well explained. And there's like, I've given you the one video explanation. There's 32 videos here,  so this is getting into the nitty gritty  of SVG if you want to go that far. Alright?

So that's gonna be it for SVGs. If you are not too sure, uh, make pgs  and SVGs and send them both over. It's really easy to do both. Um, if you are doing your own stuff  and using Dreamweaver, use SVGs. It's awesome. And browsers, keep up with it.

And if you're working with old school stuff,  with old school CMSs, you might have to just stick to PNGs,  but just ask your web developer what she wants first.