Oltre 20 fantastici pacchetti SVG animati

Pubblicato: 2015-11-16

SVG (o Scalable Vector Graphics) è un formato di file basato su XML che contiene vettori bidimensionali e consente agli sviluppatori di creare grafiche straordinarie e applicazioni grafiche dinamiche e animate.

Sommario nascondere
SVG POP Watch: un motore di visualizzazione SVG animato reattivo
Pacchetto di illustrazioni animate in formato SVG
Stili di testo 3D animati – SVG
Icone animate del tempo SVG
Confezione da 6 icone SEO SVG
StarshineJS – Effetto HTML Stelle scintillanti animate in formato SVG
Icone animate del browser SVG
Componente aggiuntivo Enliven' em Premium: icone promozionali web
Trigons: crea e anima immagini SVG astratte
Cyclo – Kit caricatori SVG
Preloader HTML5 circolare
Animazione di musicisti reattivi
Mega Pack di icone animate in formato SVG
Caricatore pieghevole SVG animato
Flatimation SVG: un set di icone SVG animato
Presentazione di foto della fotocamera SVG retrò
16 icone SEO animate
Menu appiccicoso: plug-in jQuery
40 icone animate dei social media in formato SVG
Globo animato in formato SVG con pennarelli e loghi
Gear HTML5 Audio Player
Grafico a torta 3D con JavaScript
Esempi di ottimi siti Web che utilizzano la potenza di SVG
Cavalier: Conquistatore di Eccellenza
Spillo
Poignee de main virile
Spillo
iFly50
La mappa stellare di ARK: Star Citizen
Mantieni i terremoti strani
30u
Gruppo QED
Melanie David
WWF Francia – L'Ora della Terra Parigi
Nerisson
Un'azienda di design
MIDORI AOYAMA

SVG è un potente formato di immagine che può essere manipolato con il codice, sia in un editor di testo che con CSS/JS ed è usato sempre di più nel web design.

Uno dei maggiori vantaggi di SVG è che può apparire nitido su tutte le risoluzioni dello schermo. Può contenere file di dimensioni molto ridotte e può essere facilmente modificato e modificato. Le immagini SVG offrono molta più libertà per quanto riguarda le dimensioni delle immagini utilizzate, nonché il modo in cui interagiscono con il design finale.

Questo formato di immagine vettoriale basato su XML semplifica le cose per gli sviluppatori web e i web designer, quindi abbiamo deciso di raccogliere qui 22 fantastici pacchetti SVG animati per ispirarti. Questi pacchetti SVG premium hanno scopi diversi, dall'aggiunta di icone e testi animati ai siti Web all'aggiunta di orologi, grafica animata e altro ancora.

Aggiungi questi pacchetti SVG animati alla tua collezione di web design e preparati per il tuo prossimo progetto di sito web!

PS Abbiamo anche aggiunto alcuni esempi di come utilizzare gli SVG nei progetti web , di seguito.

SVG POP Watch: un motore di visualizzazione SVG animato reattivo

Spillo

SVG POP Watch è perfetto per il tuo progetto o il team del tuo sito. Puoi facilmente cambiarne l'aspetto, ha un motore di visualizzazione SVG animato pronto per retina e reattivo. Puoi anche aggiungere facilmente il tuo design. Questo orologio SVG è dotato di molte fantastiche funzionalità, quindi assicurati di provarlo!

Pacchetto di illustrazioni animate in formato SVG

Pacchetto di illustrazioni animate in formato SVG Spillo

Questo è un pacchetto di illustrazioni SVG davvero carino e animato. Sono stati creati utilizzando la libreria JavaScript Snap.SVG e starebbero benissimo nei tuoi progetti.

Stili di testo 3D animati – SVG

Stili di testo 3D animati - Anteprima SVG - CodeCanyon Spillo

Questo set include 10 stili unici di testi animati in 3D. Usano il testo HTML, il che significa che Google lo legge come qualsiasi altro testo HTML. Gli stili contenuti in questo pacchetto vanno da realistico, piatto e isometrico.

Icone animate del tempo SVG

Icone animate del tempo SVG Spillo

Queste icone animate del tempo piatto sono state progettate magnificamente. Ognuno ha la sua animazione unica e, usandoli, renderai sicuramente i tuoi progetti di web design più creativi e avvincenti.

Confezione da 6 icone SEO SVG

Pacchetti SVG animati con icone SVG Spillo

Questo pacchetto contiene 6 icone animate SEO SVG. Puoi usarli e integrarli nei tuoi progetti di web design per rendere interattivo il tuo sito web.

StarshineJS – Effetto HTML Stelle scintillanti animate in formato SVG

Pacchetti SVG animati StarshineJS Spillo

Con l'effetto HTML animato puoi aggiungere luci brillanti, sexy o cartoon ai tuoi elementi HTML. Puoi facilmente regolare i loro posizionamenti, dimensioni, colore e molto altro.

Icone animate del browser SVG

Icone SVG animate Spillo

Queste icone SVG animate sono esattamente ciò di cui il tuo sito web ha bisogno. Sono il modo perfetto per dire ai tuoi clienti che la tua app, il tuo tema o il tuo gioco funzionano perfettamente in tutti i principali browser.

Componente aggiuntivo Enliven' em Premium: icone promozionali web

Icone animate dei pacchetti SVG Spillo

Questo pacchetto contiene 50 icone promozionali web. Questo è un componente aggiuntivo per Enliven'em. Ogni icona include 5 variazioni di sfondo, il che significa che otterrai 250 file SVG in totale.

Trigons: crea e anima immagini SVG astratte

Pacchetti SVG animati Trigons Spillo

Questo è uno script JS molto flessibile che ti aiuterà a creare un'immagine SVG moderna ed elegante con animazioni opzionali. Questo set contiene 30 effetti di animazione integrati che puoi utilizzare per realizzare il perfetto progetto di web design.

Cyclo – Kit caricatori SVG

Cyclo - Kit caricatori SVG Spillo
Con questo set, i tuoi precaricatori saranno fantastici! Ecco 33 effetti di animazione di caricamento realizzati solo in SVG.

Preloader HTML5 circolare

Preloader HTML5 circolare Spillo

Questo è un preloader HTML5 circolare che effettuerà la transizione tra una normale esperienza utente e un viaggio fluido verso i contenuti del tuo sito web.

Animazione di musicisti reattivi

Pacchetti SVG animati di animazione di musicisti reattivi Spillo

Questo pacchetto contiene diversi musicisti SVG animati e i file vettoriali originali. Hai anche un pacchetto demo, un pacchetto per musicisti. Questo pacchetto è molto ben documentato.

Mega Pack di icone animate in formato SVG

Spillo

Il Mega Pack di icone animate SVG renderà viva la tua arte vettoriale. Tutto quello che devi fare è salvare la tua grafica, aggiungere una riga di codice al tuo HTML e sei a posto!

Caricatore pieghevole SVG animato

Caricatore pieghevole SVG animato Spillo

L'animazione SVG di Folding Loader è perfetta per la tua pagina di preloader. Usalo con sicurezza!

Flatimation SVG: un set di icone SVG animato

Pacchetti SVG animati di flatimation Spillo

Il set di icone animate Flatimations SVG renderà il tuo sito web più divertente e creativo. Queste icone accattivanti staranno benissimo su qualsiasi dispositivo e browser.

Presentazione di foto della fotocamera SVG retrò

Pacchetti SVG animati retrò Spillo

Questa presentazione di foto della fotocamera SVG retrò ha la sua ispirazione nel design piatto. Sembra retrò ma contemporaneo ed è un ottimo modo per animare e visualizzare immagini.

16 icone SEO animate

Icone animate dei pacchetti SVG Spillo

Che ne dici di avere e utilizzare queste 16 icone SEO animate che daranno vita al tuo sito web. Sono grafica vettoriale completamente scalabile e staranno benissimo su qualsiasi dispositivo e browser.

Menu appiccicoso: plug-in jQuery

Plugin jQuery Menu Gooey Spillo

Questo plugin ti aiuterà a creare un menu appiccicoso con cerchi come elementi. Utilizza filtri SVG, contiene 6 stili di menu, viene fornito con molte opzioni personalizzabili e molto altro.

40 icone animate dei social media in formato SVG

Pacchetti SVG animati Icone dei social media Spillo

Ecco un set davvero interessante di icone SVG animate che sono il modo perfetto per indirizzare i visitatori del tuo sito Web alle pagine dei tuoi social media.

Globo animato in formato SVG con pennarelli e loghi

Loghi SVG animati Spillo

Questo è un globo SVG animato davvero fantastico con marcatori e loghi che funziona bene sia su dispositivi mobili che desktop. È il modo perfetto per visualizzare una posizione.

Gear HTML5 Audio Player

Pacchetti SVG animati Gear Spillo

Ora puoi mostrare facilmente la tua musica in modo creativo. Questo Gear Player offre un'interfaccia utente molto coinvolgente che sicuramente adorerai.

Grafico a torta 3D con JavaScript

Grafico a torta 3D con JavaScript Spillo

Questo grafico a torta 3D è stato sviluppato in alternativa a JavaScript, SVG e VML. Puoi facilmente personalizzarlo, cambiarne posizione, altezza, raggio, attributi delle legende, dimensioni del testo e molto altro.

Esempi di ottimi siti Web che utilizzano la potenza di SVG

Cavalier: Conquistatore di Eccellenza

Sito web in formato svg di cavaliere Spillo

Queste serie di giochi sono state create utilizzando SVG per l'animazione e la grafica. Posture & Balance è il primo gioco creato per una piattaforma chiamata Cavalier che è stata progettata con tecnologie innovative.

Poignee de main virile

Sito Web svg di Poignee Spillo

Questo nuovo sito web animato e fotografico è stato realizzato per lo studio francese di progettazione grafica e creatività digitale Poignee de main virile. Il risultato è incredibile!

iFly50

Sito web iFly50 svg Spillo

Quando la rivista FLY KLM ha celebrato la sua cinquantesima edizione, ha progettato un sito vivacemente animato per la raccolta di viaggi definitiva. In questo modo sono stati presentati i 50 luoghi più belli e affascinanti della Terra.

La mappa stellare di ARK: Star Citizen

svg sito webStarmap Spillo

Utilizzando un'incredibile interfaccia ARK, questo sito Web presenta Robert's Space Industries, un produttore di veicoli spaziali, all'interno del gioco "Star Citizen". Questo è un portale per informazioni, aggiornamenti e acquisti della tua navicella spaziale con cui puoi proteggere i cittadini di Star Citizen.

Mantieni i terremoti strani

Mantieni i siti Web di Terremoti che utilizzano svg Spillo

Keep Earthquakes Weird è una piattaforma creata con straordinari effetti grafici SVG che sono stati costruiti con l'obiettivo di preparare la popolazione di Portland in caso di terremoto. Il contenuto è molto educativo.

30u

Sito web in formato svg 30u Spillo

30u è un e-shop che vende scarpe su un sito creato da sviluppatori che prestano attenzione allo stile e utilizzano alcune interessanti funzionalità SVG.

Gruppo QED

Sito web in formato svg del gruppo QED Spillo

Il sito di QED GROUP ha incredibili illustrazioni suggestive che ti offriranno una fantastica esperienza di navigazione. Il layout del sito è elegante e intelligente.

Melanie David

Sito web svg di Melanie David Spillo

Il sito web di Melanie Daveid è uno dei siti portfolio più belli che si possano trovare sul web. Il sito include transizioni fluide e splendide illustrazioni a mano

WWF Francia – L'Ora della Terra Parigi

Sito web in formato svg del WWF Francia Spillo

Questo sito animato è stato creato per il WWF Francia ed è stato utilizzato per annunciare che il 19 marzo le luci della Torre Eiffel saranno spente per l'Ora della Terra.

Nerisson

Sito Web di Nerisson in formato svg Spillo

Nerisson alias Jimmy Raheriarisoa è un art director francese specializzato in web/mobile design, illustrazione e motion design. Questo è un ottimo sito di portfolio, con belle illustrazioni e caratteristiche grafiche.

Un'azienda di design

Un sito Web in formato svg di design Spillo

One Design Company è un team esperto ed entusiasta di designer, sviluppatori, project manager, scrittori e artisti. Il loro sito è vivido e interattivo, basato su immagini SVG nitide.

MIDORI AOYAMA

Sito web in formato svg di MIDORI AOYAMA Spillo

Midori Aoyama è un DJ e produttore con sede a Tokyo. Ha lanciato il suo party “EUREKA!” è ancora una delle migliori feste di musica house in Giappone. Anche il suo sito è innovativo, un interessante esempio di SVG e di come puoi trarne vantaggio come utente.