The Ultimate Guide to SVG

Immagina di poter incorporare un'immagine in una pagina Web, ridimensionarla a qualsiasi dimensione e non perdere mai la qualità dell'immagine. Bene, puoi È totalmente possibile, semplicemente non lo abbiamo fatto tanto quanto dovremmo.

Le immagini con dimensioni fisse come file JPG, GIF e PNG hanno il loro spazio sul Web, ma la loro natura intrinsecamente statica è in conflitto con il modo in cui il web sta andando. Man mano che ci spostiamo verso design reattivi e fluenti, più diventa irritante avere a che fare con immagini fondamentalmente non reattive. È frustrante oltre ogni immaginazione quando mi rendo conto che sta diventando la best practice creare e servire diverse versioni di ciascuna immagine sul tuo sito.

Mi rendo conto che ci sono buone ragioni tecniche per questo. Ad esempio, passerà molto tempo prima che qualcuno crei una fotografia a scatti infiniti. Tuttavia, le foto non sono la totalità e la fine di tutte le immagini. La grafica vettoriale ha fatto molta strada. Stanno andando ancora molto lontano.

Possono essere più difficili da acquisire, perché non tutti i web designer sono illustratori. Le foto sono abbondanti e le immagini di buona qualità sono facili da trovare. La grafica vettoriale, d'altra parte, è spesso di bassa qualità, o forse non riesci a trovare quella giusta. Gli illustratori assumente sono costosi.

Ma dato che il supporto per la grafica vettoriale cresce online, lo farà anche il loro uso. È giunto il momento per tutti di imparare come implementarli sui loro siti Web e utilizzarli in modo creativo. Immagini reattive come i nostri siti Web sono il futuro.

Incontra il file SVG ...

Cos'è SVG e perché dovresti usarlo?

Va bene, per i neofiti tra noi, SVG sta per Scalable Vector Graphics. I file SVG sono cose piuttosto semplici, in teoria. Sono solo file di testo con un sacco di XML all'interno. Ogni bit di informazione visiva in un file SVG è definito da un codice leggibile dall'utente, che viene quindi calcolato e reso dal browser, dal software di grafica, ecc.

Ciò significa che, sebbene i file SVG non siano complessi come, per esempio, una fotografia formattata come JPG, sono infinitamente più flessibili. Possono essere modificati manualmente in un editor di testo. Possono essere modificati da codice, come JavaScript e CSS. Possono essere compressi in dimensioni ridicolmente piccole.

In altre parole, sono specificamente progettati per essere utilizzati insieme ad altre tecnologie web. Sono perfetti per noi.

Alla fine degli anni '90, Macromedia e Microsoft (e altre società) introdussero VML e quindi Adobe (e altre società) presentate PGML come possibili soluzioni per immagini vettoriali in siti Web al W3C (e possibilmente come alternative al vecchio formato PostScript). Il W3C ha detto, "No, faremo le nostre cose; ma grazie per le idee! "Il risultato è stato il Gruppo di lavoro SVG.

Nel settembre 2001, SVG 1.0 divenne una raccomandazione ufficiale del W3C, e il resto è storia. Una specie di. Internet Explorer è rimasto indietro nell'adottare il formato SVG, sorprendendo nessuno. Da allora, ci sono stati aggiornamenti rivolti ai dispositivi mobili e altro ancora con chiarimenti.

Anche ora, SVG Working Group sta creando SVG 2 che includerà una maggiore integrazione con elementi come HTML5, CSS e il formato font WOFF.

Ha supporto

L'unica versione di Internet Explorer di cui ti devi preoccupare adesso è IE8. Questo è tutto. Tutti gli altri hanno un supporto SVG più o meno completo. Sì, a volte potresti incontrare dei bug anche nei browser "buoni", ma ne vale comunque la pena. Non solo lavoreranno intorno a loro per mantenere le tue capacità di problem solving, ma più usiamo questa tecnologia, più sviluppatori di browser la supporteranno.

Check-out caniuse.com per un'analisi più approfondita di cosa funziona e cosa no in quali browser.

Tutto è reattivo ... o dovrebbe essere

La tecnologia Internet è andata via, ben oltre i siti web statici che eravamo abituati a conoscere. È tempo che le nostre immagini raggiungano, chiare e semplici. Quando devi creare un'icona, usa SVG. Quando devi usare un'illustrazione, vai per SVG se puoi. Se vuoi uno sfondo astratto, ma ancora semplice, usa SVG.

Non sono un fan della tecnologia retina, soprattutto perché non ne ho uno. Non è gelosia. Beh, non è solo la gelosia. Il semplice fatto è che gli schermi Retina sono andati e resi servendo immagini molto più complicate. SVG, essendo infinitamente scalabile, può aiutare a minimizzare il problema.

Accessibilità

Gli utenti ipovedenti in genere navigano in Internet con tutto il necessario per lo zoom. Quando le immagini normali vengono ingrandite, perdono qualità. SVG non lo farà, quindi perché non approfittarne per offrire un'esperienza visiva ai non vedenti?

Può aiutare a rendere il tuo sito web a prova di futuro

La tecnologia è in continua evoluzione. Quello che è qui oggi potrebbe essere sparito da un po ', ma SVG sarà probabilmente in circolazione ancora per un po'. Finché il W3C stabilisce gli standard industriali globali, sembra che SVG continui a essere lo standard de facto per la grafica vettoriale nel browser. Usalo adesso, e i tuoi siti web saranno impostati per un buon, lungo tempo.

Tutorial e istruzioni SVG

Quindi sei convinto. SVG è bello, è il futuro, è ora di impararlo. Fortunatamente per tutti, questo è Internet. Devi solo sapere che le persone hanno trascorso ore preziose su ore a creare materiale di formazione gratuito per chiunque lo desideri. Le persone che fanno questo genere di cose sono le persone che rendono fantastico Internet.

Poi, ovviamente, siamo andati a passare ore a guardare i vari tutorial per trovare i migliori là fuori. Ci può ringraziare in seguito. Per ora, c'è da leggere!

Nota: tieni presente che i file SVG sono tutti codici XML, quindi molti di questi tutorial sono incentrati sugli sviluppatori o contengono solo un sacco di codice. Abbiamo incluso entrambi i tutorial incentrati sulle basi e su specifici usi creativi per SVG, quindi non saltare questa parte.

• Utilizzando SVG: Chris Coyier ha scritto tutorial CSS e HTML facili da comprendere per anni su css-tricks.com. Il suo primer su SVG non è diverso Includerò collegamenti a molte spiegazioni e tutorial di base, ma è qui che inizierei. Questo tutorial include istruzioni di base per gli utenti di Adobe Illustrator.
• Come iniziare con SVG: Sarei negligente se non includessi Il contributo di WDD all'educazione SVG. La sempre fantastica Sara Vieira copre la creazione della grafica, l'esportazione, la pulizia del codice, lo spostamento degli attributi di presentazione in file CSS e altro ancora.
• Risoluzione Indipendenza con SVG: Se è correlato al web, allora Smashing Magazine probabilmente ha un articolo a riguardo. Coprono il basi del formato SVG con il loro stile abituale e attenzione ai dettagli.
• Grafica vettoriale scalabile (una serie di articoli): Hongkiat.com è un'altra risorsa per l'apprendimento di qualità Web e grafica. Invece di fornire solo un lungo articolo, hanno pubblicato un'intera serie di loro di Thoriq Firdaus. L'inglese a volte è un po 'carente, ma le istruzioni sono ancora chiare e facili da capire.
• Sara Soueidan: Styling e animazione grafica vettoriale scalabile con CSS: questo è un video di una presentazione dato a CSSconf EU 2014. In esso, Sara Soueidan fornisce una serie di suggerimenti, trucchi e anche alcuni hack per applicare stili e animazioni a SVG sul web. È lunga mezz'ora, quindi mettiti comodo e mantieni qualcosa con cui prendere appunti. Vale completamente la pena.
• Esportazione di SVG per il Web con Adobe Illustrator CC: gli utenti di Adobe Illustrator dovrebbero controllalo. Uno dei blog di Adobe fornisce istruzioni dettagliate e intendo molto dettagliate su come esportare i file SVG per il Web. Scopri come ottimizzarli fino alla dimensione del file più piccola per il Web.
• SVGBasics: questo intero sito è dedicato a insegnare alle persone come creare grafica SVG da zero con XML. Lo consiglio a chi ha a che fare con l'effettivo back-end - o persino front-end - di qualsiasi sito web. Sapere come funziona il codice può fare molto per risolvere i problemi al volo.
• Tutorial SVG di Jakob Jenkov: un altro sviluppo incentrato sugli sviluppatori serie di esercitazioni, Qui. La grande differenza? L'autore ha incluso versioni video di ciascuna sezione. Se impari meglio avendo sia immagini che audio per accompagnare le tue lezioni, questo è un buon punto di partenza.
• The Simple Intro to SVG Animation: il titolo dice tutto. David Walsh spiega come impostare il tuo Elementi SVG per l'animazione, quali attributi utilizzare per diversi elementi, quali librerie utilizzare e altro ancora. Non è una guida completa, ma ti introdurrà ai concetti di base necessari per iniziare l'animazione.
• Un'introduzione all'animazione SVG: Questo tutorial approfondisce un po 'più esattamente come fare per animare i tuoi oggetti SVG. Inoltre, risolve alcuni problemi comuni che potresti incontrare durante l'animazione, quindi vale la pena leggerlo.
• Procedura: esportare più icone in file SVG da Adobe Illustrator: creazione di un set di icone SVG in Illustrator? Mantenerli tutti in un unico file di Illustrator? Esportali tutti ai loro file separati con un solo clic.
• Animazione del testo con i percorsi SVG: fa esattamente quello che dice nel titolo. Ottieni la tua animazione, forse usarlo su un logotipo. Certamente sembra abbastanza bello ...
• Animazione di icone SVG con CSS3 e JavaScript: uno dei principali utilizzi di SVG è rappresentato dalle icone e con buone ragioni. Crea un file, utilizzalo ovunque nel tuo sito o nella tua app, a qualsiasi dimensione. Cosa si potrebbe chiedere di più? Questo tutorial mostra come animare quelle icone al passaggio del mouse.
• Creazione di un infografica SVG scalabile: le infografiche sono uno dei modi preferiti di Internet per consumare i fatti in questi giorni. Perchè no renderli infinitamente scalabili? Getta un po 'di animazione, e potresti benissimo soffiare un po' di menti.
• Creare un pulsante Burger SVG HTML: dì quello che vuoi sul pulsante dell'hamburger, probabilmente non andrà da nessuna parte. Puoi pure usa SVG e animazione per renderlo il pulsante hamburger più lucido e più cool che puoi. Questo spiega come animare percorsi e tratti per trasformare letteralmente un pulsante in un altro, quindi dai un'occhiata.
• Esempi ed esercitazioni Snap.svg: Questa è una guida utilizzare la libreria JavaScript Snap.svg (vedere la sezione "Strumenti" sotto) sotto. È progettato per aiutarti a iniziare a creare elementi SVG in JS, animarli, renderli interattivi e così via.
• Introduzione a Raphaël.js: Raphaël.js è una delle grandi librerie JavaScript relative a SVG, e Questo articolo ti insegna come usarlo. (Di nuovo, vedi la sezione Strumenti di seguito.)
• Icona SVG animata: le persone sembrano apprezzare molto le icone animate, quindi puoi anche imparare ogni approccio per renderle possibili. Qui vediamo la libreria Snap.svg in azione ancora una volta, come l'autore crea, e poi anima, un pulsante "play" di un lettore multimediale.
• Ritaglio in CSS e SVG - La proprietà e l'elemento del percorso clip: ecco a bel lungo articolo su come utilizzare il ritaglio SVG per creare immagini all'interno di forme e immagini all'interno di un testo enorme. Potresti considerare di usarlo per creare titoli fantasiosi che siano SEO friendly perché i robot dei motori di ricerca possono leggerli.
• Rendere i SVG sensibili ai CSS: Sebbene i file SVG siano infinitamente scalabili, i metodi utilizzati per inserirli in una pagina Web possono a volte causare problemi. Questo tutorial a partire dal codrops spiega solo come risolvere i vari problemi che potresti incontrare.
• Shape Hover Effect con SVG: crea un aspetto lineare e di classe effetto hover animato per anteprime di immagini. ( Guarda la demo. )
• Un SVG Primer per i browser di oggi del W3C: non abbastanza ultimo, e certamente non meno importante, lo abbiamo una risorsa fornita dalle persone che hanno inventato l'intero formato SVG in primo luogo: il W3C. Non è un tutorial di base o un'introduzione. Secondo la prefazione, è stato creato per programmatori professionisti, grafici con "una forte inclinazione tecnica", e altri che non si preoccupano di scendere al nocciolo della questione.
• SVG Tutorial di MDN: come SVGBasics, questo è piuttosto vasta gamma di esercitazioni, fornito dalla rete di sviluppatori Mozilla. Per quanto sia esteso, il tutorial stesso è considerato "in fase di sviluppo". Ad esempio, questo può essere visto attualmente nella pagina "Filtri", che è vuota. Secondo la pagina stessa, il tutorial è in una fase iniziale di sviluppo. Se sei in grado, per favore aiutaci a capire e scrivere un paragrafo o due. Punti extra per scrivere un'intera pagina.

Strumenti SVG

Uno dei molti vantaggi della natura aperta di SVG è che chiunque può creare software per questo. Non ci sono restrizioni di licenza o costi da pagare, solo uno standard aperto per le persone da utilizzare. Come ci si potrebbe aspettare, molti sviluppatori hanno fatto esattamente questo.

Gli strumenti per creare e utilizzare il formato SVG abbondano. Si va da pacchetti software di grandi dimensioni che includono la possibilità di esportare SVG in un secondo momento, per disegnare applicazioni di disegno che utilizzano SVG come formato principale e altro ancora.

Una rapida ricerca su Google per "Strumenti SVG" restituisce "Circa 37.000.000 risultati", quindi sai che c'è molto da fare.

Dove allora, dovresti iniziare?

Applicazioni Premium

Tutti i grandi nomi nella creazione grafica supportano SVG. Adobe Illustrator,Corel Draw, anche vari prodotti da Xara - sì, Xara è ancora una cosa - possono tutti importare, modificare e salvare i file nel formato. (Illustrator è stato conosciuto per mettere alcune cose strane in file SVG, però, quindi è necessario fare attenzione con le impostazioni di esportazione.)

Inkscape

Se non stai già utilizzando un pacchetto di grafica vettoriale, Inkscape è un posto fantastico per iniziare. Creato nel 2003 come fork di un altro progetto open source chiamato Sodipodi (basato su un altro progetto OSS), Inkscape è diventato lo standard per software di grafica vettoriale multipiattaforma gratuito. Non è così pieno di funzionalità come Adobe Illustrator, ma è più che sufficiente per la maggior parte dei progetti vettoriali.

Serif DrawPlus Starter Edition

Serif è una società che produce software di creazione grafica e desktop publishing piuttosto buono. Tutte le loro principali offerte di software vengono fornite con "Starter Editions" gratuite e la loro app di disegno vettoriale non fa eccezione.

Non farti ingannare dal "Starter Edition", però. Potrebbe non avere tutto ciò che fa la versione pro, ma può portare a termine il lavoro nella maggior parte dei casi. A meno che tu non sia un illustratore per mestiere, questa app può soddisfare e soddisfare le tue esigenze ... purché tu sia su Windows. Purtroppo, non è multipiattaforma. Inoltre, per il download è richiesta la registrazione.

Karbon

Parte della suite per ufficio Calligra, che è principalmente per Linux, Karbon è un editor di grafica vettoriale completo di tutte le funzionalità. Ha tutti gli strumenti di base e alcune cose oltre. Al momento l'installazione su Mac e Windows è difficile, ma non impossibile.

Printdesign

Il nome suona come un pacchetto software degli anni '90, lo so, ma in realtà è piuttosto nuovo. In realtà, è il successore della vecchia app di illustrazione sK1, che è stata interrotta. printdesign è attualmente in fase di "anteprima", e ha entrambe le versioni Linux e Windows. Non è ancora pronto per l'uso in produzione, ma è un progetto che vale la pena guardare.

SVG-edit

Il nome è un po 'sul naso, forse, ma il software è più che capace. SVG-edit Si basa interamente su tecnologie web, in particolare HTML5, JavaScript e CSS. Ciò significa che non esiste alcuna funzionalità lato server. Inoltre, è Open Source, il che significa che puoi scaricarlo, metterlo sul tuo server o anche solo usarlo dal desktop.

Ha un Elenco delle caratteristiche abbastanza a lungo da rendere gelose molte app per desktop, e funziona più velocemente della maggior parte di esse, quindi dagli un vortice.

Janvas

Janvas è l'unica app web-based su questo elenco che non è strettamente gratuita. C'è un periodo di prova di trenta giorni, dopo di che un abbonamento costa 26 euro all'anno. Se nessuno degli altri editor SVG basati sul web ti rende felice, potresti effettivamente prenderlo in considerazione.

Gli strumenti di disegno sono avanzati e abbastanza familiari, ogni variabile è modificabile nella barra laterale e puoi salvare i tuoi documenti su Google Drive. È possibile creare modelli, collaborare alla creazione di documenti e persino includere file CSS e JS creati per interagire con la grafica.

Tutto sommato, è un'offerta solida.

Mondrian

Piccolo. Elegante. Semplice. Mondrian è ancora un altro open source offerta, ed è molto più piccola della maggior parte. Non ha nemmeno uno strumento di testo ... ma fa molto bene i disegni semplici. Puoi aprire file dal disco rigido o da un URL, prendere il codice embed per il tuo sito web o semplicemente salvare il tuo disegno come SVG o PNG. Potrebbe non essere avanzato come altre app, ma è piacevole da usare e lo strumento penna è naturale.

Disegna SVG

Disegna SVG è un altro editor SVG basato sul Web con tutte le funzionalità di cui avresti bisogno. Il punto più forte sembra essere la pura velocità con cui carica e disegna le cose. Purtroppo, tuttavia, l'interfaccia utente è seriamente imperfetta. Eppure, è lì e funziona, se mai ne hai bisogno.

Librerie SVG

Gli sviluppatori si rallegrano! Abbiamo alcuni link anche per te. Dopotutto, SVG non è solo un altro formato grafico. È il codice. È il codice che può essere collegato a, o incorporato. Può essere interagito e modificato al volo. Con la matematica!

Snap.svg

schiocco è una libreria JS per generare e interagire con SVG. È progettato per i browser moderni. Sì, questo significa che supporta solo IE9 + ... ma se i browser più vecchi non sono la tua preoccupazione, provaci.

Raphaël

Raphaël, a differenza di Snap, è compatibile con i browser più vecchi. Infatti, può funzionare con IE6 +, Safari 3+ e Chrome 5+. Ad esempio, se stai sviluppando qualcosa per un sistema aziendale in cui gli utenti potrebbero trovarsi su macchine più datate, Raphaël potrebbe essere la soluzione migliore.

jQuery SVG

Ti piace SVG e jQuery? Non sono davvero sorpreso. jQuery ha, forse, perso l'attenzione dei riflettori che aveva una volta, ma è ancora una libreria di riferimento per molti di noi.

jQuery SVG, quindi, è probabilmente il plugin che stai cercando. Ha funzioni per animazioni, creazione di grafici e persino estensioni. Esatto, estensioni per un plugin. Il supporto del browser è IE9 +, ma le versioni precedenti di IE possono essere utilizzate con i plugin del browser appropriati installati.

Tuttavia, non dipenderei dagli utenti che hanno questi plugin.

SVGMagic

SVGMagic è una soluzione drop-in basata su jQuery per i browser più vecchi (IE 7 e 8). Invece di creare manualmente immagini di fallback per ogni singolo file SVG che usi, questo plugin può generarli al volo. Gestisce anche le immagini di sfondo.

Come fa tutto questo? Rileva se il browser dell'utente può gestire o meno SVG. Se è così, va a dormire. In caso contrario, contatta uno script PHP sul lato server e gli comunica di creare un file PNG delle immagini SVG in questione con le dimensioni necessarie.

Una volta eseguito, lo script PHP invia gli URL a queste immagini di fallback temporanee al plug-in jQuery e gli URL predefiniti vengono sostituiti. Questo ovviamente richiede tempo, quindi puoi facoltativamente specificare un'immagine segnaposto da mostrare mentre la conversione ha luogo.

Un avvertimento: attualmente non può gestire troppe immagini contemporaneamente. Non vorrai usare questa tecnica su pagine con più di un file SVG.

svg.js

Infine, ecco un'opzione per i contatori dei byte. svg.js pesa solo a 11.8kbs quando gzip. Nonostante le sue piccole dimensioni, supporta un numero impressionante di funzionalità (come elencato nella pagina del progetto):

• Animazioni su dimensione, posizione, trasformazioni, colore
• Estensione indolore grazie alla struttura modulare
• Sono disponibili vari plugin utili
• API unificata tra i tipi di forma con spostamento, dimensioni, centro
• Vincolare gli eventi agli elementi
• Pieno supporto per maschere di opacità e tracciati di ritaglio
• Percorsi di testo, anche animati
• Gruppi di elementi e set
• Gradienti dinamici

Leggi il documentazione per maggiori informazioni.

Stock SVG

Non tutti sono un illustratore. Almeno, non sono mai stato bravo in questo. Pertanto, le illustrazioni di magazzino diventano una risorsa inestimabile. Può essere difficile trovare cose buone, però. Ciò che non assomiglia alle clipart Microsoft è spesso di portata limitata o costoso.

Non perdere la speranza, però. C'è un sacco di cose là fuori che è di buona qualità. Se non soddisfa perfettamente le tue esigenze, beh, è ​​arte vettoriale. Le probabilità sono che possa essere ottimizzato per soddisfare le tue esigenze se hai una conoscenza di base del software di grafica vettoriale.

SVG può fare ben più che illustrazioni di stock, però. Puoi anche creare pattern, grandi sfondi fantasiosi che non consumano la larghezza di banda e altro ancora. Diamo un'occhiata a ciò che le persone hanno fatto per il resto di noi:

Clipart SVG su openclipart.com

SVG, come formato aperto, ha molti appassionati di open source come fan. Di conseguenza, è uno dei formati principali utilizzati in quello che potrebbe essere la più grande collezione di clipart gratuiti là fuori.

E in gran parte è clipart-ish. E gran parte del lavoro è amatoriale. Ci sono alcuni grafici di qualità, se si guarda. Ehi, è gratis.

Stock SVG

Stock SVG è un sito piccolo, con una collezione relativamente piccola ma eccellente. Sono soprattutto icone e mockup di dispositivi, ma sono tutti di alta qualità. Se hai bisogno di una di queste due cose, inizia da qui.

Risorse SVG su deviantart.com

ah DeviantArt, quella comunità gigante sta ancora andando forte. Vai alla categoria immagini di immagini e cerca SVG (o fai clic sul link sopra). Di nuovo, la qualità varierà, ma ci sono cose buone lì se hai il tempo di guardare.

Galleria di modelli SVG

Una piccola galleria piena di Modelli basati su SVG. È progettato come più di una vetrina, ma i file di origine sono tutti lì per la vostra convenienza.

Modelli SVG da svgeneration.com

svgeneration.com include molti modelli SVG per il tuo uso. Il sito è dotato di opzioni di modifica per ciascun modello e puoi modificare il codice direttamente sul sito per vedere le tue modifiche in azione. Non solo questa è una grande risorsa per i modelli prefabbricati, ma puoi scoprire molto su come sono fatti in primo luogo.

Clipart SVG

L'arte questo sito è decisamente uno stile cartoon vecchio stile. Francamente, non sarà quello che tutti cercano, ma è lì per coloro che vogliono quel tocco classico per le loro illustrazioni.

SVG Studio

SVG Studio offre migliaia di illustrazioni con un tocco decisamente moderno. Puoi acquistarli in piccoli sottoinsiemi o scaricare il loro intero catalogo in una sola volta. Ciò ti farà tornare indietro di 500 USD, che, per 3000 illustrazioni, non è poi così male.

SVG sui siti di azioni più grandi

Non posso dire molto sull'arte offerta su ogni sito, perché varia ampiamente dal contributore senza uno stile generale. I più grandi nomi sono istockphoto.com,shutterstock.com,bigstockphoto.com, e canstockphoto.com.

Ispirazione SVG

Possiamo leggere tutte le presentazioni che vogliamo e seguire tutti i tutorial là fuori. Possiamo diventare esperti in ogni aspetto delle specifiche SVG, eppure potremmo ancora essere incredibilmente noiosi a riguardo. Dobbiamo sfruttare tutto il potenziale di qualsiasi tecnologia per sfruttarla al meglio.

Questo è spesso più facile a dirsi che a farsi, comunque. Spesso aiuta ad avere un punto di riferimento, qualcosa di straordinario da guardare e ci mostra esattamente che tipo di cose fantastiche possiamo fare con ciò che abbiamo. Questo è quello che piacciono ai siti Webcreme fatto per il web design in generale. Questo è ciò che CSS Zen Garden, e tutte le gallerie CSS che sono venute dopo, hanno fatto per i layout CSS.

A tutt'oggi, non ho trovato alcun sito di gallerie dedicato a ciò che può essere realizzato tramite SVG combinato con altre tecnologie web, e questo potrebbe aiutare. Nel frattempo, ecco una vetrina di cose fantastiche che abbiamo trovato:

Snap Display Ad

Questo esempio è parte del Snap.svg raccolta su CodePen. Hai bisogno di un perfetto esempio di come SVG potrebbe essere utilizzato per rivoluzionare gli annunci online? Questo è.

Pensaci: alcune aziende pubblicitarie stanno ancora vendendo annunci in base alla dimensione dei pixel. Questo non ha senso nell'età della variazione infinita nelle dimensioni dello schermo e nelle schermate Retina per l'avvio. Fino a quando non avremo un sistema migliore degli annunci visivi, SVG potrebbe almeno aiutarci a rendere gli annunci adatti alla natura reattiva del web design.

Vedi la penna Snap Display Ad di CJ Gammon ( @cjgammon ) sopra CodePen .

Interfaccia desktop Jtop

Il Mozilla Developer Network, un'entità che continuo a correre mentre faccio ricerche sulle tecnologie web in generale, ha anche prodotto alcune cose interessanti realizzate con SVG. Ad esempio, sono andati e fatti un'intera interfaccia desktop basato interamente su tecnologie web come HTML5, JS, SVG e CSS. È veloce, personalizzabile e quasi mi piacerebbe che facesse parte di un vero sistema operativo.

Un tempo di riflessione

Portato a noi da ShinyDemos (che a sua volta ci viene portato dalla gente di musica lirica ) Un tempo di riflessione letteralmente sovrapporrà un orologio a un feed dal vivo dalla tua webcam. Bene, se tu dai il tuo permesso, e in effetti hai una macchina fotografica, comunque. Ma il punto è che mostra come le maschere SVG possono essere sovrapposte su quasi tutto.

oblurlay

Attraverso una combinazione di CSS, SVG e jQuery, oblurlay crea esattamente ciò che suggerisce il nome: una sovrapposizione sfocata, in stile iOS. È un plugin jQuery, quindi l'implementazione non è difficile e mostra chiaramente come i filtri SVG possono essere applicati a tutti i tipi di cose, non solo agli oggetti SVG stessi.

Dimostrazioni di Codrops

Codrops (precedentemente menzionato nella sezione tutorial) ha prodotto un certo numero di interessanti, impressionanti e semplicemente semplici demo per mostrare ciò che SVG può fare. Ognuno merita la propria sezione in questo articolo, ma ce ne sono così tanti che li sto mettendo tutti in uno. Se non guardi altro da questa sezione "Ispirazione", guarda questi. Guarda le demo e scarica i file sorgente. Quindi vai ringraziare i ragazzi di Codrops. Se lo meritano.

Nota: non tutti questi sono focalizzati su SVG, ma tutti usano la grafica SVG in qualche modo.

Pagina Caricamento effetti : una serie di effetti di caricamento pagina creativi che utilizzano animazioni SVG con Snap.svg. L'idea è di mostrare una sovrapposizione con un'animazione di forma interessante mentre vengono caricati nuovi contenuti.

Idee per effetti Hover sottili : un po 'creativo e sottile effetto hover ispirato con le moderne tecniche CSS tra cui la traduzione 3D e gli elementi pseudo. Usano anche SVG. Vai a controllare il dimostrazione per la seconda serie di effetti.

SVG Drawing Animation : un piccolo esperimento che esplora l'uso delle animazioni di disegno a tratto SVG per precedere l'aspetto di elementi grafici o di siti Web, simulandone il caricamento.

Effetti del menu Off-Canvas : un po 'di ispirazione per effetti e stili di menu off-canvas utilizzando transizioni CSS e animazioni di percorsi SVG.

Stili di suggerimenti Stili di ispirazione : una piccola raccolta di vari stili e effetti del tooltip al passaggio del mouse per la tua ispirazione. Utilizzando le trasformazioni CSS, le forme border-radius e SVG possiamo creare tooltip interessanti e dall'aspetto moderno.

Ispirazione Stili di notifica : alcune idee ed effetti semplici per notifiche di siti Web non invadenti. Un piccolo script viene utilizzato per mostrare alcuni stili e le animazioni CSS sono utilizzate per gli effetti.

Ispirazione per elementi di selezione personalizzati : un po 'di ispirazione per lo styling di una versione personalizzata dell'elemento select. Ci sono molte possibilità e oggi stiamo esplorando alcune idee su come consentire all'utente di selezionare una scelta in stile.

Ispirazione per stili di ancoraggio in linea : ispirazione per gli stili di ancoraggio inline creativi e moderni e gli effetti al passaggio del mouse utilizzando diverse tecniche come transizioni pseudo-elemento e SVG.

Stili di navigazione freccia : una fonte d'ispirazione per gli stili di navigazione a freccia e gli effetti al passaggio del mouse usando le icone SVG per le frecce e transizioni e animazioni CSS per gli effetti.

Effetto di Slideshow traballante : le diapositive di questa presentazione oscillano mentre si muovono. L'effetto si basa sul colpo di Dribbble di Sergey Valiukh ed è stato realizzato utilizzando Snap.svg e morphing dei percorsi SVG ... Si noti che questo è altamente sperimentale e testato solo nelle ultime versioni dei browser moderni.

Avvolgendolo

SVG, sebbene non sia ancora uno dei formati di immagini più diffusi in circolazione, è ben documentato, fortemente supportato ed è una parte importante del futuro di Internet. Se non lo stai ancora utilizzando come parte del processo di progettazione, è probabilmente il momento di iniziare.

Immagine in evidenza, immagine vettoriale senza soluzione di continuità via Shutterstock.

• ← 10 plugin gratuiti per WordPress per febbraio 2015
• 21 strumenti di collaborazione per semplificare il lavoro di squadra →