In Implementing a vector icon sprite system I discussed how we moved away from bitmap sprites and moved to an SVG icon sprite system. This involved creating a single svg file containing many symbols which are then referenced in the markup by id. The SVG is inlined at the head of the page (removing a http request) and we have full control over the resulting icons. Using CSS we can display it at any size or colour and can add css transition hover effects. It is even possible to art-direct the icon – changing the colour of individual elements or showing different parts of the icon at different screen sizes.
This workflow requires adding markup for each sprite on the page:
This gives us good opportunity for adding accessibility features such as descriptions and titles. Adding this markup in the page for every instance of the icon can affect page weight. While this can be negated with GZIP compression it does feel a bit heavy handed when an icon is repeated many times on a page. Sometimes it is nice to be able to define a class in the CSS and just have it output an image in the front end whenever you need it on an element.
In one of our recent campaign pages we needed a simple flow chart to show the customer journey through our custom CRM. The markup was a simple unorderd list and we wanted an arrow to appear after each item. The icon wasn’t essential to the understanding of the document and adding it as markup to each LI item didn’t feel right. An inline CSS SVG seemed the ideal solution.
SVG as CSS background image
Adding an SVG as a background image is as simple as:
Support for ie9 up is great and is relatively easy to position / size. It does result in an additional HTTP request (even HTTP requests for small files can have an impact on page performance) and there isn’t an easy way to colour the SVG (without using complicated masks).
Saving time with Sass Functions
As the vector images are just a set of point declarations the filesize is very small, this allows us to inline the SVG code directly into the CSS. To work in css the SVG code needs to be converted to a data URI, there are online convertors which are useful, we instead decided to use the power of Sass to pre-process the SVG input into a Data URI output. This is done through a series of helper functions:
For our down arrow SVG we need to take our SVG code and run it through the processors. CSS data uri SVGs can’t be coloured by CSS, the colour needs to be baked into the SVG itself. We can do this by adding a colour parameter to our SVG function:
Then all we need to add an arrow with the colour of our choice is create it as a variable, pass in our colour, then apply the result as a background image.
This method isn’t perfect, rollovers require switching the background image source, which prevents any fancy transition fades. This could be worked round by adding an additional pseudo element on top of the original and animating the opacity.
We have been using Data URI SVGs a lot recently where images aren’t essential to the page content. The Sass helpers make it easy to implement where needed and the in-lining has a significant impact on page performance.