SVG stacks

Pictures with sprites are used uncontrollably to download a mass of icons and interface elements all at once, with a single HTTP request. However, they are somewhat burdensome to use, since you have to count shifts and set them in the background-position. It will not be possible to add, remove or rearrange the sprites without such recounting. Or resize the sprite without stumbling on its neighbor from the side.

How can I fix this problem? Well, put all the sprites on each other , turn off their visibility, then show only the one that is needed. I wish it was possible ... and I have been wanting for a long time ... and then this is what happened (read bottom-up):


')
Oh, good! And it works in Firefox . The same opportunity is planned to be added to the Opera : the “CORE-37596” bug (I could not find a public hyperlink leading to it). There are alternatives to SVG stacks that are better supported by browsers: embed, iframe, object or img elements - but I still prefer background images because it is easier to change their size and position. So let's hope that other browsers will add support for SVG stacks .

So how does the SVG stack work? In fact, quite simple. Look at the source code of the SVG file of Eric .



First, we give each of our icons in the SVG file a unique ID , but one and the same class , then add CSS code that hides all the icons, but shows the one that is selected as a consequence : target . And now we can use the anchor part in the URL to transfer the ID to the SVG file, like “background: url (icon.svg # ID )”.

Many thanks to @erikdahlstrom for developing this technique.