Stacking images on the web is something we all dreamed about.

We know and use this feature already from our graphic editors but once the image has to be online, we automatically scale everything down to the absolute minimum.

Why do we still need to build things like image sprites, to deal with a cluster of icons? It’s really a pain in the ass to deal with it and in particular to edit it later!

How could it be solved? Well, by stacking them all on top of each other, turn off their visibility and only show the one you want.
— via simurai.com, SVG Stacks

Well, here it is: my first image stacking demo with every image in one seperate layer but within the same file. And this is how I got it:

Create the vector image

Create an SVG file with more than one layer in an vector graphics editor of your choice*.
*I am using Adobe Illustrator, but there are a lot of free editors, too!

Sample Image

By way of example I will illustrate the code with these four social media icons.

Social Stack Demo

The vector icons are actually white while lying upon each other (every one in its own layer) within the same file. There will be no difference for colored or even more complex images.

Stacked Social Icons

Social Stacked Layers Make sure that each layer is visible and has a proper name, because special characters (even numbers!) may cause trouble afterwards.

Got stuck with this? » Download demo file (.ai.zip)

Save as SVG

SVG Options Scalable Vector Graphics are having a long history so there are various versions and most of them will work well in the browser. Just pick one version that fits your needs, but make sure that file is as small as possible. You probably will not need the whole range of functions!

Got stuck with this? » Download demo file (.svg.zip)

About the SVG

All layers are now stored in group elements with their name as id, while the whole thing is wrapped up within the SVG tag of the XML.

The code of your SVG will look something like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- 
 Generator: Adobe Illustrator 15.1.0, 
 SVG Export Plug-In . SVG Version: 6.00 Build 0) 
-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 
 version="1.1" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 x="0px" 
 y="0px" 
 width="60px" 
 height="60px" 
 viewBox="0 0 60 60" 
 xml:space="preserve">
 <g id="first">
  <path [...] />
 </g>
 <g id="second">
  <path [...] />
 </g>
 <g id="third">
  <path [...] />
 </g>
</svg>

About stacking

Creating SVG stacks is nothing new and there are a lot of known issues, but there are also fixes out there and that’s why this method is so brilliant. It’s all about the fixes.

UPDATE #1: Read more about the latest support activity within WebKit (Chromium Issue #128055)

UPDATE #2: SVG Stacks is dead; Long live SVG Stacks!

Because we will stick to this idea we will need some CSS to hide all inactive layers while we will need some more CSS to display the active layer via :target. Thank you Erik Dahlström for this technique!

About the stacked SVG

We will now convert every group element (means all layers) to autonomous SVG elements while keeping all the meta data (also look at the namespace!) at its place.
Afterwards we will have a stack of SVGs (everyone with its id) within a single SVG file.

To say it in other words, we are gathering SVGs within one SVG…
…or even short: we are stacking the SVG!

Oh, and while we’re at it right now, we are removing all those stupid generated comments to keep the file size as small as possible.

Download the Stacker

To do exactly this (you can also do this manually, but it is no fun at all), go to my SVG Stacking GitHub Repository and Download the latest version of the stacker.

Fork me on GitHubAccess (read & write)
» https://github.com/hofmannsven/SVG-Stacking.git
Archive (.zip)
» https://github.com/hofmannsven/SVG-Stacking/archive/master.zip

Usage

Open the Terminal and run the code to convert your SVG file.
If all files (your SVG and the stacker) are on your desktop, you can simply copy and paste the code below:

Make sure, that there is no files with the same name as the output file.
If there is one, it will be overwritten without an alert!

Got stuck with this? » Download stacked demo file (.svg.zip)

Embed

To use the stacked SVG, simply add a hash and the name (id) of the layer behind the name of the image.

Embedding it within an image tag may look like this:

<img 
 src="img/stacked-demo-stack.svg#layer" 
 width="60" 
 height="60" 
 alt="SVG Stacked Image" 
/>

This will work so far, but if you have ever used an SVG on the web before, you will know that it is not as easy as using a regular image. There are some more guidelines to display the stacked image cross browser, but for the purpose of the demo that’s it!

Details about embedding*

As we aim to display the images in all browsers, we will need some JavaScript libraries.
(You will probably use them already on your site…)

So your HTML structure may look like this:

<div id="svg">
 <a href="http://hofmannsven.com">
  <!-- Fallback if JavaScript is disabled -->
  <img 
   src="img/fallback-demo-stack.png" 
   width="60" 
   height="60" 
   alt="Fallback for the SVG Stacked Image" 
  />
 </a>
</div>

And finally the script to check whether to display the SVG or the fallback image:

(function($) {
 $(document).ready(function() {
  // Fixing the WebKit Issues
  $('div a').fixSVGStackBackground();
  $('img').fixSVGStack();
 });
 
 if (Modernizr.svg) {
  // Finally we are using the SVG Image via the hash 
  // but only if the browser can handle it...
  $('#svg a').html('<img src="img/stacked-demo-stack.svg#layer" width="60" height="60" alt="SVG Stacked Image" />');
 } else {
  // ...and proving a PNG Image for older browsers!
  $('#svg a').html('<img src="img/fallback-demo-stack.png" width="60" height="60" alt="Fallback for the SVG Stacked Image" />');
 }
})(jQuery);

*Looking for another way to embed your SVG?
Check out this blogpost by David Bushell: A Primer to Front-end SVG Hacking

Demo

That’s it! Take a look at my cross browser demo (only down to IE7, because not even Microsoft is supporting IE6 anymore!).

To sum it all up, there are four layers in my SVG file (one for every icon) with the current icon set to ‘display: block’ and a fallback image for browsers that do not support SVG. The background and hover effects are generated via CSS, as well as the rounded corners (uuups, it’s a CSS3-only feature of course!).

SVG Stacking Demosite

I hope you could follow all those steps and I would really enjoy it, if you let me know if you can use it in one of your projects.

Download

Download the complete source files of the demo site in one single folder (.zip)

UPDATE: The SVG Stack Fix and jQuery are now updated to the latest version.

Wait, there is even more…

If you are already having more than one SVG file you may also try to use the SVG Stacker by Michael Schieben and/or the SVG Optimizer for continuative purposes.

Michael Schieben also sent me this link which is totally worth reading:


Credits are also going to Sacha Berger who helped me a lot with the transforming of the XML via XSLT and Simon for all the inspiration!