Guida essenziale ai file SVG

Guida essenziale ai file SVG - www.clnsolution.com
1
Sommario
Cosa sono i file SVG .......................................................................3
I principali vantaggi dei file .svg.......................................................7
I contro delle immagini .svg.............................................................8
Programmi per aprire e usare i file .svg ...........................................9
Materiale didattico per approfondire .............................................. 10
Risorse web gratuite ..................................................................... 11
Le conclusioni ............................................................................... 12
Guida essenziale ai file SVG - www.clnsolution.com
2
Cosa sono i file SVG
Sempre più spesso navigando nel web ci si imbatte in questi
fantomatici file svg.
Ma cosa sono questi file? A cosa servono? Come si usano?
Ecco una breve introduzione che ti renderà tutto più chiaro e ti
permetterà di iniziare ad avvicinarti a questa “tecnologia”.
I file .svg (Scalable Vector Graphics) sono file ottenuti applicando
appunto
la
tecnologia
della
grafica
vettoriale.
La
maggiore
potenzialità di questa tecnologia può riassumersi nel fatto che :
È possibile ridimensionare a piacere qualsiasi elemento grafico,
mantenendone la qualità.
Più in particolare, nel visualizzare un dato oggetto grafico su
supporti
di
differente
natura
(stampa, video, plotter,
schermo
di cellulare, …), si è certi di ottenere sempre la massima qualità
che quei supporti possono fornire. Inoltre le immagini vettoriali
occupano molto meno spazio in memoria e, quindi, permettono
elaborazioni complesse. Non solo, ma con le immagini .svg è
possibile creare anche delle animazioni.
Guida essenziale ai file SVG - www.clnsolution.com
3
Se vuoi avere un’idea di un’animazione basilare puoi visitare questa
pagina.
Non ti sembra straordinario???
Guarda tu stesso la differenza tra un’immagine di un carattere in
formato
raster
(es.
.jpg)
e
uno
vettoriale
(es.
svg).
E’ evidente che puoi lavorare su qualsiasi supporto e ottenere
sempre il massimo dei risultati.
Specialmente per
questo motivo le
immagini vettoriali sono
largamente utilizzate nel web e in tutti gli ambiti grafici, soprattutto
quelli collegati alla stampa di grandi superfici (es. manifesti,
cartelloni pubblicitari, stampe per impalcature, ecc). Utilizzando le
Guida essenziale ai file SVG - www.clnsolution.com
4
immagini vettoriali puoi dire addio alle vecchie immagini sgranate
che utilizzavano la tecnologia raster.
Come è possibile tutto ciò?
Il concetto su cui si basano le immagini vettoriali è molto semplice,
mediante un algoritmo matematico (ed ecco che subentrano i
vettori) si determinano punti, linee, poligoni che definiscono
l’immagine
stessa
ed
anche
le
sfumature;
risultano
quindi
indipendente dalla risoluzione. Un’immagine viene memorizzata
come un’equazione che si sviluppa da un punto iniziale e termina in
un altro punto, da qui il fatto che occupano poco spazio in memoria,
infatti è possibile aprire una generica immagine vettoriale .svg con
il block notes e visualizzare il codice e l’equazione ad essa
associata.
Per approfondire l’argomento sui metodi numerici per la grafica
puoi andare qui.
Uso nell’editoria e nel 3D
La grafica vettoriale con i file .svg ha un notevole utilizzo
nell'editoria stampata, nella grafica su materiali speciali (es. come il
taglio
delle
lamiere
nell'architettura,
in
acciaio
nell'ingegneria e
o
serigrafie
sul
vetro),
nella grafica computerizzata.
Tutti i programmi di grafica tridimensionale salvano i lavori
definendo gli oggetti come aggregati di linee, punti e poligoni.
Allo stesso modo i programmi di scrittura “generano” in tempo
reale (mentre digitiamo e dopo aver salvato il file) i caratteri che
noi vediamo a schermo.
Guida essenziale ai file SVG - www.clnsolution.com
5
Curiosità
In questo momento leggendo questo report stai
visualizzando una sorta di immagine vettoriale ;-)
Hai capito bene! Forse non tutti sanno che i font di testo utilizzano i concetti di
grafica vettoriale. Pensa, aumentando la dimensione dei caratteri, questi
mantengono comunque la massima risoluzione, senza che si sgranino.
Ma non è tutto, fin da piccoli abbiamo avuto a che fare con questo
tipo di immagini: ricordi quelle cartine geografiche che riempivano i
muri della tua aula a scuola? Bene quelle immagini erano in grafica
vettoriale, infatti questo tipo di immagini nascevano proprio in
ambito militare proprio per la mappatura dei territori.
I primi videogames
Lo sapevi che i vecchi videogiochi, ti sto parlando dei
primi video-games, utilizzavano la grafica vettoriale?
Utilizzavano questo tipo di grafica per far fronte ai costi
eccessivi di memoria RAM e fissa. Oggi, in seguito
all’abbattimento dei costi relativi all’hardware, questa
tecnologia non è più utilizzata in tale ambito. Quando
ripensi a quei momenti in cui ti divertivi con Arcanoid ad esempio, guardali
con occhi diversi: sei stato uno dei primi utilizzatori di immagini vettoriali dal
punto di vista ludico.
L’uso nel web
Per le sue doti di compressione del peso dei file e di conseguenza la
leggerezza e velocità nel caricamento di complesse immagini ,l’uso
principale dei file .svg è nel web, infatti la maggior parte dei
Guida essenziale ai file SVG - www.clnsolution.com
6
browser supporta il formato svg, anche se il primo a dare supporto
a questo file fu Konqueror. Quindi con il tuo browser (software per
navigare in internet) sei in grado di visualizzare un file .svg.
I principali vantaggi dei file .svg
Come
riepilogo
elenchiamo
brevemente
quelle
che
sono
le
caratteristiche positive:
È un file vettoriale: rispetto ad un “normale” formato grafico
raster (es. jpeg, bmp o gif), è possibile scalare e ingrandire a
piacimento l’immagine SVG senza avere una perdita di qualità
dell’immagine stessa;
È un file testuale: grazie a questa caratteristica è possibile creare
e modificare facilmente un file SVG con un comune editor di testo;
Si può comprimere: per il semplice fatto che il file è testuale si
può comprimere in modo efficiente;
È gratis: non bisogna pagare nulla per usare un file .svg (tranne
alcuni programmi) perché è un formato Open;
Si basa sull’XML: in questo modo gli utilizzi si estendono a tutte le
già esistenti applicazioni create per l’XML;
Guida essenziale ai file SVG - www.clnsolution.com
7
È
“VIVA”:
ovvero
l’immagine
SVG
può
essere
interattiva,
rispondendo a particolari azioni compiute dall’utente come ad
esempio il click del mouse;
E’ animata:
si
possono
creare
delle
fantastiche
animazioni
attraverso l’uso del linguaggio di animazione SMIL (Synchronized
Multimedia Integration Language) anch’esso sviluppato dal W3C.
I contro delle immagini .svg
Da quanto detto finora, sembrerebbe che il file .svg hanno solo
vantaggi. Analizziamo anche qual è il rovescio della medaglia.
Lo
svantaggio
principale
nell’usare
questa
tecnologia
è che il peso computazionale (cioè di calcolo) di un file svg
mediamente supera quello di una immagine che utilizza una
tecnologia tradizionale, in pratica è come se l’elaboratore dovesse
ricreare da zero l’immagine modificata.
Analizzando però i pro e i contro appare evidente di quanto i primi
siano più numerosi, portando ad un effettivo vantaggio nell’uso di
tali file e proprio per questo motivo l’uso di immagini vettoriali e file
svg si sta sempre più diffondendo.
Guida essenziale ai file SVG - www.clnsolution.com
8
Programmi per aprire e usare i file .svg
Finora abbiamo compreso come funzionano questi file e perché si
sono così tanto diffusi nel web e in varie applicazioni, ma facciamo
una veloce panoramica sui principali software che permettono di
aprire e creare i file .svg.
Per la creazione ti segnaliamo alcuni programmi sia open source
che proprietari (a pagamento) :

Adobe Illustrator

Macromedia FreeHand

Corel Draw

Xara Xtreme (open source)

Inkscape (open source)

iDraw

Drawit (Mac)

SK1 (Linux)

Scribus (Mac, Win, Linux, OS/2)
Una breve nota su Adobe Illustrator
Il miglior modo per imparare ad usare un software è vedere come
funziona e ripetere subito le azioni appena apprese. Per questo
motivo ti invitiamo a guardare questo semplice video tutorial per
imparare subito ad utilizzare Adobe Illustrator,
uno dei software
maggiormente utilizzati per la grafica vettoriale .
Guida essenziale ai file SVG - www.clnsolution.com
9
Visualizzatore di SVG per il browser
Se vuoi usare al meglio un .svg il consiglio è di scaricarti ed
installarti questo programma di Adobe. Visita questa pagina per il
download.
Convertire da SVG a RASTER
Per convertire un file SVG in un formato Raster ecco un comodo
programma che funziona direttamente on line. Visita la pagina del
servizio.
Usare i file SVG con Skype
Se
usi
Skype
(programma
gratuito
per
comunicare
tramite
Internet) puoi installare un bellissimo plugin che ti permetterà di
avere una lavagna virtuale che usa SVG. Visita questa pagina.
File svg da scaricare
Se vuoi usare da subito i file ecco una serie di file già pronti da
modificare. Visita questo sito.
Materiale didattico per approfondire
Se vuoi aumentare le tue conoscenze su questo argomento ti
segnaliamo questi libri.
Cultura e strumenti per il visual design. Laboratorio di grafica vettoriale
Grafica vettoriale. Guida agli effetti speciali con: Illustrator, CorelDraw,
Xara, Freehand
Vettor dal Bitmap al vettoriale. Teoria e pratica della conversione delle
immagini da raster a vettoriali. Con CD-ROM
Guida essenziale ai file SVG - www.clnsolution.com
10
3 Video tutorial
VIDEO 1
VIDEO 2
VIDEO 3
Risorse web gratuite
Se l’argomento ti interessa e vuoi approfondire, esistono numerose risorse
gratuite in Internet; ricordi, è Open Source quindi molti sviluppatori hanno
creato molte guide in merito.
Una guida on line per conoscere ed usare le prime istruzioni per creare il
tuo primo file SVG
Guida ufficiale di riferimento.
Pagina ufficiale SVG (W3C).
Guida completa (per tecnici)
Guida essenziale ai file SVG - www.clnsolution.com
11
Le conclusioni
Ti ringrazio per aver letto questa guida essenziale ai file SVG. Spero che i
contenuti ti siano stati d’aiuto per iniziare a comprendere meglio le grosse
potenzialità di questa nuova tecnologia.
Ti invito a conoscere meglio le nostre iniziative visitando il nostro sito ufficiale
www.clnsolution.com
Usi Facebook?
Bene allora ti aspettiamo anche nella nostra pagina ufficiale che puoi trovare a
questo link http://www.facebook.com/clnsolution.it. Spesso riserviamo delle
sorprese ai nostri fan ovvero sconti o materiale gratuito da scaricare per la
propria formazione, pertanto clicca su MI PIACE per restare aggiornato.
Ti aspettiamo!
Grazie!
Guida essenziale ai file SVG - www.clnsolution.com
12