Usare SVG per creare sfondi flessibili, scalabili e divertenti

4 febbraio 2010

Questa è la traduzione dell’articolo Using SVG For Flexible, Scalable, and Fun Backgrounds di Shelley Powers, pubblicato originariamente su A List Apart il 26 Gennaio 2010. La traduzione viene qui presentata con il consenso dell’editore (A List Apart Magazine) e dell’autore.

Il formato SVG (Scalable Vector Graphics) consiste in cerchi, rettangoli e linee creati in XML e combinati sotto forma di disegni su una pagina web.

Potete applicare a SVG colori solidi, gradienti e un buon numero di filtri sofisticati, sebbene non tutti i browser supportino tutti i tipi di filtri. Potete incorporare testo, anche immagini, potete copiare e clonare la vostra grafica in SVG come e quando volete.

Nella maggior parte dei casi usiamo SVG per realizzare grafici, illustrazioni o animaizoni. Tuttavia, possiamo incorporare SVG nel design complessivo di un sito; è una straordinaria e versatile risorsa che è anche molto divertente da usare. In questo articolo affronteremo prima di tutto alcune questioni preliminari per lavorare con SVG, a partire dal supporto dei browser e dall’accessibilità. Successivamente impareremo a trovare online grafica SVG da usare nei nostri progetti e a creare i nostri disegni per aggiungerli alle nostre pagine.

Molte persone usano SVG per certi parti grafiche del loro sito. Per esempio, Sam Ruby, attualmente presidente del Working Group che si occupa di HTML5, usa SVG per annotare i post del suo blog con icone di categoria. Erik Dahlstrom, di Opera Software, fa la stessa cosa, così come Jeff Schiller su Codedread. Jeff va oltre le semplici icone e incorpora SVG nel menu fisheye della barra, così come in altre sezioni del suo sito. Il sito Emacs for Mac OS X è fatto quasi completamente in SVG; se lo visitate, provate a ridimensionare la finestra del browser per vedere in azione la capacità di scalare di questo formato.

Io ho usato SVG per fornire un colore gradiente selezionato da una foto (ricaricate un paio di volte la pagina per vedere l’effetto in azione), come elemento per lo sfondo e per creare una sorta di tema grafico che unificasse tutti i miei siti.

Se vuoi aggiornamenti su Usare SVG per creare sfondi flessibili, scalabili e divertenti inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Usare SVG per creare sfondi flessibili, scalabili e divertenti

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy