Learn how to design better web visuals using the SVG file format and Illustrator CC.
- View Offline
- [Voiceover] Hello and welcome to a Web Design Tip, my name is Brian Wood. We're going to take a look at designing for SVG, and just a few things that you need to keep in mind. The first thing we'll discuss is artboards. In Illustrator, what you want to do is, you want to have the artwork that's going to become an SVG file on its own artboard. You also want the artboard to be snug up as far, or as close as you can, I guess you could say, to the artwork itself, without big gaps around it. That means that later on it will not scale weird and look weird in the browser.
The other thing too is, if you're going to create a series of icons or a bunch of artwork, a couple things you can do. If you select let's say, part of the artwork here and I want to save that out as SVG, Illustrator has a command. File, Export Selection, you can save just that object out even if it's got things layered behind. I would suggest putting icons and different things on their own artboard if you can do it and fitting the artboards as close to the artwork as you can get it. Be careful about fonts inside of SVG when you're designing.
If I happen to select text and use something like a Typekit font, or a font that I have on my machine, the people that look at this SVG file will need that font, and you're not going to do that in Illustrator. If we save this out, it's going to say, "Cool, we're good." You're going to have to go in the code necessarily later on to fix it. You could if you want to, go up to Type, and choose Create Outlines. You've got to be careful with that. It can add a lot of file size, but the text will still look like text, and you don't require a font but it will no longer be editable, it won't be searchable, there's certain things that come with this.
If you export in Illustrator, that's the way we're going to do it these days in Illustrator CC 2015, and I go out to my Desktop and save this out for instance. We want to make sure that we use the different artboards and set what we want to set here, but if I export, you can see right here that under Font, you can Convert to Outlines in the Export dialog box as well, which can be very useful. If you're going to use gradients, you can do it, just be very careful about how many colors and stops you use within the gradient, that can add to file size.
Sometimes I'll find myself going out in the code afterwards, after I get out of Illustrator and editing or applying a gradient, but you can do it in Illustrator, just be careful in test. If you use blend modes, opacity masks, opacities, all these different types of things, they will most likely be rasterized so you've got to be careful and you've got to test. In SVG, when you take Illustrator content or other content and save it, every point is put into the actual code, so what we want to do is make sure that our artwork is relatively simple.
You can use the Simplify command right here if you want to do that, to try and pull down the number of anchor points used, which is going to make the SVG file size smaller. When designing for SVG, always be thinking about what the end use case is. For instance, I have a laptop here which has a simple shape, which will probably be pretty small in the SVG file, but what if later on I decided I wanted to animate the lid here and have it move or twist or do something like that? Well, a better way to do that would be to create two separate paths.
You might have a teeny bit more file size, but later on if you want to add animation or control it in certain ways, you can do it. If you're using Illustrator and you've got vector artwork, be very careful about using the Photoshop effects here, like, let's say Blur or Gaussian Blur for instance, simply because if I do this and save it out as SVG, a lot of those Photoshop filters are going to become rasters. It's going to rasterize that and stick it inside the SVG file. We can, if we want to, work with what are called SVG filters.
This is an example of what an SVG filter looks like. Currently, in my version of Illustrator CC 2015 the SVG filters are actually gone. You can apply them and you can import them, but you have to find them out there on the web. This one may be a no-brainer but make sure that things are grouped and organized properly. If you have button objects for instance, on the phone like this, try to group them together if a group is necessary, because it's going to put that in the code. You can also separate content based on artwork and typically what's happening with SVG is if you name individual objects, it's going to put that as an ID in the actual SVG.
So be careful of naming conventions, just keep it simple, keep it straightforward, and you'll be fine.