The world has moved on from the days when raster image files were the best format for icons in web projects. In part one of this series I looked at Icon Fonts. SVG icons outperform Icon Fonts in almost every respect.
In this post I show you the markup for basic SVG icons. I demonstrate how to manipulate the SVGs at run time to change the colours of the whole icon, or its component parts. If you are already reaping the benefits of SVG you will probably want to consider fallbacks for older browsers and automation for efficiency.
SVG > Icon Fonts
Icon fonts were a significant improvement over using raster images. However SVGs are even better than Icon Fonts for a number of reasons. SVG are not treated as text, so don’t suffer from anti-aliasing. SVG icons allow you to control their appearance in more detail, for example programmatically changing the colour of just one part of an icon, or changing the stroke width. Icon fonts can fail because they aren’t loaded or are blocked or overwritten by the user’s browser settings.
The main advantage Icon Fonts have over SVG is that their backwards compatibility. Icon Fonts are even supported by IE6, whereas SVG isn’t supported until IE9. This shouldn’t be an issue as I discuss SVG fallbacks for older browsers later. So you have lots of reasons to use SVG icons right now.
What is SVG
SVG is short for Scalable Vector Graphic. Whereas a raster image file like a jpg, or gif stores data on the colours of each pixel, SVG mathematically describes the angles and curves in the image. This means SVGs can be scaled well and dynamically altered, for example changing the colour or shape. You can export SVG from Adobe Illustrator.
Where do I get SVG icons?
One of the conveniences of Icon Fonts like Font Awesome is that the icons are already made for you. For SVGs I suggest you check out The Noun Project. It is searchable icon repository and has lots of options for common icons. Its indexing is sophisticated, so you can easily find icons for concepts like ‘tall’ or even ‘monk’. Their icons can be used commercially if you have a paid account or credit the icon’s creator. You can download icons in the SVG format ready to use straight away.
Basic SVG usage
Adding a SVG icon to your HTML page can be very simple. This example of Inline SVG shows the SVG code added directly into the body tag. The disadvantage of this method is that it bloats your HTML page making it harder to read as you are writing it. An easy way around this is to refer to the SVG image file in your CSS. This example demonstrates using CSS to link to an SVG file.
A third method is to use a data URI. This has the advantage of not requiring a separate HTTP request for each icon. Here is an example of adding an SVG with a CSS data URI. You can use data URIs to add SVGs inline. You may want to consider using an SVG optimiser but you probably don’t want use base64 data URI SVG.
Dynamically editing SVGs
A great feature of inline SVGs is that they can be modified dynamically at runtime. This example shows changing the SVG icon colour dynamically. The disadvantage of this method is the inline SVG code making our SVG file less readable. If you are using a server side language to generate your pages this isn’t an issue as you can inject the contents of the file. For example in PHP you might use:
<?php echo file_get_contents("icon-noun_944442.svg"); ?>
Editing parts of the SVG independently
Changing the colour of an SVG dynamically is useful, but you can do this with an Icon Font too. Where SVG really comes into its own is that you can manipulate separate parts of an SVG. That example is quite straightforward, but you can easily take this idea further as this colouring book shows. These examples both use IDs in the SVG. You can simply set IDs in Adobe Illustrator, by making a group and naming it in the layers panel.
You can then export the SVG from illustrator. When you open the file in your code editor you will be able to find the ID you created
Fallbacks for older browsers
SVG is available from IE9, but you may well need to support legacy browsers. You can use Modernizr to detect SVG support and fallback to a PNG if required. You can also use this approach to give PNG fallback for CSS SVGs.
Exporting every SVG as a PNG and hand coding a fallback would be a drag. Alleviate this pain by using an automation tool.
Grumpicon is straightforward web based SVG automation tool. It lets you download a boilerplate set of files, with your SVGs converted to data URIs and added in the CSS. This is similar to the data URI example we looked at earlier. If the user’s browser has no JS or no SVG support then fallback pngs are used. If you like the look of this, take a more detailed look at a Grumpicon workflow.
If you are comfortable using Grunt then you will find Grunticon fits into your processes even more effectively than Grumpicon.
You can set up a grunt watch task to be triggered whenever you add an SVG to a watched folder. This would call your Grunticon task is which would update the CSS files with the new data URIs and generates the fallback PNGs.