Il 2018 sarà l'anno di SVG. Il formato del file di immagine è cresciuto in popolarità e utilizzo negli ultimi anni, ma il 2018 è quando sarà davvero sfondato.
Hai la combinazione di utenti con display ad alta risoluzione e la necessità di un tempo di caricamento velocissimo per ringraziare. E mentre il passaggio a SVG potrebbe sembrare un grosso problema; non è.
SVG è facile da usare e implementare e non è necessario modificare i file esistenti; aggiungi solo nuove immagini come SVG. Ecco tutto ciò di cui hai bisogno per sapere quando si tratta di SVG.
SVG è fatto per il Web
Mozilla lo descrive così:
SVG è un linguaggio basato su XML per la descrizione di immagini vettoriali. È fondamentalmente markup, come HTML, tranne che hai molti elementi diversi per definire le forme che vuoi far apparire nell'immagine e gli effetti che vuoi applicare a quelle forme. SVG serve per contrassegnare la grafica, non il contenuto. Alla fine più semplice dello spettro, hai elementi per la creazione di forme semplici, come e. Le funzioni SVG più avanzate includono (trasforma i colori usando una matrice di trasformazione,) (animano parti della grafica vettoriale) e (applica una maschera sopra l'immagine).
I principali vantaggi di SVG per i web designer includono la possibilità di creare semplici rendering SVG in un editor di codice o di testo, mentre grafici complessi possono essere disegnati in un programma come Adobe Illustrator; Il testo SVG è accessibile; Gli SVG sono facili da stile e da script; e stai creando con un formato vettoriale che si adatta bene a qualsiasi dimensione. I formati SVG sono supportati dai browser moderni, sono a prova di futuro e altamente comprimibili.
Alcuni aspetti negativi sono che la progettazione di SVG può diventare complicata e creare inizialmente un po 'più difficile. L'altro problema è che alcuni browser degradati semplicemente non capiscono cosa siano.
Hai bisogno di una migliore comprensione di SVG? Abbiamo una guida per principianti su SVG.
Come i designer stanno usando SVG
Uno dei vantaggi di SVG è che puoi fare molte cose diverse con esso. SVG può essere utilizzato per:
- Loghi
- Sfondi, motivi e trame
- Animazione
- Immagini reattive
- Icone
I progettisti possono utilizzare SVG per qualsiasi elemento in una progettazione in cui un formato vettoriale è una soluzione applicabile. Il può sostituire JPG, PNG e GIF, tra gli altri formati.
Regola dei formati vettoriali
Ci sono buone probabilità che tu utilizzi più formati vettoriali. SVG è indipendente dalla risoluzione. E questo è un enorme vantaggio perché sai che le tue immagini sembreranno grandiose ovunque.
Ciò che è particolarmente utile nel lavorare con le immagini SVG è che non è necessario modificare il flusso di lavoro per implementarle. Se stai progettando in software come Illustrator o Sketch, il processo, diverso dall'esportazione finale, è identico. L'unico problema è che probabilmente vorrai trasformare qualsiasi elemento di testo in profili in Illustrator, ma molte persone lo fanno già.
Quando prepari i file SVG, c'è una cosa fondamentale da ricordare. Per mantenerli il più piccoli possibile, assicurati di eliminare qualsiasi spazzatura che non ti serve. (Cancellare quel cartone!) SVG sul Web ha alcuni ottimi consigli per disegnare elementi e salvare i file SVG nel miglior modo possibile.
Il formato basato sul testo è buono per SEO
L'utilizzo di SVG offre anche un po 'di bonus per i progettisti esperti di motori di ricerca. Poiché SVG utilizza il testo effettivo nella formattazione, i motori di ricerca possono leggere meglio le immagini.
Sì, puoi aggiungere alt informazioni con altre immagini, ma c'è solo tanto spazio per le parole chiave. Con SVG puoi creare più immagini di ricerca e solo caricare. Google indicizza tutti i contenuti SVG, inclusi i file standalone e quando gli SVG sono incorporati direttamente in HTML.
SVG è leggero
A differenza di altri tipi di file vettoriali che possono essere molto pesanti, gli SVG sono codice. Il codice è veloce. È così semplice. Bene? quasi.
Quando si tratta di quei fantastici disegni vettoriali che hai salvato come SVG, controlla le dimensioni dei file prima di andare troppo lontano. Mentre i formati PNG possono crescere in modo esponenziale quando viene aggiunta la trasparenza, gli SVG tendono a crescere in base al numero di percorsi e riempimenti dell'immagine.
Se SVG è enorme, considera l'esportazione e JPG o PNG. (Anche se sembra contraddittorio, la realtà è che la maggior parte dei progettisti continuerà a utilizzare un mix di tipi di file con le immagini, aspettandosi solo di usare più SVG di quanto non sia stato in passato.)
La modifica è facile
Se sei abituato a disegnare icone o loghi o qualsiasi altra cosa nel software di disegno vettoriale, nulla sul processo di modifica cambia per te.
Ma se scrivi SVG, sei pronto per una sorpresa. Basta cambiare la parola o le coordinate o il colore nell'editor di testo e boom, il cambiamento è fatto. È difficile rendere l'editing più facile di così.
Crea immagini fisse o animate con SVG
A differenza di molti altri formati di immagine, che consentono di avere un'immagine ferma o in movimento, SVG consente entrambi. È possibile creare un fermo immagine o un'animazione. E tutto funziona allo stesso modo. (Questo nifty esempio è un tutorial su come animare un elemento lungo un percorso SVG!)
Questi piccoli vantaggi stanno aiutando a spingere SVG in prima linea nella mente dei progettisti. Non devi imparare un nuovo strumento o tecnica; hai già tutto ciò di cui hai bisogno con SVG.
Conclusione
Ecco il motivo per cui il 2018 sarà l'anno in cui SVG prenderà il sopravvento: è pratico.
Con tutti gli schermi ad alta risoluzione, i formati vettoriali sono davvero la soluzione giusta. Tutto scala in modo impeccabile e non devi preoccuparti della pixelizzazione. Gli SVG creano grandi loghi (statici o reattivi), grafici e sfondi, icone e immagini di piccole dimensioni e animazioni. I file sono piccoli e si caricano rapidamente, e non c'è una curva di apprendimento enorme quando si tratta di implementare SVG nella progettazione del tuo sito web.
Puoi letteralmente iniziare a usare le immagini SVG in questo momento.