Sprite SVG, gli identificatori di frammento

Link copiato negli appunti

Una seconda tecnica utile a generare sprite SVG prevede il ricorso ai cosiddetti Fragment Identifiers (identificatori di frammento). Si tratta di un particolare tipo di selettori che permettono di localizzare una porzione di un MIME type di tipo image/svg+xml (in breve, una porzione del nostro sprite).

L'immagine contenente le icone viene, quindi, ritagliata in modo molto simile a quanto avviene per gli sprite CSS. Le immagini possono essere utilizzate sia per generare icone, sia per ogni altro fine, come ad esempio la creazione di un background.

Come nel caso degli sprite inline, anche per gli identificatori di frammento proporremo prima un esempio in puro SVG, e successivamente una soluzione che prevede il ricorso combinato di SVG e CSS. Cominciamo utilizzando l'attributo viewBox.

Le icone sono collocate nello sprite SVG dell'immagine che segue.

In fase di progettazione bisognerà essere attenti a dimensionare e collocare con precisione le icone all'interno dello sprite. Quella che segue è la struttura generale dello sprite:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" wiexBox="0 0 700 100">
<view id="fi-social-drive-view" viewBox="0 0 100 100"/>
<view id="fi-social-dropbox-view" viewBox="100 0 100 100"/>
<view id="fi-social-evernote-view" viewBox="200 0 100 100"/>
...
<g id="fi-social-drive">
	...
</g>
<g id="fi-social-dropbox" transform="translate(100,0)">
	...
</g>
<g id="fi-social-evernote" transform="translate(200,0)">
	...
</g>

Tutto viene gestito dall'attributo viewBox degli elementi view, ognuno dei quali punta ad un corrispondente elemento g.
viewBox individua il punto di origine dell'area visibile. Nel nostro esempio le icone hanno dimensioni di 100x100, quindi ogni viewBox si trova a 100px di distanza dal precedente (si noti l'attributo transform).

Una volta definiti gli elementi dello sprite, questi saranno incorporati nel documento principale grazie ad elementi img.

Definire l'origine dell'immagine

Le origini delle immagini possono essere definite secondo diverse modalità. La prima soluzione prevede il puntamento del target in base all'id:

<img src="svg/icons.svg#fi-social-github-view"/>

La seconda modalità prevede il ricorso alla SVG view specification:

<img src="svg/icons.svg#svgView(viewBox(600,0,100,100))"/>

In questo caso, il viewBox dell'elemento view stabilisce quale debba essere l'area visibile dello sprite.

Assegniamo, quindi, le dimensioni alle immagini con CSS:

<style>
img {
	width: 100px;
	height: 100px;
}
</style>

Nell'esempio appena visto, le icone sono state affiancate l'una all'altra grazie all'attributo transform degli elementi g. Tuttavia non è necessario affiancare le icone, potendo queste essere anche sovrapposte. In questo caso, Chris Coyer suggerisce di utilizzare la pseudo-classe :target per visualizzare solo l'immagine richiesta. Nel file SVG aggiungiamo le seguenti dichiarazioni:

<style>
    g {
    	display: none;
    }
    g:target {
    	display: inline;
    }
</style>
<g id="fi-social-google-plus">
	...
</g>

Gli elementi g saranno visualizzati solo quando richiamati all'interno del documento principale:

<img src="svg/icons.svg#fi-social-google-plus"/>

Il codice da scaricare.

Identificatori di frammento SVG con CSS

Le stesse regole appena viste valgono anche qualora si dovesse decidere di utilizzare le immagini come sfondi di elementi. Il background può essere impostato con una semplice dichiarazione CSS all'interno del documento principale:

<style>
.fi-social-github-view {
	background: url("svg/icons.svg#svgView(viewBox(400,0,100,100))") no-repeat;
}
</style>
<span class="icon fi-social-github-view"></span>

Oppure:

<style>
.fi-social-facebook {
	background: url("svg/icons.svg#fi-social-facebook-view") no-repeat;
}
</style>
<span class="icon fi-social-facebook"></span>

Nessuna modifica si rende necessaria al file SVG.

Il codice da scaricare.

Link utili