Three reasons why you should be using SVG today

I’m lucky enough to own an iPhone 4 with the fancy high resolution Retina display. Quite frankly, it’s amazing – except for the fact that it shows up the god awful blockiness of most images on the web.

Below is a comparison of the screens from the old and new iPhones (from Engadget’s review).

iPhone 4 Retina display

Now, to cater for the iPhone 4’s higher resolution screen, we have a couple of options:

  1. serve a higher resolution image
  2. use something that doesn’t pixellate

While it’s possible to use CSS media queries, JavaScript or a server-side technology to detect the iPhone 4 and serve up higher resolution files, this is only going to make things worse for your Retina-enabled visitors.

The reason is simple – a higher resolution image means a larger file size – something that should be avoided at all costs, especially on a mobile platform. Plus, although your image will look good to start off with, if your user decides to show off their “pinch to zoom” multi-touch trickery, you’re right back to square one. Pixels, gah!

SVG to the rescue

SVG (Scalable Vector Graphics) has been around for donkey’s years but until recently was consigned to the web equivalent of the garden shed. Aside from some sterling work in technologies like Cufon it had pretty much fallen off the web design radar. Because it required an Adobe plugin (last updated in 2001 for the Mac – 2001!) which no one except SVG enthusiasts even knew about (let alone installed on their computers) this brilliant technology never caught on.

Well, those days are over, bud.

Reason 1: It’s supported (at last)

Today all of the main desktop and mobile browsers support SVG:

Plus, with tools like Modernizr at our disposal, serving bitmap content to older browsers is just an .svg class away.

Reason 2: It’s responsive

Yes, that’s right. SVG makes your responsive design even more responsive. There’s no need for downscaled large images or multiple sizes. It just scales! Automagically!

Reason 3: It’s future proof

As I’m sure you’ve realised by now, the beauty of SVG is that it’s vector, baby – it scales up or down to any size or any resolution without becoming pixellated. If someone (Apple, I’m looking at you here) decides to release a three bajillion dpi screen the day after you’ve gone live, there’s no need to break a sweat. You don’t have to redraw your icons. You can sleep easy.

Creating SVG files

So, now that you’re all fired up about SVG files, what’s the best tool for creating them. In my opinion, the best (and most expensive) is Adobe Illustrator. Fireworks comes a close second with Aaron Beall’s fantastic Export extensions. I’ve also tried Inkscape, Sketch and Lineform but for me they can’t compete with Adobe just yet.

Here’s something I prepared earlier

I used Aaron Beall’s Fireworks extension to create an SVG version of the Twitter bird. It’s 1.6Kb, transparent and can be used at any size. This is exactly the kind of thing SVG was made for.