Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
On the web today, we have to understand that the devices which are accessing our content no longer have just a standard 72-pixel-per-inch screen. In fact, many of them exceed even 300 pixels per inch, such as the case with Apple's iPhone, iPad, and even now the MacBook Pro. One solution to this resolution dilemma is to use a graphic format known as SVG, or Scalable Vector Graphic. SVG offers us a truly resolution-independent way of displaying our graphics on the web, and it does so by using XML to define the basic properties of the image, like paths, shapes, fonts, and even colors.
This is perfect for UI elements, icons, logos, patterns, or even backgrounds that need to be scaled differently in order to display correctly on a wide range of devices. You design it once and use it anywhere, at any scale, at any resolution. How cool is that? In addition to its scalability though, SVG also has bandwidth-friendly files. No matter how big the graphic becomes, the only data that's actually transmitted to the browser is the XML that's attached to the file. This makes the file size much smaller than any rendered graphic at that size.
As most mobile devices use some variation of the WebKit browser, you're good to go when it comes to that platform, so don't worry about mobile. Now, let's jump in here and take a look at how we can export in SVG out of Adobe Illustrator. In previous versions of Adobe Illustrator, you were able to Save for Web directly to an SVG. However, in Illustrator CS6, SVG has been stripped out of the Save for Web dialog box and placed simply in the Save As dialog box. So if I go to the File menu and I choose Save As, I'll select my desktop here, and underneath the Format, I can choose SVG.
So, when I do that-- I'm just going to call this Robot. And once I'm ready to save it, I'll click Save, and it comes up with my SVG Options. You'll get to pick between your SVG profiles here at the top, and underneath that, you'll get a description telling you this specifies the desired SVG XML type documentation. And here all you need to worry about is just sticking with the default. If you want to use an older version, you can, but you don't have to do that at all. In this case, I'm just going to stick with this.
The Fonts, this is a little bit of a different story. When you hover over this, it says, "This font format produces the best visual fidelity for displaying text. The Adobe SVG Viewer can display text using this format. However, not all viewers support this format." If you select SVG, it tells you here that this is the standard W3C SVG font format. It is supported by all of the viewers, meaning all the browsers, but it doesn't produce the best visual fidelity for small text due to the lack of font hinting.
If you want to be compatible with everything, you can, but you don't have to be. Finally, Convert to Outline. If you do that, this will convert all of the active text in your document to outlines upon export. It tells you here that even though the visual fidelity of small outline text may not be accurately preserved by choosing this. So my suggestion would be to experiment with this a little bit. Try it out with the Adobe Viewer: export it, and then open it up in all your browsers. Try it with the SVG: open it up, test it in all your browsers. And then finally, try converting it to outlines.
In most cases, you're going to be converting your type to outlines before you render it out anyway, especially if you've been sharing this with other colleagues and clients, as they might not have those fonts in their system. If you do that, you're pretty much good to go. So in this case, I'm going to keep it on Adobe CEF for now. You can choose a subsetting if you want to. You don't have to though. Each time you hover over these, by the way, it gives you a little description down at the bottom on what that means. Options, Image Location: this specifies the locations of images referenced in the document. Do you want to embed those images directly inside of the SVG or do you want to link to them? When you hover over the link, that tells you here that link documents to images exported from the original Illustrator file.
This is useful for multiple SVG files that share common raster elements. Images are saved as JPEGs with no alpha channel or PNGs with an alpha channel. In this case, I'm going to choose to embed into my file. If you would like to preserve Illustrator capabilities, that just means that if you're going to make future changes to this, preserving Illustrator editing capabilities will be helpful to you, because then you can open up the SVG file and make changes to it later. However, if you preserve Illustrator editing capabilities, chances are you are going to increase the file size a little bit as well, so I'm going to leave that turned off for now.
If you want to see more options, you can click here, and there are several different options that you have available to you. For now, I'm just worried about the basic options though, so I'm going to collapse this by choosing Less Options. And then finally, once I'm ready to this, I can either launch my web browser to preview it. So I'll click here, and that will launch my browser, and there it is right there, and if I were to move this or scale it around, I can't really do that here. But it looks pretty good from where I'm standing, so I'm pretty happy with it. I'll go back to Illustrator and I'll hit OK. Now, that should have saved the SVG to my desktop, and if I go in my web browser now and open this up, I can select it and open it, and there it is: the SVG file just as it's supposed to be.
Now, if you're looking for some tips on how to optimize your SVG graphics, Adobe's help documentation on Illustrator SVG is very good and very extensive, especially when it comes to setting up your SVG files for proper export and also applying different SVG effects, and even adding interactivity as well. So, if you want to check that out, that's help.adobe.com, and go to the Illustrator section and do a search for SVG, Scalable Vector Graphic. So, hopefully by now you have a better understanding of what a SVG graphic is, how it works, why it's useful, and how we can use that to better display graphics on a wide variety of devices and screens.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 50128 Viewers
117 Video lessons · 37477 Viewers
113 Video lessons · 81231 Viewers
65 Video lessons · 10774 Viewers
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.
Your file was successfully uploaded.