La guida pratica per principianti di SVG

Sebbene il formato non sia particolarmente nuovo, le immagini SVG sono sempre più apprezzate nella progettazione di siti Web. Tutti i principali browser Web supportano il formato e SVG sta cambiando il modo in cui pensiamo e rendiamo le immagini per il web.

Perché sono così popolari? E cosa c'è di diverso in un file SVG? Oggi abbiamo le risposte e tutto il resto che devi sapere per iniziare con questo tipo di file. (Come piccolo bonus, tutte le immagini in questo post sono disponibili in SVG da Creative Market.)

Cos'è SVG?

Scalable Vector Graphics, o SVG, sono un formato di immagine basato su vettori sviluppato per il web. (Puoi trovare ulteriori informazioni sui formati vettoriale rispetto a quelli raster in un precedente articolo di Design Shack.)

Il formato è diventato più popolare grazie ai display ad alta definizione, in cui gli utenti possono vedere ogni pixel (se esistono). Poiché SVG è un formato vettoriale, l'immagine viene visualizzata allo stesso modo e con dettagli perfetti, indipendentemente dalle dimensioni.

Il linguaggio di markup è stato inizialmente sviluppato dal World Wide Web Consortium, che è più comunemente noto come W3C, nel 1999. W3C definisce SVG come un linguaggio di markup per descrivere applicazioni e immagini grafiche bidimensionali e un set di interfacce grafiche relative agli script .? È supportato da tutti i browser moderni, quindi non devi preoccuparti se i file SVG verranno visualizzati correttamente o meno e funzionerà indipendentemente dal tipo di dispositivo.

Applicazioni pratiche

Quindi cosa rende SVG così popolare e perché sono più i designer che lo usano? Semplicemente, perché funziona.

I file SVG sono piccoli e scalabili. Mentre il formato è più adatto per le forme, ha una varietà di applicazioni pratiche. Loghi del marchio, icone, elementi dell'interfaccia utente e molti altri bit di progettazione possono funzionare nel formato SVG. Il più grande vantaggio è che sono vettori. Quindi un'immagine SVG può essere utilizzata praticamente in qualsiasi dimensione. (Alcuni dei file più piccoli possono essere così grandi).

I file SVG sono facili da manipolare e controllare. Non solo è possibile salvare un SVG come immagine statica, ma è anche possibile aggiungere interattività e filtri per rendere l'immagine ancora più divertente. (I file SVG possono essere animati e colorati).

Ecco alcune applicazioni pratiche per l'utilizzo di SVG:

  • Loghi o immagini
  • Come immagine di sfondo
  • Come oggetto, come un pulsante
  • Mappatura
  • Grafici o disegni

Come regola generale, SVG è più adatto per immagini che potrebbero evolvere o cambiare nel tempo o per tipo di dispositivo o includere animazioni o altri effetti dinamici. Utilizza il formato per immagini come logo, schizzi, forme, grafici e grafici o altre immagini semplici.

A favore dell'utilizzo di SVG

Quindi, perché dovresti allontanarti dal fidato JPG o GIF in SVG? Ci sono molte ragioni per cui questo formato potrebbe essere il miglior uso nei tuoi progetti. (E c'è anche il potenziale per usare SVG per la stampa.)

  • SVG è un formato vettoriale. Questo da solo è importante quando si pensa al design reattivo, in cui le dimensioni dell'immagine cambiano spesso in base al dispositivo. Un SVG è abbastanza piccolo che un file può fare tutto il lavoro e non ci sono perdite di qualità su schermi più grandi.
  • Le immagini e i comportamenti SVG sono definiti con XML, il che significa che le immagini possono essere cercate, indicizzate, scritte e compresse.
  • Puoi fare quasi tutto con un'immagine SVG che puoi fare con qualsiasi altra immagine, ad esempio includendo una varietà di tecniche di progettazione. È facile aggiungere filtri, modalità di fusione, effetti burocrazia, colore, ritaglio e mascheratura, ombre esterne e quasi tutte le altre tecniche che ti piacciono.
  • I file SVG sono accessibili.
  • SVG funziona con gli standard web aperti.
  • Puoi creare SVG usando il codice basato su testo o con l'immagine che disegni. Ciò consente una certa libertà, a seconda delle esigenze e del livello di esperienza in diverse aree.
  • Le dimensioni dei file sono minuscole e possono essere ridotte al minimo. Ciò significa che la grafica che potrebbe essere stata di grandi dimensioni non lo è, aumentando i tempi di caricamento. (Sempre un bonus.)

Contro di usare SVG

Probabilmente sei venduto su SVG dopo aver letto tutti i benefici, giusto? Ma ci sono alcuni aspetti negativi da considerare.

  • I browser meno recenti, ad esempio Internet Explorer 8 o versioni precedenti, non supportano SVG. Probabilmente puoi trovare un work-around (o potrebbe non interessarti), ma dovresti sapere che potrebbero esserci alcuni utenti che non vedono le tue immagini.
  • SVG non funziona per immagini complesse come le foto. È un formato progettato solo per forme e linee.

Cosa c'è di nuovo in SVG?

Il futuro di SVG è appena iniziato. Come formato di immagine mobile adottato (e standard), l'utilizzo e lo sviluppo di SVG continueranno a crescere.

Secondo W3C,? SVG 2 è attualmente in fase di sviluppo e aggiungerà nuove funzionalità di facile utilizzo a SVG, oltre a una più stretta integrazione con HTML, CSS e DOM e funzionalità deprecating non supportate da tutti i browser.

Altre aggiunte sono state lanciate in giro. Le aziende di stampa hardware stanno cercando modi per utilizzare meglio SVG per i processi di stampa e hanno il supporto di leader del settore come Adobe e Canon. Anche l'utilizzo nella mappatura e GIS si sta espandendo, consentendo migliori funzionalità di mappatura e zoom.

Quando inizi a pensarci davvero, c'è un'occasione quasi infinita su come utilizzare e implementare SVG in progetti sul Web e nella progettazione stampata. (Questa è una delle bellezze del formato basato su vettori).

Risorse SVG

Ora che sei un po 'più entusiasta di SVG e puoi capire perché e come può essere utile per i tuoi progetti, abbiamo un elenco di risorse per aiutarti a iniziare.

  • Esportazione di SVG per il Web con Adobe Illustrator
  • Incorpora SVG direttamente nelle pagine HTML
  • Pronto e funzionante con SVG Video Series
  • Profili SVG
  • Trucchi CSS: utilizzo di SVG

Conclusione

Stai già utilizzando SVG per i tuoi progetti? Se no, sei pronto a fare il cambiamento?

SVG sta crescendo in popolarità quasi ogni giorno e poiché si tratta di uno strumento open source, questi cambiamenti e progressi vengono letti per te immediatamente.Non sei legato a nessun fornitore o prodotto e puoi creare immagini completamente compatibili sul Web moderno.

Fotografie Stock Per gentile concessione del mercato creativo.