Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Create SVG-Stacks out of SVG-Images
XSLT
Branch: master
Failed to load latest commit information.
LICENSE.md Update LICENSE.md
README.md Update ReadMe.md
stack.xslt Update stack.xslt

README.md

SVG-Stacking

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!

See the full tutorial on how to use SVG-Stacking: http://hofmannsven.com/2013/laboratory/svg-stacking/

SVG Stacks within an IMG-tag: http://hofmannsven.com/demo/svg-stacking/

SVG Stacks within a Background-Image: http://hofmannsven.com/demo/svg-stacks/background/

Create the vector image

Create an SVG file with more than one layer in an vector graphics editor of your choice.

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

Download and convert

Download the stack.xslt and run the code in your terminal.

If all files (your SVG and the stacker) are on your desktop, you can simply copy and paste the code below:

xsltproc --novalid Desktop/stack.xslt Desktop/demo-stack.svg > Desktop/stacked-demo-stack.svg

Embed the stack

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

<img src="img/stacked-demo-stack.svg#layer" />

Crossbrowser

As we aim to display the stack in all browsers, we will need some JavaScript libraries.

Check out the demo for details: http://hofmannsven.com/demo/svg-stacking/

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!

Idea: http://simurai.com/post/20251013889/svg-stacks

Something went wrong with that request. Please try again.