Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are primarily two different vector file formats that you can use on the web. One of them that we've discussed is SWF or Flash. The other one is SVG, which stands for Scalable Vector Graphics. One of the benefits of using SVG is that it's an open format. In addition, it's easy for developers to use scripts or to create web sites that are driven by dynamic content to actually change or modify the graphics in real-time because the SVG files are actually text-based. In reality, there was a lot of momentum behind the SVG file format several years ago, but that kind of died off when Flash kind of became more of a bigger player.
However, lately, we're seeing a resurgence of interest than SVG on the web. Not only is SVG used heavily inside of web browser environments; it's also used in mobile devices. In fact, SVG is often used to drive the user interface for mobile devices. Well, once again, one of the great things about using Illustrator is that you really have support for almost any type of web graphic that you might need. Let's take a look at how we can create SVG files directly out of Illustrator. I'm going to go to the File menu and I'll choose Save for Web & Devices.
I'll use my Slice Select tool to select the Explore California logo, just this one slice right over here. And from the pop-up menu here, I can choose the SVG file format. Now, here I also have several settings that are specific to working with SVG. There are different versions of SVG that are being used. For example, SVG is usually used for desktop browsers. SVG Basic is used for powerful handsets like PDAs, for example, and SVG Tiny is usually used for smaller and less capable cell phones.
There are some other settings here that are more geared towards the use of a developer. For example, you have the ability to either embed your images or include them as links, so they don't make the SVG file themselves larger. And you can choose from a variety of different ways for how you want your fonts treated. Now, there are some settings here that are really outdated. For example, there's a check box here that says Optimize for the Adobe SVG Viewer. Now, Adobe actually stopped developing this SVG Viewer several years ago. Chances are, if somebody is going to be viewing SVG graphics, they're going to be viewing it with the native support built- into today's latest browsers or mobile devices.
The truth is that this is really a quick way to export SVG out of Illustrator, but if you really want full control over how the SVG files are created out of Illustrator, you would cancel out of this dialog box, go to the File menu, and actually choose Save As. This is because Illustrator has the ability to save SVG files directly. In fact, you can even open SVG files inside of Illustrator to edit them as well. Where it says Format, you can choose SVG and then when you click on the Save button, you'll see a dialog box up here that has all the settings that you can actually work with when creating SVG files.
If you click on the More Options button, you'll see all these settings and mousing over them will identify exactly what those settings do. You can view those descriptions in the window down here. One of the really nice things that Illustrator has here is that there is a button that says Show SVG Code, where you can actually see the code that Illustrator is generating. In addition you can choose Web Preview to preview this SVG file inside of a browser, or you can go directly to Device Central and preview the artwork on a device that supports SVG.
If you'd like to learn more about the SVG file format itself, I suggest you go to the web, and you go to visit the W3 web site, which is the World Wide Web Consortium that control standards. And you can find that at http://www. www.W3.org/graphics/SVG, which you can see right here.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.