CSS Master

Figure 8.5. Multiple icons merged into a single image: Glyphicons from Twitter's Bootstrap 2.3.1

SVGspritesworksimilarly.InsteadofdownloadingmultipleSVGimages,the

browserdownloadsasinglefile.UsingSVGalsomeansthatyou'renotlimitedto

monochromaticiconsasyouarewithiconfonts.SVGiconsarealsoeasierto

maintain,inmyopinion,butbeawarethatfilesizesareusuallylargerthanicon

fonts.

Avoid Using Sprites with SPDY or HTTP/2

IfyouareservingassetsusingtheSPDYorHTTP/2protocols,don'tusesprites.

AsexplainedinChapter 2 ,browsersthatsupportSPDYorHTTP/2candownload

multipleassetsinparallel;there'snowaitingforonerequesttocompletebefore

anotherbegins.WithSPDYorHTTP/2,thebenefitofreducingthenumberofre-

questsisoutweighedbythecostofsendingmorebytesthanthedocumentneeds.

SVGspritestakeadvantageofdocumentfragmentidentifiersandthe:target

pseudo-class. They're supported in every major browser that supports SVG except

for Safari 7, and UCBrowser ≤ 9.9; however, support for using SVG fragments as

background images is currently limited to Firefox and Internet Explorer.^7

Inthisdocument,wehavethreeicons,astar,ahexagon,andatriangle:

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=

➥"http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50"

➥ style="enable-background:new 0 0 50 50;" xml:space="preserve">

(^7) CraigBucklerdescribesthistechniqueinhisSitePointarticle,“HowtoUseSVGImageSprites.”
[http://www.sitepoint.com/use-svg-image-sprites/]
314 CSS Master