SVG is great – an image format especially suited for icons/symbols. Its file contents are related to HTML and therefore editable and readable for “humans”, and because the file describes how the picture should look like (its contents basically “paint” the icon) SVG is a vector format – the icon is resizeable by the browser and is crisp in any resolution.
Situation in the past – using PNG
In the past I delayed the actual move to SVG because of browser support. Especially the lacking support in Android 2.x (which is now almost negligible because it is so old / almost no market share left) and IE8 and below has prevented me from doing the move – just using PNG images seemed easier and almost as good. PNG images can be compressed and optimized which leads to good results in many cases.
Additionally, not all browsers had perfect SVG support (IE10+IE11 or Opera 12, and probably many past versions of Chrome, Firefox and older mobile browsers), because supporting SVG is a bit like supporting HTML5 a few years ago – every browser can do some of it, but almost none of them can do all of it, so you have to possibly work around flaws and limitations.
The advantage of using PNG images changed a lot in the past years when screen resolutions on smartphones, tablets and laptops increased – suddenly multiple sizes of PNG images were needed, along with media queries to target these new devices, otherwise images would seem “pixelated” and fuzzy. High resolution PNG images get large quickly: one of my PNG icons went from 2.5KB to 18.3KB when I increased the size from 32×32 to 128×128, another one went from 2.4KB to 31.4KB (and they were all optimized)! This means mobile devices with high-res displays suddenly download icons which are very large, possibly on a high latency mobile connection. This will only get worse as displays get even better on every imaginable device.
Situation now – using SVG
In the last days I have finally started using SVG icons in my websites – according to Can I Use about 95% of used browsers support SVG. Chrome & Safari have really improved this a lot – most mobile browsers handle SVG with ease and are updated frequently by the OS. Unfortunately, Internet Explorer is still the black sheep in the group: support only started with IE9, and it has it quirks (the next sections will cover that).
Using SVG images was easy: I show all icons on my websites via background-image in CSS. When using SVG you just have to add explicit background-size styles, so my CSS went from:
background-position: 0 3px;
background-position: 0 3px;
background-size: 16px 16px;
Fallback to PNG for IE8 and below
IE8 and below do not support SVG at all. For some icons, this may not be such an issue – if you use text as well as the icon, IE8 will not show the icon, but a website user will still be able to use the website. And we all hope IE8 will disappear sooner rather than later, so the issue will resolve itself over time.
As a perfectionist, I still wanted to create a fallback with PNG images. Luckily, this is easy for IE9 and below, because you can use conditional comments to specifically target these versions of IE. Just create a separate CSS file for IE8 and below and add this in the <head> section of your HTML (after the “standard” CSS files):
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="iefix.css" />
In iefix.css, you can include your previously used CSS with PNG icons and because iefix.css is included after your regular stylesheet, it will overwrite the styles for IE8 and below.
Fixing IE9, IE10 & IE11
At this point, I thought I was done – IE8 works, and IE9 and above support SVG, right?When I looked at my website in IE10 through BrowserStack imagine my surprise when IE10 completely botched up all SVG icons. They were somehow “squished” in width – as though IE10 was hugging them too hard.
The solution was to manually edit the SVG files and add width and height attributes to the <svg> element – sounds unpleasant and unnecessary when every other browser can handle your SVG icons? Well, that’s Internet Explorer for you. So in my SVG files, instead of
<svg viewBox="0 0 300 300">
I had to change it to
<svg viewBox="0 0 300 300" width="300" height="300">
After that, it worked for IE9, IE10 and IE11.
SVG icons – where to find them
It is easy to praise SVG icons, but if you have been using PNG icons until now you probably have to find new icons – you cannot easily convert PNG icons to SVG, because they will not look as great and scale as well. Additionally, they will be larger in size than “native” SVG icons in most of the cases.
Fortunately, a lot of SVG icons have been created in the last years and are available to you – chances are they will even look a lot better than your previous icons. I used flaticon.com: They have a large selection of different SVG icons to choose from. I have no affiliation with them – I just like their service.
Logos can usually be converted to SVG quite easily if they are already in another vector format. You just need the right software (like the Adobe products) to convert your logos to SVG.
Optimizing SVG file size
Because the contents of a SVG file is basically HTML, there is usually a lot of “clutter” in the file and a lot of potential to optimize it. This is where SVGOMG comes in, an online GUI for SVGO, which is an optimizer for SVG files.
SVGOMG makes it very easy to optimize your SVG icons – just drag and drop the SVG files in the website application and SVGOMG shows you how much it can be optimized, allows you to toggle some settings and download the optimized SVG files. Usually you can save between 30% and 80% in file size!
Results – file sizes and resolutions
Most small icons I ended up replacing are now between 300 bytes and 1KB in size – not a lot for sleek resizeable SVG icons. The category icons on adlershop.ch were a bit more tricky, they needed to be displayed in 32×32 and convey the contents of a whole category, so they are more detailed and therefore a bit larger in file size. Here are the results for different resolutions for all 7 category icons:
As you can see “non-retina” devices actually need to download more now – 18KB instead of 14KB before. This is not unusual, because PNG handles small icons very efficiently. But the advantage goes to SVG for larger resolutions.
The comparison is not perfect anyway – the PNG icons are not the same as the new SVG icons. I converted the new SVG icons to PNG for the 32×32 resolutions for IE8 and below, and combined they are only 10KB in size. So be prepared to gain some size in some instances, but the large number of high-res devices used by many website visitors makes up for it – in the long run SVG will win by a landslide and look a lot better than their PNG versions.
Most websites already have a mobile usage of 50% or more – so I would recommend to switch to SVG sooner rather than later, because your mobile users will save bandwidth and experience a nicer looking website.