SVG icons and grunt

When it comes to interface elements, modern browsers rely much less on images than they used to. CSS is capable of replicating the button stylings and basic backgrounds which used to have to be served as images. And while CSS is capable of rendering icons, doing so requires an in-depth knowledge of CSS and some time to put together. Enter the SVG.

SVGs or Scalable Vector Graphics are vector graphics stored in an XML format which can be read by the browser. SVGs have a very small file size especially when minified and gzipped*. By using SVGs over images, we ensure that icons can be scaled almost limitlessly as the browser has access to the paths which comprise the icon. Additionally, by applying css class to an SVG element, the colour can be modified without the need for multiple images or a spritesheet with colourized versions of the icon.

Having said that, spritesheets are still a good idea. As the application becomes more and more complex, the number of icons will steadily increase. Each requiring an http request to be sent when a new user visits the application and increasing load time and reducing performance. This is another task which can be automated by use of Grunt and the grunt-svgstore package which concatenates multiple SVG files into a single file and assigning each SVG declaration an ID based on its original file name which can then be used to reference it from the HTML.

*Minification is the process of removing any unnecessary whitespace or redundant special characters from a text file to make it smaller and gzip compresses responses before sending them to the browser decreasing the size by up to 90%.