Join Justin Seeley for an in-depth discussion in this video What is SVG and why should you use it?, part of Illustrator CC for Web Design: SVG.
- If you're new to web design or just new to SVG in general, you might be wondering exactly what SVG is. Well, in this movie, we're going to talk a little bit about the SVG file format. So, what exactly is SVG? Well, it's a file format, much the same as JPEG or PNG, but SVG stands for Scalable Vector Graphic. I know that sounds simple but this tells you everything, really, that you need to know about this file format. It's scalable, it's made of vectors, and it is a graphic. So that really appeals to me, especially when we think about the need for images to scale across responsive design workflows.
This is also an image file format that is created and maintained by the W3C or the World Wide Web Consortium. You may be familiar with these folks because they're the governing body of web standards. That's right. These are the people that decide whether or not your code is in compliance with what should be going on in the web design world. It's a pretty cool thing that they are actually the ones that maintain this image file format as well, which gives me the confidence to know that as long as I stay up-to-date with their guidelines, I'm always going to have compliance in my SVG.
Illustrator is actually making a huge push into SVG as well. With the CC 2015 release, they have actually revamped the entire SVG options, making it super simple for you to create code-compliant SVGs out of almost anything you can imagine inside of Illustrator. Now, what would make someone choose the SVG file format over something like a PNG or a JPEG, for instance? Well, there's actually several reasons why you would want to do this. The first one is probably obvious.
SVGs are completely resolution independent. After all, they're vector. Just like the artwork you create in Illustrator, they can be scaled infinitely without penalty because they're made up of mathematical formulas. So they almost like recalculate themselves as they're scaling up or down. It's really cool how these things work. And that means that it's also going to be able to go across any device with any resolution at any screen size and always look crisp and clean. The file format is very lightweight as well. That means it's not going to take up a whole lot of space.
In some cases, you can get SVG files down to just a few kilobytes. Later on this course, I'm going to give you some tips that are going to help you streamline your SVG files so that they take up as small amount of space as possible. Also, these things are built with XML, which means that they are completely customizable by developers. That's right. If you can actually read and write XML, it's very easy to dive into an SVG and make it do all kinds of things. So, this should be a very appealing file format for anybody who has those types of coding chops.
Alright, let's recap the advantages of SVG here. Number one, it's a great fit for responsive design. Why? Because it scales across any device at any resolution. Two, it's easily exported from Illustrator CC 2015 using the new export options dialog box. Number three, it's easily customized by a developer or anyone really who knows XML. And finally, it takes up a small amount of space on your web server, which makes it really appealing over something like a JPEG or a PNG, which can really bulk up in file size if you don't know what you're doing.
So, hopefully this gives you a better understanding of what the SVG file format is, why you might want to use it, and some of the advantages for other parts of your workflow as well.