Sprite in SVG 4

index.html

<header>
	<hgroup>
		<h1>Sprite SVG</h1>
		<h2>One svg file, many differents bg images and sizes to reuse</h2>
	</hgroup>	
</header>

<main>
	<div class="ico-graviola">I'm so big...</div>
	<div class="ico-graviola-sm" title="I'm small!"></div>
	<div class="ico-graviola-md" title="I'm medium!"></div>
	<div class="ico-graviola-xl" title="I'm large!"></div>
	<div class="ico-goji">I'm also big</div>
	<div class="ico-goji-sm" title="I'm small!"></div>
	<div class="ico-goji-md" title="I'm medium!"></div>
	<div class="ico-goji-xl" title="I'm large!"></div>
	<div class="ico-cacaocriollo"></div>
	<div class="ico-cacaocriollo-sm" title="I'm a tinny icon!"></div>
	<div class="ico-chlorella" title="I'm a tinny icon!"></div>
	<div class="ico-chlorella-sm" title="I'm a tinny icon!"></div>
	<div class="ico-chia"></div>
	<div class="ico-chia-sm" title="I'm a tinny icon!"></div>
	<div class="ico-chia-md" title="I'm a tinny icon!"></div>
	<div class="ico-chia-xl" title="I'm a tinny icon!"></div>
	<div class="ico-amaranto" title="I'm a tinny icon!"></div>
	<div class="ico-amaranto-sm" title="I'm a tinny icon!"></div>
	<div class="ico-amaranto-md"></div>
	<div class="ico-amaranto-xl"></div>
	<div class="ico-spiroulina"></div>
	<div class="ico-spiroulina-sm" title="I'm a tinny icon!"></div>
	<div class="ico-spiroulina-md"></div>
	<div class="ico-spiroulina-xl"></div>
	<div class="ico-camucamu"></div>
	<div class="ico-camucamu-sm" title="I'm a tinny icon!"></div>
	<div class="ico-camucamu-md"></div>
	<div class="ico-camucamu-xl"></div>
	<div class="ico-canamo"></div>
	<div class="ico-canamo-sm" title="I'm a tinny icon!"></div>
	<div class="ico-canamo-md"></div>
	<div class="ico-canamo-xl"></div>
	<div class="ico-lucuma"></div>	
	<div class="ico-lucuma-sm" title="I'm a tinny icon!"></div>
	<div class="ico-lucuma-md"></div>
	<div class="ico-lucuma-xl"></div>
	<div class="ico-maca"></div>
	<div class="ico-maca-sm" title="I'm a tinny icon!"></div>
	<div class="ico-maca-md"></div>
	<div class="ico-maca-xl"></div>
	<div class="ico-stevia"></div>
	<div class="ico-stevia-sm" title="I'm a tinny icon!"></div>
	<div class="ico-stevia-md"></div>
	<div class="ico-stevia-xl"></div>
	<div class="ico-quinoa"></div>
	<div class="ico-quinoa-sm" title="I'm a tinny icon!"></div>
	<div class="ico-alfalfa"></div>
	<div class="ico-alfalfa-sm" title="I'm a tinny icon!"></div>
	<div class="ico-alfalfa-md"></div>
	<div class="ico-alfalfa-xl"></div>
	<div class="ico-trigoverde"></div>
	<div class="ico-trigoverde-sm" title="I'm a tinny icon!"></div>
	<div class="ico-trigoverde-md"></div>
	<div class="ico-trigoverde-xl"></div>
	<div class="ico-algarroba"></div>
	<div class="ico-algarroba-sm" title="I'm a tinny icon!"></div>
	<div class="ico-cardomariano"></div>
	<div class="ico-cardomariano-sm" title="I'm a tinny icon!"></div>
	<div class="ico-cardomariano-md"></div>
	<div class="ico-cardomariano-xl"></div>
	<div class="ico-linodorado"></div>
	<div class="ico-linodorado-sm" title="I'm a tinny icon!"></div>
	<div class="ico-fresa"></div>
	<div class="ico-fresa-sm" title="I'm a tinny icon!"></div>
	<div class="ico-fresa-md"></div>
	<div class="ico-fresa-xl"></div>
	<div class="ico-coco"></div>
	<div class="ico-coco-sm" title="I'm a tinny icon!"></div>
	<div class="ico-coco-md"></div>
	<div class="ico-coco-xl"></div>
	<div class="ico-gymtonic"></div>
	<div class="ico-gymtonic-sm" title="I'm a tinny icon!"></div>
	<div class="ico-delifiber"></div>
	<div class="ico-delifiber-sm" title="I'm a tinny icon!"></div>
	<div class="ico-brainshake"></div>
	<div class="ico-brainshake-sm" title="I'm a tinny icon!"></div>
	<div class="ico-andeanprotein"></div>
	<div class="ico-andeanprotein-sm" title="I'm a tinny icon!"></div>
	<div class="ico-macuchino"></div>
	<div class="ico-macuchino-sm" title="I'm a tinny icon!"></div>
	<div class="ico-macuchino-md"></div>
	<div class="ico-macuchino-xl"></div>
	<div class="ico-bodtox"></div>
	<div class="ico-bodtox-sm" title="I'm a tinny icon!"></div>
	<div class="ico-bodtox-md"></div>
	<div class="ico-royalbreakfast"></div>
	<div class="ico-royalbreakfast-sm" title="I'm a tinny icon!"></div>
	<div class="ico-royalbreakfast-md"></div>
	<div class="ico-royalbreakfast-xl"></div>
	<div class="ico-camucao"></div>
	<div class="ico-camucao-sm" title="I'm a tinny icon!"></div>
	<div class="ico-camucao-md"></div>
	<div class="ico-camucao-xl"></div>
</main>

<footer>
	<small>Developed by Sergio Forés in <a class="btn" href="http://energyfruits.es"> energyfruits.es</a> web site</small>
</footer>

Sprite-in-SVG-4.markdown

Sprite in SVG 4

Only one request, many bg images

A Pen by Sergio Forés on CodePen.

License.

style.scss

$seconds: 1s;
$image-path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/';

$brand_names: graviola goji cacaocriollo chlorella chia amaranto spiroulina camucamu canamo maca lucuma stevia quinoa alfalfa trigoverde algarroba cardomariano linodorado fresa coco gymtonic delifiber brainshake andeanprotein macuchino bodtox royalbreakfast camucao;

// Brand colors
$color_graviola: rgb(127,116,76); 
$color_goji: rgb(230,25,11); 
$color_cacaocriollo: rgb(60,29,29); 
$color_chlorella: rgb(30,19,16); 
$color_chia: rgb(140,126,115); 
$color_amaranto: rgb(177,35,101);
$color_spiroulina: rgb(46,56,40);
$color_camucamu: rgb(101,51,60);
$color_canamo: rgb(0,144,77);
$color_maca: rgb(171,69,108);
$color_lucuma: rgb(245,176,6);
$color_stevia: rgb(0,123,74);
$color_quinoa: rgb(194,41,49);
$color_alfalfa: rgb(38,136,112);
$color_trigoverde: rgb(74,121,47);
$color_algarroba: rgb(31,20,16);
$color_cardomariano: rgb(166,120,174);
$color_linodorado: rgb(222,197,67); 
$color_fresa: rgb(226,56,3);
$color_coco: rgb(129,77,35);
$color_gymtonic: rgb(192,4,17);
$color_delifiber: rgb(239,214,0);
$color_brainshake: rgb(217,145,0);
$color_andeanprotein: rgb(58,99,36);
$color_macuchino: rgb(176,135,66);
$color_bodtox: rgb(163,189,49);
$color_royalbreakfast: rgb(113,22,17);
$color_camucao: rgb(139,59,29);

// Brand Colors
$brand_colors: $color_graviola $color_goji $color_cacaocriollo $color_chlorella $color_chia $color_amaranto $color_spiroulina $color_camucamu $color_canamo $color_maca $color_lucuma $color_stevia $color_quinoa $color_alfalfa $color_trigoverde $color_algarroba $color_cardomariano $color_linodorado $color_fresa $color_coco  $color_gymtonic $color_delifiber $color_brainshake $color_andeanprotein $color_macuchino $color_bodtox $color_royalbreakfast $color_camucao;

// Posicion en el Sprite
$graviola:  0; 
$goji: -400;
$cacaocriollo: -800;
$chlorella: -1200;
$chia: -1600;
$amaranto: -2000;
$spiroulina: -2400;
$camucamu: -2800;
$canamo: -3200;
$maca: -3600;
$lucuma: -4000;
$stevia: -4400;
$quinoa: -4800;
$alfalfa: -5200;
$trigoverde: -5600;
$algarroba: -6000;
$cardomariano: -6400;
$linodorado: -6800;
$fresa: -7200;
$coco: -7600;
$gymtonic: -8000;
$delifiber: -8400;
$brainshake: -8800;
$andeanprotein: -9200;
$macuchino: -9600;
$bodtox: -10000;
$royalbreakfast: -10400; 
$camucao: -10800;

$sprite_position: $graviola $goji $cacaocriollo $chlorella $chia $amaranto $spiroulina $camucamu $canamo $maca $lucuma $stevia $quinoa $alfalfa $trigoverde $algarroba $cardomariano $linodorado $fresa $coco $gymtonic $delifiber $brainshake $andeanprotein $macuchino $bodtox $royalbreakfast $camucao;

// Asigna el elemento del sprite a cada una de las clases de la lista
@each $name in $brand_names {
	
	$i: index($brand_names, $name);
	$elcolor: nth($brand_colors, $i);
	
	@each $tamano, $size in (sm: 10, md: 15, xl: 30) {
	
		.ico-#{$name}, .ico-#{$name}-#{$tamano}:before {
			background-image: url(#{$image-path}sprites.svg);
			background-repeat: no-repeat;
			background-position: center (nth($sprite_position, $i) / 92) + em;
			height: 4em;
			background-size: 10em;
		}
			.ico-#{$name} {
				width: 100%;
				font-size: 50px;
				line-height: 5;
				background-color: lighten($elcolor,5);
				&:hover {
					transition: all 1s;
					background-color: darken($elcolor,10);
					background-position: 2em (nth($sprite_position, $i) / 92) + em;
				}
			}			

			.ico-#{$name}-#{$tamano} {
				position: relative;
				font-size: #{$size}px;
    		}
				.ico-#{$name}-xl { top: -1em; }
				.ico-#{$name}-md { left: 70%; }

			.ico-#{$name}-#{$tamano}:before {
				content: "";
				position: absolute;
				top: -5em;
				left: 0;
				right: 0;
				width: 10em;
				text-align: right;
			}

			.ico-#{$name}-#{$tamano}:after {
				content: attr(title);
				position: absolute;
				top: -4em;
				left: 5em;
			}
	}
}

body {
	padding: 0 20px;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
}
.exemple {
	background-color: red;
	width: 350px;
}
h1 { font-size: 300%; }
h2 { font-size: 200%; }
small { font-size: 100%; }
main {
	flex-direction: column;
	justify-content: center;
}
main, header, footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 25px 0;
}