Come (e perché) SVG subentrerà nel 2018
Il 2018 sarà l'anno di SVG. Il formato del file di immagine è cresciuto in popolarità e in uso costante negli ultimi anni, ma è il 2018 quando arriverà davvero.
Hai la combinazione di utenti con display ad alta risoluzione e la necessità di un tempo di caricamento velocissimo da 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; basta aggiungere nuove immagini come SVG. Ecco tutto ciò che ti serve per sapere quando si tratta di SVG.
Esplora risorse di progettazione
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 per il fatto che hai molti elementi diversi per definire le forme che vuoi che appaiano nella tua immagine e gli effetti che vuoi applicare a quelle forme. SVG serve per contrassegnare la grafica, non il contenuto. All'estremità più semplice dello spettro, hai elementi per creare forme semplici, come e. Le funzioni SVG più avanzate includono (trasforma i colori usando una matrice di trasformazione, ) (anima le parti della grafica vettoriale, ) e (applica una maschera sopra la parte superiore dell'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 la grafica complessa può essere disegnata in un programma come Adobe Illustrator; Il testo in formato SVG è accessibile; Gli SVG sono facili da modellare e scrivere; e stai creando con un formato vettoriale che viene visualizzato bene in qualsiasi dimensione. I formati SVG sono supportati dai browser moderni, sono a prova di futuro e altamente comprimibili.
Alcuni degli aspetti negativi sono che la progettazione di SVG può diventare complicata e sono un po 'più difficili da creare inizialmente. L'altro problema è che alcuni browser degradati semplicemente non capiscono cosa sono.
Hai bisogno di una migliore comprensione di SVG? Abbiamo una guida per principianti di SVG.
Come i designer utilizzano 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 un disegno in cui un formato vettoriale è una soluzione applicabile. Possono sostituire JPG, PNG e GIF, tra gli altri formati.
Regola dei formati vettoriali
C'è una buona probabilità che utilizzerai più formati vettoriali. SVG è indipendente dalla risoluzione. E questo è un vantaggio enorme perché sai che le tue immagini staranno benissimo ovunque.
La cosa particolarmente interessante 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 contorni 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 tutta la spazzatura che non ti serve. (Cancella quel pannello di montaggio!) SVG sul Web offre alcuni ottimi consigli per disegnare elementi e salvare i file SVG nel miglior modo possibile.
Il formato testuale è buono per il SEO
L'uso di SVG comporta anche un vantaggio per i progettisti esperti dei motori di ricerca. Poiché SVG utilizza il testo effettivo nella formattazione, i motori di ricerca possono leggere meglio le immagini.
Sì, puoi aggiungere informazioni alt con altre immagini, ma c'è solo così tanto spazio per le parole chiave. Con SVG puoi creare più immagini di facile ricerca e caricarle. Google indicizza tutto il contenuto SVG, compresi i file autonomi e quando gli SVG sono incorporati direttamente in HTML.
SVG è leggero
A differenza di altri tipi di file basati su vettori che possono diventare molto veloci, gli SVG sono codici. Il codice è veloce. È così semplice. Be 'quasi.
Quando si tratta di quei fantastici disegni vettoriali che hai salvato come SVG, controlla le dimensioni del file prima di andare troppo avanti. Mentre i formati PNG possono crescere in modo quasi esponenziale quando si aggiunge la trasparenza, gli SVG tendono a crescere in base al numero di percorsi e riempimenti dell'immagine.
Se l'SVG è enorme, prendi in considerazione l'esportazione e un JPG o PNG. (Anche se sembra contraddittorio. La realtà è che la maggior parte dei designer continuerà a utilizzare un mix di tipi di file con immagini; aspettati solo di utilizzare più SVG di quanto hai fatto in passato.)
La modifica è facile
Se sei abituato a disegnare icone o loghi o qualsiasi altra cosa nel software di disegno vettoriale, nulla del processo di modifica cambia per te.
Ma se scrivi SVG, ti aspetta una sorpresa. Basta cambiare la parola o le coordinate o il colore nell'editor di testo e boom, il cambiamento è fatto. È difficile rendere la modifica più semplice di così.
Crea immagini fisse o animate con SVG
A differenza della maggior parte degli altri formati di immagine, che consentono di avere un'immagine fissa o in movimento, SVG consente di utilizzare entrambi. È possibile creare un fermo immagine o un'animazione. E funziona praticamente allo stesso modo. (Questo elegante 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 designer. Non devi imparare un nuovo strumento o tecnica; hai già tutto ciò di cui hai bisogno con SVG.
Conclusione
Ecco il grande motivo per cui il 2018 sarà l'anno in cui SVG inizierà a prendere il sopravvento: è pratico.
Con chiunque utilizzi display ad alta risoluzione, i formati vettoriali sono davvero la strada da percorrere. Tutto si ridimensiona perfettamente e non devi preoccuparti della pixelazione. Gli SVG creano grandi loghi (statici o reattivi), grafici e sfondi, icone e piccole immagini e animazioni. I file sono piccoli e si caricano rapidamente e non c'è un'enorme curva di apprendimento quando si tratta di implementare SVG nella progettazione del tuo sito Web.
Puoi letteralmente iniziare a usare le immagini SVG in questo momento.
 SVG subentrerà nel 2018){kind=link}