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!
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!
By way of example I will illustrate the code with these four social media icons.
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
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:
UPDATE #1: Read more about the latest support activity within WebKit (Chromium Issue #128055)
@simurai background: image(foo.svg#bar) should work IIRC from the discussions, and is what you’d expect background: url(foo.svg#bar) to be
— Erik Dahlström (@erikdahlstrom) March 4, 2013
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.
Access (read & write)
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:
If there is one, it will be overwritten without an alert!
Got stuck with this? » Download stacked demo file (.svg.zip)
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:
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*
(You will probably use them already on your site…)
So your HTML structure may look like this:
And finally the script to check whether to display the SVG or the fallback image:
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!).
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 the complete source files of the demo site in one single folder (.zip)
Wait, there is even more…
Michael Schieben also sent me this link which is totally worth reading:
- SVG CSS Injection (A Different Approach Towards SVG Rendering)
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!