how and why you should use SVG images on your site

Apple created a problem for web developers when they first introduced their retina HD displays on mobile devices. The problem was that if you wanted your images to look pixel perfect across all devices then you needed to create two images – one for normal devices, one ‘HD’ version for retina displays..

Methods of solving the problem

There’s a few ways to go about solving this problem. You could use css, you could use special retina media queries, you could use jQuery to figure out whether a device is retina or not and display the appropriate image… there are lots of options available. I’m not gonna go in to detail on them, instead i’m gonna talk about the SVG (scalable vector graphics) format and why i like to use it where possible to combat this problem.

When to use SVG and when not to use SVG

SVG format is perfect for two dimensional shapes and icons. Think cartoon graphics or illustrations. Recently, i found myself designing some icons and shapes. Football trophies to be exact. Here we have the Champions League trophy. It’s fine. It’s probably never going to be used at this size (450 x 450px) but i wanted it this size because i’m conscious of retina displays (which would effectively shrink it to 225 x 225).

But after a bit of thought, i asked myself why didn’t i just make the trophies in to a ‘font’, which would then make them really easy to call in to a project. Like fontawesome. After a bit of digging, i thought that would be a bit too much work but i then turned my attention to SVG.

I was curious whether (a) i could create SVG images quickly, easily and to a high standard and (b) whether there were any savings to be had on file sizes or whether an SVG image would actually end up having a larger file size than a high quality PNG.

If you have illustrator, turns out creating an SVG is pretty painless. Import your image, do an image trace (to convert it to a vector graphic) and then just save it as an SVG. Job done. Be sure to use the SVG save settings here for best results (if you intend using the SVG on a website).

As for file sizes, it naturally depends on the image. In short, the more curves and shapes in your image, the greater the file size will be. After creating five trophy icons (of varying complexity), i found SVG files to be on average HALF the size of their PNG counterparts.

Getting to the point

The end result is that by using the SVG format for these icons, I’ve:

• Reduced file-sizes by an average of over 50%
• Saved myself from having to create two images of varying resolution to accommodate retina devices
• Don’t need to worry about breakpoints or pixelation… my icons will look the same at any resolution.

So it saves space, decreases load time and saves me time. It’s a change of tactic that has paid off and hopefully I’ll have opened someone else’s eyes to the potential benefits of opting for SVG before other image formats. Just to add some balance to the post, SVG does have some downsides although time is fixing them for us. In the past, IE & Android didn’t play nicely with SVG. Now, you’re safe with IE from IE9 on and Android also supports SVG as of 3.0 (honeycomb). So basically all major browsers play nicely with SVG these days and have done for quite a few release cycles.

Finally, when i’m done creating these icons, i’ll throw them up on my github which I’ve recently been trying to add to. I design a lot of stuff, some of which is never published for various reasons, so i’m trying to get in to the habit of sharing as much as possible rather than just let it go to waste.