Using SVG Sprites to Reduce Load Time

Using-SVG-Sprite

Main objective of this post to give you the best example of How to work with SVG Sprites to Reduce Load Time

Compatibility: IE9+

It’s an excellent way to handle images (mostly icons or similar). IMO, Its a superior way than using the icon fonts. This method also includes scaling and coloring of icons without using a different image file. But, Before I start with SVG Sprites and how to use it, I want to give a quick brief about Image Sprite & SVG.

Image Sprite

An image sprite is a logical group of multiple images put together as a single image. Using a single image instead multiple helps reduce the number of server requests and save bandwidth. With CSS we can show needed part of the sprite. I have included a quick example.

Image Used:

img_navsprites

 

<!DOCTYPE html>
<html>
	<head>
		<style>
			#home {
            	display: inline-block;
    			width: 46px;
    			height: 44px;
    			background: url("img_navsprites.gif") 0 0;
			}
		</style>
	</head>
	<body>
		<span id="home"></span>
	</body>
</html>

SVG Image

SVG stands for Scalable Vector Graphics. Its a format of vector image based on XML. Because they are scalable and don’t lose quality like rasterized images, we can use the same image for different dimension without the need for multiple images. It is also helpful for the sites which use same icon/image in various colors.

PRO TIP  SVGs are also great as a replacement of 2x sized images for the higher device-pixel-ratio.

Combining the power of Image Sprites and SVG gives us SVG Sprites. As we now know using SVG reduce the need for extra images for dimensions and color on top of that with sprites we further reduce the server request for multiple images. Let’s start with creating the SVG Sprite

Creating SVG Sprite

It is so simple that you can manually do it. Here is how you should do it.

1. Open the .svg files with any text editor one by one (I prefer Sublime Text).

svglist

2. You will see some code like below for each SVG file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve">
	<g>
		<path d="M10.1,55.1l38-31.7c1.1-0.9,2.6-0.9,3.7,0L76,43.5v36.6c0,1.6-1.3,2.9-2.9,2.9H44l0-23.2c0-0.2,0.2-0.6,0.4-0.8h11.1   c0.2,0.2,0.4,0.6,0.4,0.8V75c0,2.2,1.8,4,4,4s4-1.8,4-4V59.8c0-4.2-3.4-8.8-8-8.8H44c-4.6,0-8,4.7-8,8.8V83h-9.1   c-1.6,0-2.9-1.3-2.9-2.9V57c0-2.2-1.8-4-4-4s-4,1.8-4,4v23.1c0,6,4.9,10.9,10.9,10.9h46.2c6,0,10.9-4.9,10.9-10.9V50.2l5.9,4.9   c0.7,0.6,1.7,0.9,2.6,0.9c1.1,0,2.3-0.5,3.1-1.4c1.4-1.7,1.2-4.2-0.5-5.6L57,17.2c-4-3.4-9.9-3.4-14,0L5,48.9   c-1.7,1.4-1.9,3.9-0.5,5.6C5.9,56.3,8.4,56.5,10.1,55.1z"/>
	</g>
</svg>

The part of the code which you should copy shape(s), path(s) or whatever inside g tag here or in some case inside symbol tag.

3. Create a file svg-sprite.svg or something similar with following code template:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <defs>
    <symbol id="symbol-1" viewBox="0 0 100 100">
      <!-- content copied from svg file (paths, shapes or anything for this icon) -->
    </symbol>
    <symbol id="symbol-2" viewBox="0 0 100 100">
      <!-- content copied from svg file (paths, shapes or anything for this icon) -->
    </symbol>
    <!-- more -->
  </defs>
</svg>

Notes:

1

Every symbol will contain the content of only one file.

2

id in the symbol will be used to show the icon wherever needed.

3

viewBox is a list of four numbers min-x, min-y, width and height which bounds the given element.

4. Use the content from your each SVG files and the final code in the file should look something like this

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <defs>
    <symbol id="home" viewBox="0 0 100 100">
		<path d="M10.1,55.1l38-31.7c1.1-0.9,2.6-0.9,3.7,0L76,43.5v36.6c0,1.6-1.3,2.9-2.9,2.9H44l0-23.2c0-0.2,0.2-0.6,0.4-0.8h11.1   c0.2,0.2,0.4,0.6,0.4,0.8V75c0,2.2,1.8,4,4,4s4-1.8,4-4V59.8c0-4.2-3.4-8.8-8-8.8H44c-4.6,0-8,4.7-8,8.8V83h-9.1   c-1.6,0-2.9-1.3-2.9-2.9V57c0-2.2-1.8-4-4-4s-4,1.8-4,4v23.1c0,6,4.9,10.9,10.9,10.9h46.2c6,0,10.9-4.9,10.9-10.9V50.2l5.9,4.9   c0.7,0.6,1.7,0.9,2.6,0.9c1.1,0,2.3-0.5,3.1-1.4c1.4-1.7,1.2-4.2-0.5-5.6L57,17.2c-4-3.4-9.9-3.4-14,0L5,48.9   c-1.7,1.4-1.9,3.9-0.5,5.6C5.9,56.3,8.4,56.5,10.1,55.1z"/>
    </symbol>
    <symbol id="left" viewBox="0 0 100 100">
      <polygon points="59.9,68 48.9,57 77.9,57 77.9,43 48.9,43 59.9,32 50,22.1 22.1,50 50,77.9 "/>
    </symbol>
    <symbol id="right" viewBox="0 0 100 100">
    	<polygon points="40.1,32 51.1,43 22.1,43 22.1,57 51.1,57 40.1,68 50,77.9 77.9,50 50,22.1 "/>
    </symbol>
  </defs>
</svg>

You can alternatively use this NPM module svg-sprite

Yay! SVG Sprite is completed now and ready to be used anywhere in your web page. Now, its time to know how to use it.

Using SVG Sprite

1. You need to put your SVG Sprite code at the top of your HTML Document. Including the example to do it in php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SVG Sprites</title>
</head>
<body>
	<?php include_once("svg-sprite.svg"); ?>
	<!-- rest of the document -->
</body>
</html>

Remember you need to inject this code at the top of the document. Also, you can use any language you want or just copy paste the final content of your sprite file.

2. To show the icon wherever you need to use the following code:

<svg class="icon"><use xlink:href="#left" /></svg>

3. Additionally, you can use the CSS to style them, change color or even size

.icon{
  fill: red;
  width: 50px;
  height: 50px;
}

I have put together all the code and hosted it on JSBIN JS Bin – Collaborative JavaScript Debuging

Rohit Agrawal is a Head of UI/UX at MySmartPrice Web Technology Pvt Ltd. He is passionate about new technologies and engages himself in constant research of design trends. He believes in learning from everyone and everywhere.