├── LICENSE.md
├── stack.xslt
└── README.md


/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright 2014  Sven Hofmann  (email : info@hofmannsven.com)
 2 | 
 3 |     This program is free software; you can redistribute it and/or modify
 4 |     it under the terms of the GNU General Public License, version 3, as 
 5 |     published by the Free Software Foundation.
 6 | 
 7 |     This program is distributed in the hope that it will be useful,
 8 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
 9 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
10 |     GNU General Public License for more details.
11 |     
12 |     http://www.gnu.org/licenses/gpl-3.0.txt
13 | 
14 |     You should have received a copy of the GNU General Public License
15 |     along with this program; if not, write to the Free Software
16 |     Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
17 | 


--------------------------------------------------------------------------------
/stack.xslt:
--------------------------------------------------------------------------------
 1 | <xsl:stylesheet version="1.0"
 2 |   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 3 | 	xmlns:svg="http://www.w3.org/2000/svg">
 4 | 	<xsl:template match="/svg:svg">
 5 | 		<xsl:copy>
 6 | 			<svg:style type="text/css">
 7 | 				<![CDATA[
 8 | 					.i {display:none;}
 9 | 					.i:target {display:block;}
10 | 				]]>
11 | 			</svg:style>
12 | 			<xsl:apply-templates />	
13 | 		</xsl:copy>
14 | 	</xsl:template>
15 | 	<xsl:template match="/svg:svg/svg:g">
16 | 		<svg:svg class="i">
17 | 			<xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
18 | 			<xsl:copy-of select="/svg:svg/@width" />
19 | 			<xsl:copy-of select="/svg:svg/@height" />
20 | 			<xsl:copy-of select="/svg:svg/@viewBox" />
21 | 			<xsl:apply-templates select="@*|node()"/>
22 | 		</svg:svg>
23 | 	</xsl:template>
24 | 	<xsl:template match="comment()" />
25 | 	<xsl:template match="@*|node()">
26 | 		<xsl:copy>
27 | 			<xsl:apply-templates select="@*|*" />
28 | 		</xsl:copy>
29 | 	</xsl:template>
30 | </xsl:stylesheet>
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | SVG-Stacking
 2 | ==========
 3 | 
 4 | Stacking images on the web is something we all dreamed about.
 5 | 
 6 | 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. 
 7 | 
 8 | 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!
 9 | 
10 | See the full tutorial on how to use SVG-Stacking: http://hofmannsven.com/2013/laboratory/svg-stacking/
11 | 
12 | SVG Stacks within an IMG-tag: http://hofmannsven.com/demo/svg-stacking/
13 | 
14 | SVG Stacks within a Background-Image: http://hofmannsven.com/demo/svg-stacks/background/
15 | 
16 | 
17 | 
18 | Create the vector image
19 | -----------
20 | Create an SVG file with more than one layer in an vector graphics editor of your choice.
21 | 
22 | Make sure that each layer is visible and has a proper name, because special characters (even numbers!) may cause trouble afterwards.
23 | 
24 | 
25 | Download and convert
26 | -----------
27 | Download the stack.xslt and run the code in your terminal.
28 | 
29 | If all files (your SVG and the stacker) are on your desktop, you can simply copy and paste the code below:
30 | 
31 | ```
32 | xsltproc --novalid Desktop/stack.xslt Desktop/demo-stack.svg > Desktop/stacked-demo-stack.svg
33 | ```
34 | 
35 | Embed the stack
36 | -----------
37 | To use the stacked SVG, simply add a hash and the name (id) of the layer behind the name of the image.
38 | 
39 | ```
40 | <img src="img/stacked-demo-stack.svg#layer" />
41 | ```
42 | 
43 | Crossbrowser
44 | -----------
45 | As we aim to display the stack in all browsers, we will need some JavaScript libraries.
46 | 
47 | Check out the demo for details: http://hofmannsven.com/demo/svg-stacking/
48 | 
49 | 
50 | 
51 | 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!
52 | 
53 | Idea: http://simurai.com/post/20251013889/svg-stacks
54 | 


--------------------------------------------------------------------------------