SVG a PNG Sprite, zrychlujeme podruhé

Tento článek patří do seriálu Zrychlení webu a dev stack. Ostatní články seriálu:

1. Cachujeme, GZipujeme, zrychlujeme
2. SVG a PNG Sprite, zrychlujeme podruhé
3. Minifikace - zrychlujeme po třetí
4. DataURI - zrychlujeme po čtvrté
5. Webpack lusknutím prstu - Laravel Mix - Alternativa ke Gruntu a Gulpu
6. Fiddler - web debugger
7. Nastavení GZip komprese u souborů s fonty
8. Automatizace s Gruntem - Automatizace ostatních technik ze seriálu
9. Systém SVG ikon s Gulpem

---

Sprite

Technika [sprajtů] se začala využívat v prvních 2D hrách. Tehdy v jednom obrázku byly všechny pohyby postaviček, a s obrázkem se hýbalo podle potřeby. Využívalo se rychlejšího načtení jednoho velkého souboru než několika malých. Ze stejného důvodu se sprite využívá i nyní na webu.

Je to jednoduché, vezmeš všechny ikonky, naskládáš je do jednoho obrázku a máme hotovo. Pak jej nastavíš jako pozadí elementu a jen pozadím hýbeš.

V Google Hangouts na webu (v GMailu a na G+) se smajlíci animují právě pomocí sprite. Výhoda je jasná, animace se dá pustit pozpátku, přeskakovat na různá místa apod.

SVG a PNG sprite

Nevýhoda obrázku je, že má fixní velikost. V dnešní době Retiny a jiných obrazovek s pixel-ratio > 1 se náš sprite zobrazí neostře. Proto na řadu nastupuje SVG. Tento formát dokáže uložit vektory, takže ikonky musíš nakreslit v křivkách!

Nakreslíme všechny ikony, exportujeme do SVG a rovnou i do PNG. To pro prohlížeče, které SVG nepodporují. 

Začínáme!

Detekce podpory SVG

Pro zjištění podpory SVG si stáhneme Modernizr. Javascriptovou knihovnu dělanou pro zjištění podpory všech možných vlastností. Následující kód využívá také knihovnu jQuery.

$(function(){ //po načtení DOM
  if( ! Modernizr.svg ){ // jestliže nepodporuje SVG
    $("body").addClass("no-svg"); //přidáme classu no-svg
  }
});

Použití sprite v CSS

V příkladu jsou 2 způsoby použití, buď budu vkládat pozadí do elementu, nebo využiji pseudo selektor :before, použití se samozřejmě dají kombinovat.

.icon, .beforeIcon:before{
  background: url('sprite.svg') 0px 0px no-repeat;  
  display: inline-block; /* pro možnost nastavit výšku elementu */
  height: 16px; /* určíme si velikost ikon */
  width: 16px; 
}
.beforeIcon:before{
  content: ''; /* nutnost u :before a :after pseudo selectorů */
}
body.no-svg .icon, body.no-svg .beforeIcon{
  background-image: url('sprite.png'); /* změníme pouze URL */
}
/* Ikonka domečku se nachází ve 2. sloupci a 3. řádku */
.icon.home, .beforeIcon.home:before{
  background-position: -16px -32px;
}

Použití v HTML

Při použití s img elementem vkládáme prázdný obrázek, 1x1px průhledný. Některé prohlížeče ukážou chybovou hlášku o nenalezeném obrázku.

<!-- s vnitřním elementem -->
<a href="#"><img src="blank.png" class="icon home">Odkaz s ikonkou</a>
<span><span class="icon home"></span>Element s ikonkou</span>
<!-- s pseudo selectorem :before -->
<a href="#" class="icon home">Odkaz s ikonkou pomocí :before</a>
<span>Element s ikonkou s :before</span>

Příklad s použitím ke stáhnutí sprite.zip (samotného obrázku si nevšímejte)
Přiložen screen z IE7, kde není podpora SVG, ale ani pseudo selektoru :before

Příklady

Zde je ukázka 3 spritů, které jsem někdy použil.

• V levo nahoře z portfolia a blogu (1.5x zvětšený)
• V levo dole ze systému SUN Outdoor
• Obličeje jsou z webu 100 pro Adru

Jestli se vám článek líbil, napište mi do komentářů! Příště se podíváme na DataURI a minifikaci CSS a JS skriptů.