SVG icon system
When I started developing for the web one of the tasks I dreaded the most was the slicing and exporting of all the images needed, particularly icons. I had to create several images for each icon: default, active, hover and disabled state and also specific images for different sizes.
So, when font icons started appearing I was thrilled. Building an icon system was much easier. The browser considers the elements as text which means they can be resized without losing quality and changing their attributes via CSS was a big improvement on my work process.
For a while now I’ve been reading about SVG icon systems and when I got a chance to build a new icon system for our latest project ligaportugal.pt I went straight to SVG.
Some of the advantages are obvious:
- SVGs are actual vector images and you have an extended CSS control of each group and path of the SVG;
- Also, one of the most frustrating things of dealing with font icons is alignment: line-height, vertical-align and the space around the element can give you a headache when you’re trying to align an icon.
- Inline SVGs are their own element, unlike font icons which are built via a pseudo element on an empty <span> or <i>
The only catch with inline SVGs is if you want to support Internet Explorer (IE) 8 and under. It wasn’t a problem for us, we had already decided on IE9+ so all good to go.
We designed the icons in Sketch and optimised them with Jake Archibald’s SVGOMG, which is an GUI based on SVG Optimizer a tool that removes all the redundant and useless data that’s usually attached to an exported SVG.
We created an SVG file for each icon and the next step was to create a sprite. We could include the actual SVG code in our HTML page and display the icons anywhere on the page by referencing them using the SVG <use> element, but we decided to reference it externally.
<svg class="twitter-icon">
<use xlink:href="path/to/sprite.svg#twitter-icon"></use>
<svg>I had already bookmarked Una Kravet’s SVG Icon System Boilerplate which made my life much easier. Just run gulp and you’ll have an SVG sprite and a very handy reference page. The only problem (again) is that IE does not support externally referenced svg links, but fortunately Una had already included the solution:
Internet Explorer up to version 11 doesn’t support external sprites for use with inline SVG. For IE 9–11, you may polyfill this functionality with SVG for Everybody.
I’m really happy with our decision. The icons look great on a retina screen and the ability to resize, change fill and stroke is amazing. Here’s an example of the match report page:
What’s your stand on SVG icon systems? Do you feel they’re a superior system? Let us know!
