Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Viewport, viewBox e gli image sprite inline

Comprendere il concetto di Viewport SVG e sfruttarlo per implementare gli sprite e ottimizzare il caricamento di elementi grafici di app e pagine HTML.
Comprendere il concetto di Viewport SVG e sfruttarlo per implementare gli sprite e ottimizzare il caricamento di elementi grafici di app e pagine HTML.
Link copiato negli appunti

Una pagina HTML può contenere decine di elementi grafici. Caricare un file per ogni immagine, però, implica la trasmissione di numerose richieste al server con un costo in termini di banda legato alla inizializzazione di ogni richiesta.

Per minimizzare questo effetto si può ricorrere alla tecnica degli image sprite, che prevede di utilizzare una sola immagine contenente tutte le icone necessarie. Ogni icona occuperà un'area specifica dell'immagine e sarà gestita via CSS.

Yahoo! adotta la tecnica degli image sprite

Yahoo! sprite

Per ottimizzare sempre meglio l'uso delle risorse e ottenere una grafica reattiva, possiamo considerare la creazione di sprite di immagini SVG, soluzione innovativa. Cominciamo col presentare gli strumenti necessari.

Introduzione all'attributo viewBox

viewBox è uno degli attributi SVG che permettono di controllare il sistema di coordinate e rappresenta l'area visibile di un oggetto.

I quattro parametri che costituiscono il valore di viewBox sono rappresentati come segue:

viewBox = <min-x> <min-y> <width> <height>

Campo Descrizione
<min-x> e <min-y> stabiliscono le coordinate dell'angolo superiore sinistro del viewBox rispetto al contenitore
<width> e <height> impostano la larghezza e l'altezza relative dell'oggetto rispetto al container

Se le dimensioni dell'icona corrispondono alle dimensioni del canvas, allora questa occuperà tutto lo spazio disponibile. In caso contrario, l'immagine sarà ridimensionata.

Per maggior chiarezza, mettiamo a confronto due elementi image:

<svg width="200px" height="200px" viewBox="0 0 100 100">
	<image xlink:href="fxlogo.png" x="0" y="0" width="100px" height="100px"></image>
</svg>

In questo primo esempio vengono rispettate le proporzioni tra viewport e viewBox, e i due sistemi di coordinate coincidono. L'immagine che segue permette di verificare il risultato nell'inspector di Chrome.

viewBox

Cambiamo il rapporto tra viewport e viewBox:

<svg width="200px" height="200px" viewBox="0 0 200 200">
<image xlink:href="fxlogo.png" x="0" y="0" width="100px" height="100px"></image>
</svg>

In questo caso abbiamo ridotto il rapporto tra i due sistemi di coordinate, ottenendo un'immagine ridimensionata.

viewBox

Il codice da scaricare.

Quelli che seguono sono gli elementi SVG che dispongono dell'attributo viewBox:

<svg>
<symbol>
<image>
<marker>
<pattern>
<view>

Dopo la premessa teorica, passiamo alle applicazioni tecniche.

Sprite inline in puro SVG

Grazie all'attributo viewBox, gli elementi SVG possono essere ritagliati prima di essere visualizzati in una pagina HTML. La prima tecnica prevede l'inserimento degli sprite in modalità inline, ricorrendo all'elemento <use>.

Come primo esempio, definiamo il gruppo di elementi SVG che costituiscono lo sprite all'interno del documento HTML:

<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
...
</svg>
...
</body>
</html>

La proprietà display: none; serve ad evitare che l'elemento svg occupi spazio all'interno della pagina, anche senza essere visibile. Definiamo, quindi, gli oggetti grafici ricorrendo all'elemento <symbol>:

<svg style="display: none;">
	<symbol id="anchor" viewBox="0 0 100 100">
		<path d="..."/>
	</symbol>
</svg>

In questo momento l'icona non è visibile, dato che l'elemento <symbol> provvede solo a definire l'oggetto SVG. Per renderlo visibile, bisognerà richiamarlo nel documento:

<svg class="anchor" width="100px" height="100px">
	<use xlink:href="#anchor"></use>
</svg>

Questo secondo elemento svg sarà il container dell'icona. Abbiamo fissato le dimensioni del viewport ad un quadrato di 100px per lato.

viewBox

Sprite inline esterni

Quando le immagini sono numerose o complesse, incorporare gli sprite all'interno del documento principale diventa una soluzione inefficiente: in questi casi è preferibile incorporare una risorsa esterna al documento. Creeremo, quindi, un unico sprite SVG esterno e punteremo ai singoli elementi come segue:

<svg class="fi-social-evernote" width="100px" height="100px">
	<use xlink:href="svg/icons.svg#fi-social-evernote"></use>
</svg>

L'immagine mostra, questa volta in Firefox, come viene resa l'icona di Evernote.

Evernote

Nota: questa soluzione funziona anche in locale su Firefox perché il browser Mozilla istanza un web server interno. Avremo invece con altri browser come Google Chrome (errore "Unsafe attempt to load URL ..."). Per risolvere, basta effettuare i test su server anche quando si lavora in locale. Nonostante utilizzino lo stesso motore di Chrome, Safari e Opera caricano correttamente i file SVG esterni anche in locale.

Una differenza considerevole tra la dichiarazione degli oggetti SVG nel documento e il riferimento ad un file esterno è che nel primo caso la risorsa non viene memorizzata nella cache del browser, mentre nel secondo caso il browser recupera il file dalla memoria interna.

L'immagine che segue mostra la scheda Network del Chrome Developer Tools. Tra le risorse in memoria vi è anche il nostro file icons.svg.

Network

Il codice da scaricare.

Ti consigliamo anche