So you want to reduce page load times, and multiple calls to images? SVG stacking is where it’s at.

This responsive, lightweight image format allows for easy, multiple images calls from the same small file without creating a massive sprite map. And, as we know, sprite maps can become tedious and monstrous to maintain and calculate.

Why use SVG’s?

  • Small file sizes that compress well
  • Scales to any size without losing quality and clarity
  • Works brilliant on retina displays

To create an SVG stack, firstly create a new document in illustrator, add your vector and name the layer something memorable. e.g ‘webdesign

SVG Stacking

Name the layer something memorable

Once the first image is in, you can then add the remaining images on top, repeating the initial process.  Your file should look similar to below: 

SVG Stacking

It looks messy, but works a dream

To save the document, instead of exporting, you will use 'Save As' and ensure that CSS Properties is set to ‘Style Attributes’. 

SVG Stacking

Use 'Save As' and not 'Export'

Now that the .svg file has been saved, we need to edit it slightly to ensure we can target each individual image inside.  

To do this, open up the .svg in your prefered code editor. You will be faced with coding that looks similar to the following: 

SVG Stacking


Firstly, every 'g id' needs to have a class=”icon” added to it. Once you have done this, at the top of the code, add in the following:

		.icon {
			display: none;
		.icon:target {
			display: inline;
		rect, line {
			shape-rendering: crispEdges;

Place this code just below the end of the svg version line. This code hides all icons in the file, and only displays the one targeted. 

To call your images on your page, you firstly link to the .svg file, and then # the class you called your image inside illustrator. You can also append a width to the image here. E.g:

<img src="60x60icons.svg#webdesign" width="60px" />
<img src="60x60icons.svg#webdevelopment" width="60px" />
<img src="60x60icons.svg#designandbranding" width="60px" />
<img src="60x60icons.svg#startuppackages" width="60px" />
<img src="60x60icons.svg#mobileapps" width="60px" />
<img src="60x60icons.svg#seoanalytics" width="60px" />

Use media queries to change the file widths and heights on various media without losing any quality or clarity.

And that’s it! One tiny file, and full control over the responsive images it contains.

Ignite your brand, utilise user-generated content no matter where you or your audience are ›