Power of Scalable Vector Graphic (SVG) Sprites on User Experience
Published: OptimizationsScalable Vector Graphic (SVG) allows us to create icons in a file format that is resolution independent, which is awesome, but due to the limitations of the HTTP protocol we don't want to make another file request for every icon in our website. Thats when we combine the power of SVG with sprites.
In order to avoid having to make a separate request for each icon we can go back to our old friend the sprite, except this time in SVG. To create a sprite in SVG we use the
Inside of the symbol tag we can also add additional elements for accessibility, such as the title and desc tags. We create our icons inside of a defs tag in order to define them for later use and to ensure they're not output onto the page.
There are a number of ways you can create sprites in SVG. They can be created using vector software – such as Adobe Illustrator CC(opens in new tab) or Sketch – by simply placing the icons onto an art board and exporting the file as an SVG. However, the code they produce needs some editing in order to use as an icon system. Another way is to create an icon system manually.
This isn't too difficult and you have complete control over the markup. SVG sprites can also be incorporated into build systems like gulp or grunt, whereby you choose a folder containing SVG files and configure the build to output a single SVG sprite. For complete guide, see Creative Blog.