How to create SVGs with layers for the web.

README.md

SVG Stacking

Full tutorial: http://hofmannsven.com/2013/laboratory/svg-stacking/

Demo (with a div): http://hofmannsven.com/demo/svg-stacking/

Demo (with a background image): http://hofmannsven.com/demo/svg-stacks/background/

custom_script.js

(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);

div.html

<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>

execute

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

image.svg

img.html

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

load_scripts.html

<!-- Loading jQuery -->
<script src="js/jquery.js"></script>
<!-- Loading SVG Stack Fix for WebKit Browsers -->
<script src="js/fixsvgstack.js"></script>
<!-- Loading Modernizr (only the SVG Browser Support) -->
<script src="js/modernizr.svg.js"></script>

new_image.svg

stack.xslt

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:svg="http://www.w3.org/2000/svg">
	<xsl:template match="/svg:svg">
		<xsl:copy>
			<svg:style type="text/css">
				<![CDATA[
					.i {display:none;}
					.i:target {display:block;}
				]]>
			</svg:style>
			<xsl:apply-templates />	
		</xsl:copy>
	</xsl:template>
	<xsl:template match="/svg:svg/svg:g">
		<svg:svg class="i">
			<xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
			<xsl:copy-of select="/svg:svg/@width" />
			<xsl:copy-of select="/svg:svg/@height" />
			<xsl:copy-of select="/svg:svg/@viewBox" />
			<xsl:apply-templates select="@*|node()"/>
		</svg:svg>
	</xsl:template>
	<xsl:template match="comment()" />
	<xsl:template match="@*|node()">
		<xsl:copy>
			<xsl:apply-templates select="@*|*" />
		</xsl:copy>
	</xsl:template>
</xsl:stylesheet>

stacking.css

.i { 
  display: none;
}
.i:target { 
  display: block; 
}

Hello -

This looks like it might be what I need for my project, but the demo links are broken. Any chance on an update?

Thanks!