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.

Covering Kraftwerk: the process (part 2)

A couple of weeks ago, I wrote about the first steps in my process of recording an EP of Kraftwerk covers using solely the Pocket Operator series of micro synthesizers.

This weekend I returned to the project. I am not yet recording anything with the Pocket Operators themselves, but I am continuing the process of recording rough versions of these covers using software instruments in Logic Pro X. There are three reasons behind doing this:

1. Learning the basic structure of each instrumental part in the songs.

2. Building my overall arrangement of each piece, so I have a framework to work from as I record the Pocket Operator parts.

3. Determining which keys to transpose the songs into (since the Pocket Operators only have a 2-octave diatonic scale and can’t play chromatic notes), and having recorded versions of the parts in the new key to work from on the Pocket Operators.

As of today I have the rough mixes from Logic Pro X of all 4 tracks, so my next step is to actually get the Pocket Operators going and start recording the real parts.

The links below are rough MP3 versions of these Logic Pro X arrangements. None of the sounds you hear will be on the final versions; these are simply guide tracks for me to use in recording the real parts. Also, there are a few “open” sections in the middle of the songs (especially “Ruckzuck” and “Tour de France”) where I’ve left room for additional improvisations or manipulations.

I did not try to perfectly reproduce every part, or exactly follow the structure of each song. These are my interpretations and I’ve taken some liberties — especially with “Ruckzuck”, since I’ve never been a huge fan of the aimless noodling of the improv section in it, nor of its ever-increasing tempo.

1. Ruckzuck

2. The Man-Machine

3. Pocket Calculator

4. Tour de France, Étape 1



I haven’t yet decided if I’m going to try to record any vocals. But I think if there’s anyone whose singing I can handle imitating, it’s Ralf Hütter’s.

Top 5 Albums of 2015: The Contenders

Yes… it’s that time again. Time for me to reveal how limited my (financial, at least) exposure to this year’s new music is by publishing my list of the contenders in my top albums of year list.

It has felt like this year, more than most, I have really not paid much attention to what’s going on in the world of current music. My biggest musical obsession of the year has been listening to and collecting vinyl, even. How out of touch!

Anyway… here are the albums and EPs released in 2015 that I have purchased, and that are therefore contenders for this year’s list.

Adele • 25
Ariel Pocock • Touchstone
The Bird and the Bee • Recreational Love
Bjork • Vulnicura
Joe Satriani • Shockwave Supernova
King Crimson • Live at The Orpheum (Los Angeles 2014)
Magma • Slag tanz
Maria Schneider • The Thompson Fields
Mark Ronson • Uptown Special
Monolake • Icarus Alto and D E C (EPs)
Room 34 • Half Life (yeah, that’s me)
Steven Wilson • Hand. Cannot. Erase.
Sufjan Stevens • Carrie & Lowell
The Decemberists • What a Terrible World, What a Beautiful World
Toro Y Moi • What For?

Seriously, that’s it? Apparently. And what’s even more ludicrous, there are at least three albums in the list I haven’t listened to at all (Bjork, Magma, Sufjan Stevens, The Decemberists), and a couple more that I’ve only listened to once or twice (Adele, Ariel Pocock, Maria Schneider, Mark Ronson). With the Adele album I have an excuse — it’s only been out for 5 days. And Mark Ronson… well, I’ve only listened to the full album twice, I believe (back to back on the day I got it), but I’ve had second-hand exposure to “Uptown Funk” on an almost daily basis since early summer.

As usual I’ve highlighted in bold the five most likely to make the final, sad list.

Update, January 12, 2016: Well, 2015 came and went and I never actually created my final “top 5” list. At this point I don’t think I will bother, because: a) I’m not very enthusiastic about this list; b) no one reads this stuff anyway; and c) 2016 has already obliterated 2015 musically:

Make Advanced Custom Fields smarter about handling date fields

I love Advanced Custom Fields almost as much as I love WordPress itself. But that’s not to say it doesn’t have its problems. Most are obscure, and minor… and incredibly aggravating once you stumble upon them.

Here’s one such case. Date Picker fields are great, but no one seems to be able to agree on how to store dates in a database… other than insisting on avoiding Unix timestamps, the obvious choice.

ACF stores its dates, for some reason, in YYYYMMDD format (or, as we’d express it in PHP Land, Ymd). No delimiters at all. If you’re not going to use Unix timestamps, why not at least use the MySQL convention of Y-m-d H:i:s? But I digress.

I’m presently working on a project that merges some functionality of ACF and Gravity Forms, along with some custom code, to create a jobs board. It’s super-slick how Gravity Forms can create posts from a form submission, and even set them to pending review so a site editor can come in and review them before publishing.

But… dates. Jobs boards have a lot of dates. And while Gravity Forms offers a wealth of options for date string format, Ymd isn’t one of them. So it ends up storing the date value in the database in a format ACF doesn’t like. Because ACF is very picky. It wants that format, and no other. If the value in the field is not in Ymd format, the value displayed on the admin editing screen is just… blank. And then when you save, whatever was previously saved in that field is erased.

It doesn’t have to be this way. And thanks to the following bit of code, it won’t be. Now bear in mind, this is only altering what ACF renders on the editing screen. Once you’ve saved again from that point, the date will be stored in ACF’s preferred format, but up until then, it will be in whatever other format it was in when it landed in the database.

If you’re writing your front end code proactively, that won’t matter. Because you’re already assuming data inconsistency and using strtotime() to standardize any dates you’re working with in your templates, right? Of course you are.

OK, then. So the real goal here is just to get ACF to display the correct, saved date when you go in to edit the post, so it doesn’t then wipe out the date when you hit Save Changes.

In your functions.php file, or wherever you think is best (a plugin would be nice), do this:

function acf_smart_dates($field) {
  if ($field['value']) {
    $field['value'] = date('Ymd',strtotime($field['value']));
  }
  return $field;
}
add_filter('acf/prepare_field/type=date_picker','acf_smart_dates');

That’ll do.

Covering Kraftwerk: the process (part 1)

As my Twitter followers know, I’ve concocted a harebrained scheme to record an EP of Kraftwerk covers, using solely the Pocket Operator calculator-esque synthesizers from Teenage Engineering. This project was inspired by my love of Kraftwerk and my assumption that Teenage Engineering was directly influenced by Kraftwerk (especially the song “Pocket Calculator”) in creating the Pocket Operators.

I’m taking a, let’s say, judiciously-paced approach to this project. Partly because I don’t have a lot of free time at the moment, and partly because I need to let this thing fully gestate in my brain. Also because I’m still learning how the Pocket Operators work. They’re ingeniously designed, but not exactly intuitive. (Then again, I don’t find any electronic devices besides computers intuitive. Let’s not even get started on fax machines.)

I’ve identified the four Kraftwerk songs I want to cover:

  1. Ruckzuck (1970)
  2. The Man-Machine (1978)
  3. Pocket Calculator (1981)
  4. Tour de France, Étape 1 (2003)

My first baby steps into the project were in the form of some brief tinkering with the Pocket Operators themselves to lay down the basic foundation of “Ruckzuck”, which I did from memory. (It was easy to do this one from memory; after all, I watched a lot of Newton’s Apple as a kid.) I commemorated this with a brief video posted to Instagram:

A video posted by Scott Anderson (@room34) on

This past weekend I took my second step, which went a bit further. I have decided that part of what is challenging to me with playing these Kraftwerk songs (as simple as they are) on the Pocket Operators is that I don’t have any written music to work from. So I’m introducing a second step in the process, but one that will not at all make its way into the final product. I’m creating versions of the songs entirely with software instruments in Logic Pro X, just so I have my own transcriptions (really, adaptations, because I’m not trying to get it perfect) to work from when I program the Operators.

Here we have the beginnings of my rough Logic Pro X interpretation of “The Man-Machine.”


I am excited about this project! Just hoping I can find some time in the near future to keep pushing it forward.

What will the end results be? I’m not sure. While I’ve dabbled with recording covers before, I’ve never taken them through to completion and released them into the world. I’m not even sure how I want to go about that. But so far it’s still a long way off.