Le temps des sprites en CSS est révolu ! Ou tout du moins, il le sera peut-être prochainement grâce au SVG. Outre les avantages propres au format vectoriel qu’offrent SVG, ils ont aussi la particularité d’être empilables. Cela signifie qu’il peut posséder plusieurs couches contenant chacune une image pouvant être utilisée de manière totalement indépendante.

Comment cela fonctionne-t-il en pratique ? Chaque couche possède un identifiant qu’il faut renseigner lors de l’insertion de l’image, comme suit:

<img alt="" src="images/sprite.svg#identifiant-de-l-image" />

ou en CSS:

.icon.share {
background: url( 'images/sprite.svg#identifiant-de-l-image' );
}

Comment empile-t-on des SVG ? Deux manières possibles:
– Avec Illustrator comme l’explique cet article: http://hofmannsven.com/2013/laboratory/svg-stacking/
– Avec SVG Stacker (https://github.com/preciousforever/SVG-Stacker) un projet open source permettant d’empiler des SVG provenant de différentes sources.