SVG Stacks

SVG Stacks

svg .icon { display: none }
svg .icon:target { display: inline }
							

<svg viewBox="0 0 32 28">
  <g id="stack" class="icon">
    <polygon points="0,20 16,24 32,20 32,24 16,28 0,24"/>
    <polygon points="0,12 16,16 32,12 32,16 16,20 0,16"/>
    <polygon points="0,4 16,0 32,4 32,8 16,12 0,8"/>
  </g>
</svg>
						

Pros and cons

• Supports colors, animation, filters etc
• Combine with CSS media-queries for LOD
• Easy to read and write
• Fewer HTTP requests
• Resolution-independence (retina screens ♥)
• Not yet widely supported in CSS backgrounds

Level of detail

#hours {
  fill: none;
  stroke: #850508;
  stroke-dasharray: 1, 5.28;
  stroke-dashoffset: 0.5;
  stroke-width: 1.5px;
}
@media screen and (max-width: 128px) {
  #hours {
    stroke-dasharray: 1, 17.84;
    stroke-width: 2px;
  }
}
@media screen and (max-width: 64px) {
  #hours {
    stroke-dasharray: none;
  }
}
						

How to use

• Editing by hand is easy
• Automated: SVG-Stacker

Support for SVG stacks

• Works in <iframe>, <object>, <embed> and <img>
• ...but not yet crossbrowser in CSS backgrounds