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.

Resolved: All tech bloggers (including myself) are longwinded, narcissistic douchebags (except maybe John Gruber, depending on what he means by his latest post)

Why's it so green?There are some tech blogs I read a lot, and there are others I rarely read.

The ones I read a lot tend to have certain characteristics in common: they’re relatively simple in design; they frequently veer off-topic into tangential areas I also find interesting (meaning they’re written by real people instead of corporate tools); and they usually have few if any ads, usually served by invitation-only ad networks like The Deck. (I’d love to be invited to make ancillary income from an exclusive ad network but for now I am settling for the pittance Google throws my way.) Most importantly, they usually get right to the point.

The ones I rarely read also have certain characteristics in common, and unsurprisingly, most are diametrically opposed to the characteristics of the blogs I do read: they’re cluttered, with too many navigation tabs leading you to related sites in the “network” owned by the same faceless holding corporation; they usually stay within their narrowly-defined topical box dictated by said faceless holding corporation; they’re swimming in obnoxious Flash ads that creep across the text and force you to interact with them, if only to shoo them away. And they blather on and on, clearly paid by the word, with insipid, uninformed (despite their extensive network of industry connections and apparently large readership) opinions.

Now at this point you may be thinking my own blog more closely resembles the second group, save for the corporate overlords and industry connections (and money). And maybe you’re right. But that’s my own failing, and is probably why this blog falls into the “audience of one” category.

Anyway… by now it’s probably obvious to anyone reading this blog regularly (i.e. me) that one of my primary sources of tech news is John Gruber’s Daring Fireball. Gruber is an Apple fan, but he’s also highly insightful and more than willing to criticize Apple when he thinks they’ve screwed up (see the ongoing App Store debacle). I’m less appreciative of Gruber’s enthusiasm for the New York Yankees. But my favorite aspect of Daring Fireball is probably the “Claim Chowder” posts, where he cites foolish claims from the past — often focused on Apple’s perpetually-impending demise — that have since been proven egregiously false. There are two of what I would call “corporate bloggers” who are frequent targets of his ridicule: Rob Enderle and Michael Arrington.

Today Gruber hit the jackpot: Enderle is commenting on Arrington. Well, sort of. He’s actually commenting on the JooJoo: the poorly named phoenix rising from the ashes of Arrington’s ill-conceived and now doomed device concept, the CrunchPad.

I still do not “get” tablet PCs. I especially don’t get the JooJoo: as large as a regular laptop, and priced as high as an entry-level model, but with no keyboard, and a handful of other frustrating limitations for the form factor. What it really comes down to for me is that it’s as big as a laptop, but it can’t do everything a laptop can do. And it’s not cheap enough for price to make a significant difference. What niche is this thing supposed to fill?

I’ll be honest — when I first heard rumors that Apple was going to make a phone, I thought it was a terrible idea. I managed to avoid my own case of claim chowder by not really mentioning the iPhone announcement on this blog when it hit, but suffice to say as much as I thought an Apple phone was never going to happen — even right up to the beginning of the keynote where it was announced — by the end of the demo, I was convinced that the iPhone was the best invention ever. Like the iPod, it filled a niche. Before the iPod, MP3 players… well… they sucked. And before the iPhone, cell phones, even “smart” ones, pretty much sucked too. The iPhone worked because it brought together all of the best qualities of a number of disparate devices that had never previously existed in the same unit, along with a few brilliant new ideas of its own (all while getting rid of most of the “suck”), wrapped up in the first such device designed with the level of polish and perfection to satisfy Steve Jobs.

Ultimately though it was all about the niche. The devices we could carry in our pockets before the iPhone simply couldn’t do the kinds of things we now take for granted, thanks to the iPhone. I just don’t see a laptop-sized device, with a subset of the features of a laptop and a low-end laptop price tag, filling any kind of a niche. The thing needs to be able to do things current, comparably sized and priced devices can’t. And this doesn’t.

The question of whether Apple can produce something that does is another matter. At the risk of cooking up a steaming pot of claim chowder, and with my early disdain for the Apple phone rumors still in mind, I have to say I just don’t see something like this coming out of Apple, despite the incessant rumors of parts orders from Chinese manufacturers.

All the rumors say Apple’s tablet will be based on the iPhone OS, which seems more likely to me than a Mac OS tablet. But there’s too much about the iPhone “ecosystem” that just wouldn’t seem to translate to a larger tablet device, most obvious being the fixed display resolution. No way is Apple going to produce a device with a 10-inch screen and 480×320 resolution (even the original 1984 Macs had 512×384 displays), but by that same token, I don’t see the iPhone OS interface suddenly supporting multiple resolutions when there are over 100,000 apps all built around this one fixed resolution. Though I haven’t worked with iPhone development, I’m willing to bet that enough iPhone app interfaces use bitmapped images (not scalable vector graphics) that they’d appear completely broken at any other resolution — and even if they are vector-based, they’d scale up in a way that would look ridiculous. And this is just the most obvious reason to me that an iPhone OS-based tablet seems far-fetched.

But all of that doesn’t even get to my point. My point is bloggers like Arrington and Enderle, who make their livings spouting nonsense speculation far worse than what I’ve undertaken in the past two paragraphs, and other bloggers like Gruber who make a (more modest) living partially by calling them out on their bullshit. Which brings me back to Gruber’s latest post. I’m not even sure what to make of it:

Further proof that Enderle’s idiot shtick is an act.

I know Gruber has been speculating lately that Enderle is deliberately writing crap (for whatever nefarious purpose one would have to do such a thing, much like how Gretchen Carlson dumbs down her commentary on Fox News, as revealed by Jon Stewart last night), and that’s entirely possible. But I honestly don’t know what Gruber really means by this comment, in regards to Enderle’s specific post on the folly of the JooJoo (which seems right on) and his thoughts on what it might mean for a future Apple tablet. Personally I think this kind of does spell trouble for an Apple tablet, but only because I think the tablet is kind of a stupid idea anyway.

Time will prove all of us right or wrong. If nothing else, Enderle and Arrington (and Carlson) give us an interesting spectacle to watch… just like a train wreck.

Update: In the time it took me to write this post, Gruber amended his original post with the following, which provides some much-needed (though perhaps not enough) clarification:

I mean, come on, no one really believes that the JooJoo is going to affect Apple even one iota, right?

This can be taken in one of two ways. It all depends on whether or not you think Apple is actually working on a tablet.

This is precisely why I should not have caffeine in the evening

Step 1: Consume caffeine too late in the day/evening.
Step 2: Stay up much later than normal because of the effects of the caffeine.
Step 3: Explore the dark recesses of my mind and the Internet; shudder at what I find.

Tonight is one of those nights. And through a bizarre chain of links that, among other things, taught me that the late jazz multi-instrumentalist (as in simultaneously) and all-around weirdo Rahsaan Roland Kirk played the lead flute part on the 1964 Quincy Jones track “Soul Bossa Nova” — probably best known as the theme song from Austin Powers: International Man of Mystery, I also discovered this little gem by the Swingle Singers.

I don’t know if you know much about the Swingle Singers. I know just enough to know I don’t want to know more. (And if you know what that sentence means, let me know.) But as of tonight I do know more, and it isn’t pretty.

Step 1: Take an already insufferably cheesy theme song from a ’70s cop show.
Step 2: Give it the full-on a cappella vocal group treatment (including “wacka-chicka” guitar parts).
Step 3: Add a human beatbox, because steps 1 and 2 just weren’t enough already.

Enjoy. Here’s the original, in case you’ve forgotten it:
[audio:http://blog.room34.com/wp-content/uploads/underdog/55-starsky-and-hutch.mp3]

And here’s an excerpt of the new version, courtesy of the record label’s website:
[audio:http://blog.room34.com/wp-content/uploads/underdog/sigcd104_10.mp3]

Oh yeah… I almost forgot. The album’s called Beauty and the Beatbox. Clever!

There’s nothing like looking down on someone else to make you feel better about yourself

Most of the time, at least, I try not to judge myself in comparison to others, but sometimes when I get down on myself for certain personality traits, such as passive-aggressiveness, it’s helpful to find evidence that there are others who are far worse than myself.

And to that end, I need look no further than to passiveaggressivenotes.com.

I will admit that, my own impolite behaviors notwithstanding, it requires a great deal of restraint to keep myself from printing and posting notes in certain situations (especially where unflushed office toilets are concerned), so it’s not that I couldn’t relate to the pent-up frustrations being vented on some of these notes. Indeed, bad spelling and inscrutable grammar aside, a lot of these notes seem almost exactly like something I might have produced myself.

But then there are the others. The frothing, raving blather of those teetering on the edge of insanity. Not that the circumstances they were placed in by disliked roommates, coworkers, or proximate strangers didn’t warrant it most of the time. In the end, however, I’d rather be the culprit than the chump whose incoherent rants get photographed and posted on a blog for the purpose of global mockery.

Whatever. I just spent the last hour and a half poring over it all. Enjoy.

On a related, but less spiteful note (but only slightly so), you may also enjoy these similar sites (lazily copied from the passiveaggressivenotes.com blogroll). I am beyond pleased to see that there are others out there who share my same pet peeves, namely: apostrophe abuse, lowercase L, and unnecessary quotation marks.

Boy, this kind of puts my Catalog of Annoying Grammatical and Spelling Errors to shame.