SVG format - Illustrator Tutorial

- [Narrator] Bitmap image formats for the web: gif, jpeg, and ping, describe images using a grid of pixels. The resulting files can be bulky and they're limited to a single resolution. They can also consume a lot of bandwidth on the web. SVG, or scalable vector graphics, on the other hand, is a vector format that describes images as shapes, paths, texts, and filter effects. You can think of it as vector for the web. The resulting files are compact and provide high quality graphics on the web. They're essentially resolution independent, so even if somebody was to zoom in or view the graphic on a high density screen, it's still gonna look great. The SVG format is entirely XML based and offers many advantages to developers and users alike. SVG is essentially just code. With SVG, you can use XML and/or a Java script to create web graphics that respond to user interactions. You can include sophisticated effects, like highlighting, tool tips, audio and even animation. When you create a graphic in Illustrator, which is intended for SVG export, you need to perform some steps and considerations so that the final file is going to be output properly. Let's explore some of those things now. Here, I have two instances of my Dive logo and if I turn on this background layer, you can see that the second version has a glow around it. I'm gonna hide the background layer and I'm gonna take the first instance of the logo and I'm gonna drag out a copy. When you're creating SVG graphics, the simpler the lines, the smaller the file size is gonna be. So it's important that you simplify points and lines whenever possible. You can easily do this by using the Object, Path, Simplify. This is gonna open our Simplify dialog box and I like to work with Preview checked so I can get a preview of what the resulting artwork is gonna look like. I like to have show original checked, which is going to show you an outline of where the original artwork was so that as you make changes, you can see how far or close you're going from the original. If I bring my curve precision down, you can see that the new artwork is not gonna be following the original lines very closely. So, this is really not an option to bring my curved precision down so much. It's your job to find a balance between the curve precision and the angle threshold so that you can get results that are not going to deviate too far from the original, but will help you reduce the point count down significantly. I'm gonna bring my curve precision all the way back up to 100 for right now. You can see that by adjusting the angle threshold, the original has gone down from 345 points to 249. So I am shaving off a significant amount of points. Now, I can adjust these settings and you'll have to work cautiously with curve precision because a little bit is gonna go a long way. So if I just bring this down to 96, I feel like that still accurately represents the logo, but you can see that I'm getting quite a reduction in my points. You'll have to experiment as these settings are gonna be particular to whatever graphic you're working with. I'll click okay and now, we can compare my optimized version to the original. You can see that there's subtle differences, but the file size is going to be vastly improved since we cut the number of points in half. Now I'm ready to export these items as SVGs. To do that, I'm gonna use my File, Export, Export for Screens setting. In this dialog box, you can export out the entire art board. Now, if I do this, it's going to export out all three logos together. That's not my intention. I want them to be separate. In order to do that, I'm going to have to set up unique individual art boards. Conversely, I could've turned the graphics into assets and if they were assets, they would be listed here. I didn't do that in this exercise because I wanna show you the art board selection. I'm gonna hit Cancel and what we're gonna do is we're gonna go ahead and we're going to select one of these logos. I'm going to go into Object, Artboards, and we're going to say Fit to Artboard Bounds. When I do that, the artboard is gonna shrink down and it's gonna fit around all of the graphics that exist. That's not really helping me out here. So what I'm gonna do here is I'm just gonna export out one instance of the dive logo. I'm gonna go to Object, Artboards, and I'll say fit to selected art. Now, if I go into File, Export, Export for Screens, you can see that it's cropping around this particular logo. It's important that you give the graphic a name that you wanna use for the SVG. So I'm just gonna call this one logo-dive and then, over on the right, you can choose the file format that you wanna export as. We wanna export out as an SVG and I'll specify the location where I wanna save this file. I'm going to choose to open the location after export and then I'll click export artboard. As you can see, this produces an SVG file and our file is going to have a size of eight kilobytes. It's a vector file and I can use it at any size on the web. SVGs are really useful for logos and vector based artwork that isn't too complex. If your artwork is too complex, the SVG file size is gonna get a little too big, so you might wanna explore alternate file formats in that case. But for our purposes here, this logo is great as an SVG.