SVG

I formati immagine bitmap per Web (GIF, JPEG, WBMP e PNG) descrivono le immagini mediante una griglia di pixel. I file risultanti tendono a essere di grandi dimensioni, limitati a una singola (spesso bassa) risoluzione e usano grandi quantità di larghezza di banda sul Web. Il formato SVG, al contrario, è un formato vettoriale che descrive le immagini come forme, tracciati, testo ed effetti dei filtri. I file risultanti sono compatti e forniscono grafica di alta qualità sul Web, in stampa e perfino in dispositivi mobili con risorse limitate. Gli utenti possono ingrandire la visualizzazione di un’immagine SVG senza perdita di contrasto, dettaglio o nitidezza. Inoltre, il formato SVG supporta in modo avanzato testo e colori, e consente la visualizzazione delle immagini come appaiono sulla tavola da disegno di Illustrator.

Il formato SVG è completamente basato su XML e offre diversi vantaggi sia agli sviluppatori sia agli utenti. Con il formato SVG, potete usare XML e JavaScript per creare grafica per il Web che risponde alle azioni dell’utente con effetti sofisticati, quali evidenziamento, consigli, audio e animazioni.

Potete salvare il disegno nel formato SVG usando il comando Salva, Salva con nome, Salva una copia o Salva per web e dispositivi. Per accedere al set completo delle opzioni di esportazione SVG, usate il comando Salva, Salva con nome o Salva una copia. Il comando Salva per Web e dispositivi offre un sottoinsieme di opzioni di esportazione SVG applicabili al lavoro per il Web.

Il modo in cui impostate il disegno in Illustrator si riflette sul file SVG risultante. Tenete presente le seguenti considerazioni:

• Servitevi dei livelli per strutturare un file SVG. Quando salvate un’immagine in formato SVG, ogni livello viene convertito in un elemento gruppo (<g>). Ad esempio, un livello chiamato Pulsante1 diventa <g id=“Pulsante1_ver3.0”> nel file SVG. I livelli nidificati diventano gruppi nidificati SVG, mentre i livelli nascosti vengono mantenuti con la proprietà di stile SVG display="none".

• Se volete che gli oggetti su livelli diversi appaiano trasparenti, regolate l’opacità di ogni oggetto anziché di ogni livello. Se cambiate l’opacità del livello, il file SVG risultante non presenterà la trasparenza nel modo in cui appare in Illustrator.

• I dati raster non sono scalabili nel visualizzatore SVG e non possono essere modificati come altri elementi SVG. Se possibile, evitate quindi di creare disegni che richiedano di essere rasterizzati nel file SVG. Durante il salvataggio in formato SVG vengono rasterizzati le trame sfumate e gli oggetti con gli effetti Rasterizza, Artistico, Sfocatura, Tratti pennello, Distorsione, Effetto pixel, Contrasta, Schizzo, Stilizzazione, Texture e Video. Allo stesso modo, anche gli stili di grafica che includono questi effetti producono rasterizzazione. Usate gli effetti SVG per aggiungere effetti grafici senza provocare rasterizzazione.

• Per migliorare le prestazioni SVG, servitevi dei simboli e semplificate i tracciati nel disegno. Inoltre, se le prestazioni sono una priorità, evitate di usare pennelli che producono molti dati di tracciato, come Carboncino, Cenere e Pennino.

• Usate sezioni, mappe immagini e script per aggiungere collegamenti Web a un file SVG.

• Un linguaggio di script, come JavaScript, consente di aggiungere enormi funzionalità a un file SVG. Con il puntatore e la tastiera, ad esempio, si possono avviare funzioni quali un effetto di rollover. Inoltre, tramite il modello DOM (Document Object Model), gli script possono accedere e modificare il file SVG, ad esempio inserendo o eliminando elementi SVG.

Potete usare gli effetti SVG per aggiungere al disegno proprietà grafiche, come ad esempio le ombre esterne. Gli effetti SVG si differenziano dagli equivalenti bitmap perché sono basati su XML e sono indipendenti dalla risoluzione. In realtà un effetto SVG è semplicemente un insieme di proprietà XML che descrivono varie operazioni matematiche. L’effetto risultante viene applicato all’oggetto di destinazione invece che alla grafica di origine.

Illustrator fornisce un set di effetti SVG predefiniti. Potete usare gli effetti con le proprietà predefinite, modificare il codice XML per produrre effetti personali o scrivere nuovi effetti SVG.

Usate il pannello Interattività SVG (Finestra > Interattività SVG) per aggiungere interattività ai disegni esportati per la visualizzazione in un browser Web. Ad esempio, potete definire un evento che attiva un comando JavaScript con cui creare un’animazione nella pagina Web in risposta a un’azione dell’utente (quale lo spostamento del cursore del mouse sopra un oggetto). Il pannello Interattività SVG consente inoltre di vedere tutti gli eventi e i file JavaScript associati al file corrente.

• Per eliminare un evento, selezionatelo e fate clic sul pulsante Elimina o scegliete Elimina evento dal menu del pannello.
• Per eliminare tutti gli eventi, scegliete Cancella eventi dal menu del pannello.

È disponibile una nuova opzione di esportazione SVG (File > Esporta > SVG). Il nuovo flusso di lavoro consente di creare file SVG standardizzati e ottimizzati per il Web per i progetti destinati al Web e alla visualizzazione su schermo.

Sono disponibili le seguenti opzioni:

• Stile. Scegliete come deve essere scritto il codice risultante nel file SVG. Le opzioni disponibili sono CSS interno, Stile in linea e Attributi di presentazione.
  
• Font. Scegliete come devono essere rappresentati i font nel file SVG. L’opzione Contorni mantiene la definizione dei tracciati e offre una maggiore compatibilità.
• Immagini: scegliete se le immagini devono essere incorporate nel documento o gestite come file collegati esterni al documento.
• ID oggetto: scegliete in che modo i tipi di ID (nomi) vengono assegnati agli oggetti nel file SVG. Le opzioni disponibili sono Nomi livello, Minimo e Univoco. Questa opzione determina come vengono gestiti eventuali nomi di oggetti duplicati e come gli oggetti vengono denominati nel file CSS esportato.
• Decimale: specificate quanti dati mantenere per il posizionamento preciso degli oggetti. Con un valore Decimale elevato gli oggetti vengono disposti con maggiore precisione, per una maggiore fedeltà visiva della grafica SVG renderizzata. Tuttavia, questo comporta anche un aumento delle dimensioni del file SVG esportato risultante.
• Riduci dimensioni: ottimizza la dimensione del file SVG rimuovendo spazi e gruppi vuoti. Questa opzione riduce anche la leggibilità del codice SVG risultante.
• Reattivo. Selezionate questa opzione affinché il contenuto SVG generato possa ridimensionarsi per adattarsi al browser. Non viene scritto alcun valore assoluto di dimensione.
  
• Mostra codice: apre il contenuto esportato nell’editor di testo predefinito.
• Mostra nel browser (icona): visualizza l’immagine nel browser Web predefinito.