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).

champsleague

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).

illustrator vector

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.

svg -v- png

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.

  • Damodog

    Great article!

  • Vincent Valentino

    So what would you suggest as best practice when supporting IE8 is a necessity?

  • Sean MacEntee

    depends how often you’re using them and whether you want to run with or without a javascript solution.. easiest way would simply be to use conditional IE statements…

  • Grant O’Neill

    I personally would use a PNG as a backup. There’s probably a script out there to replace page elements (e.g. all SVG files) with something else (e.g. PNG) in IE8.

  • Richard Franklin

    Vincent I have a handy png fallback plugin script which works with modernizr here: http://codepen.io/rfranklin/pen/Clkei

  • Vincent Valentino

    Thank you Richard! That’s exactly what I was looking for!

  • Richard Franklin

    You’re welcome :)

  • Aaron J. Angel

    “So it saves space, increases load time…”

    I do believe you mean decreases load time? Increasing load time certainly isn’t desirable, and seems at odds with the space saving you claim.

  • http://seanmacentee.com/ Sean MacEntee

    yep, that was a mistake, well spotted & thanks for letting me know!

 

Your browser is out of date. It has security vulnerabilities and may not display all features on this site and other sites.

Please update your browser using one of modern browsers (Google Chrome, Opera, Firefox, IE 10).

X