Tips on saving vector images from Adobe Illustrator for SVG web use

With Internet Explorer 8 end of life coming on January 12, all kinds of new possibilities are opening up to us web developers who can finally start making use of technologies that have had wide support in modern browsers for years, but that we were reluctant to embrace because of the need for IE8-friendly workarounds.

For me, one of those things is SVG images. In recent years, especially since Responsive Web Design (and high-resolution displays) took off, I’ve been receiving web designs more and more in Illustrator format, rather than Photoshop. It’s great to get these assets as vectors that I can scale and size as I need in my build-out of high-res, responsive websites. But until now I had still been pulling vector assets over into Photoshop and producing multiple carefully-sized versions of things like logos and custom icons.

Now, however, SVG is a viable — in fact, preferable, given its flexibility and smaller file size (plus the ability to hack the XML code right in the image files themselves) — alternative to multiple PNGs of every image.

The thing is, while I have been using Photoshop extensively for over 20 years, I’ve never really gotten the hang of Illustrator. I know just enough to go into an Illustrator file, pull out the assets I need, and try not to screw anything else up in the process. That’s what this article is for.

Over the past week I have pulled a number of vector assets out of Illustrator designs as SVGs for a couple of projects, and I’m starting to get the process down. Here’s what you need to know.

The Steps

1. Select the object you want to make into an SVG. Most of the time designers will have grouped the pieces of the object together, so just a single click on the object will select it. Make careful note of the blue outlines to be sure everything you want is selected (and maybe even more importantly, that nothing else you don’t want is). You can also click and drag to select all objects within an area, or use the Layers palette to select the elements. This can be tedious, but be sure you’ve got what you need — and only what you need — highlighted. Once it’s selected, copy it to your clipboard.

2. Create a new document in Illustrator. Default settings are fine. Once the blank document appears, paste in the copied object. It should appear centered in the document. There should be a ton of space around it. That’s good. Since we’re dealing with vector art, scale is irrelevant. You just want to make sure everything fits within the boundaries of the document. (The “artboard” if you’re familiar with Illustrator speak.) Keep the object selected (blue outline). If you deselected it, just Select All.

3. Shrink the artboard to fit the object. If you don’t do this, you’ll end up with a bunch of blank space within the defined dimensions of the image and it will be impossible to work with. Good thing it’s super easy. With the entire object selected, go to Object > Artboards > Fit to Selected Art and you’ll get a perfect container.

4. IMPORTANT! If there are transparency effects within the object, you need to flatten it now. A lot of the time you can skip this step. But if you do, you may find that parts of the design are missing in the resulting SVG. I found it’s easy to forget this; I don’t find it intuitive that this would get lost in the SVG conversion. So go to Object > Flatten Transparency… Review the settings here to ensure you’re happy with them (sorry, I don’t have a lot of guidance here), and click OK Your image should not look different. If it does, undo, and repeat with different settings in the Flatten Transparency dialog.

5. Save. There’s no “Save for Web” option for SVG. Just regular ol’ “Save As”. Be sure to set the Format menu to SVG (svg). You could try compressed, but really SVGs are pretty small anyway, and I like to keep the code editable so I can tinker with it if needed. (Changing the color fill, for instance.) Once again there are a ton of settings presented in the SVG Options dialog, but I’ve found the default settings seem to work fine. (One change I have made is to set CSS Properties to Presentation Attributes but I’m not entirely sure yet what difference it makes.)

That’s it! You should now have an SVG ready for placement using an <img> tag, or as background-image in CSS. Just note that CSS treats SVG images a bit differently than regular JPEGs and PNGs, so you may need to add a few extra properties to keep the SVGs within their container elements in your page.

How to not bother testing websites in Internet Explorer 8

Or: What Microsoft probably doesn’t really want you to do.

Internet Explorer 8 is supposed to be more standards-compliant. Ya-freakin’-hoo. (No relation to Yahoo!) I don’t especially care, and I’d like to think the best way IE8 could become standards-compliant is to not exist in the first place. But, it’s here, and when Windows 7 arrives later this year, we (the web designers and developers of the world) will have to get used to it.

I do have Windows 7 RC running in a virtual machine on my MacBook, so I can test IE8. But waiting for several minutes for it to log in (for some reason), I came to the decision that maybe it’s not worth testing in: maybe it’s best to just take advantage of its “IE7 Compatibility Mode” to not need to test in it. It’s not like IE8 being standards-compliant (yet, somehow, still not rendering pages like Firefox and Safari) is really going to save me any time, because I’ll still need to test in IE7 (and, God help me, IE6) for years to come. Why add a third Bizarro-world Microsoft browser to the mix?

IE8, brought to you by people who don't see anything wrong with this image.

Internet Explorer 8, brought to you by people who don't see anything wrong with this image.

So I googled ie8 ie7 compatibility mode and found a helpful, if slightly douchey, blog post from a Microsoft “developer evangelist.” Of course, his blog renders completely f’ed up in Firefox, and even if it didn’t it would probably still be displaying the hideous matted-to-white-transparent-GIF-on-a-dark-background you see here.

Nonetheless, he did still give me the code snippet I need. Stick this in the header of all of your pages (which, hopefully, means editing just one file, riiiight?), cross your fingers, bow your head in the direction of Redmond and, if all goes well, you won’t have to think about IE8 (ever?) again.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

I’m going to try it out now.

Perhaps I went out on a limb when I referred to this blog post as douchey. Never mind the fact that the guy is a “developer evangelist” for Microsoft, which is enough in itself. The two d-bag moments for me were: 1) the opening couple of sentences: “As you all know, the Internet Explorer team has been working hard to make IE8 the most standards compliant browser around. Unfortunately, not all web sites confirm [sic] to these standards today.” In other words, Microsoft has undertaken a noble effort to build something perfect and wonderful, but all you apathetic and/or malevolent web designers out there are conspiring to destroy it. And 2) “Lastly, for those of you running Apache instead of IIS (shame on you!)…” Yes, shame on you for using the most popular and stable web server software in the world. Actually, yes, shame on you for running Apache on a Windows server. You’re an even bigger douche than he is.

Update: Adding this meta tag to a client site I’m currently working on didn’t seem to have any effect on IE8, but that may be because I had manually clicked the compatibility mode button in a previous session, turning it off. (So, in other words, I am positing that if the user has manually turned off compatibility mode, it will stay off even if the page tries to activate it.) Turning compatibility mode on manually did work — the rendering issues I saw with IE8 in its normal mode went away.

Now, the thing that concerns me about all of this is that my page should be pretty damn well standards-compliant: the doctype is XHTML 1.1, which is very unforgiving, and I’ve validated it. The page looks fine in Firefox and Safari. It’s possible that the source of the problem is my IE-specific CSS file, that is fixing IE7 problems that don’t exist in IE8 (and thereby introducing new problems there). The next step would be modifying the conditional comments so that IE8 doesn’t load the IE-specific CSS, and checking whether that solves the problems. The culprit may also be IE7.js, which I viewed as a lifesaver when I started using it about a year ago, but increasingly seems to be of little to no benefit.