SVG

Il formato SVG è 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, diversamente da GIF, JPEG, WBMP e PNG che sono di grandi dimensioni. 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, consentendo 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. 

Per salvare i disegni nel formato SVG, potete usare i comandi 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.

Applicare gli effetti SVG

Puoi 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. Puoi usare gli effetti con le proprietà predefinite, modificare il codice XML per produrre effetti personali o scrivere nuovi effetti SVG.

Quando applicate un effetto del filtro SVG, Illustrator visualizza sulla tavola da disegno la versione rasterizzata dell'effetto. Potete controllare la risoluzione di questa anteprima modificando le impostazioni della risoluzione di rasterizzazione del documento.

Importare gli effetti da un file SVG

Panoramica del pannello Interattività SVG

Il pannello Interattività SVG consente di vedere tutti gli eventi e i file JavaScript associati al file corrente.
Potete usare 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).

Eliminare un evento dal pannello Interattività SVG

È possibile utilizzare il pannello Interattività SVG per eliminare uno o tutti gli eventi.

Elencare, aggiungere o eliminare gli eventi collegati al file

Selezionate Collega file JavaScript   e scegliete Aggiungi per aggiungere ulteriori file JavaScript. Per rimuovere invece la voce JavaScript selezionata, scegliete Rimuovi.

Aggiungere interattività SVG al disegno

Eventi SVG

Attiva l'azione quando un elemento viene richiamato (ad esempio, selezionato dal puntatore).

Attiva l'azione quando l'elemento smette di essere attivo (spesso quando diventa attivo un altro elemento).

Attiva l'azione con un clic del mouse o premendo un tasto, a seconda dell'elemento SVG.

Attiva l'azione quando il pulsante del mouse è premuto sopra un elemento.

Attiva l'azione quando il pulsante del mouse è rilasciato sopra un elemento.

Attiva l'azione quando si fa clic con il pulsante del mouse sopra un elemento.

Attiva l'azione quando il puntatore viene portato sopra un elemento.

Attiva l'azione mentre il puntatore è sopra l'elemento.

Attiva l'azione quando il puntatore viene portato fuori dall'elemento.

Attiva l'azione quando un tasto resta premuto.

Attiva l'azione mentre viene premuto un tasto.

Attiva l'azione quando viene rilasciato un tasto.

Attiva l'azione dopo che il documento SVG è stato completamente elaborato dal browser. Usa questo evento per attivare funzioni di inizializzazione da eseguire una sola volta.

Attiva l'azione quando un elemento non viene caricato correttamente o si verifica un altro errore.

Attiva l'azione quando il caricamento della pagina viene interrotto prima di completare il caricamento dell'elemento.

Attiva l'azione quando il documento SVG viene rimosso da una finestra o frame.

Attiva un'azione quando si cambia il livello di zoom del documento.

Attiva l'azione quando viene ridimensionata la visualizzazione del documento.

Attiva l'azione quando il documento viene visualizzato con scorrimento.

Suggerimenti per la creazione di file SVG

• Utilizzate i 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.

• I dati raster non sono scalabili nel visualizzatore SVG e non possono essere modificati come altri elementi SVG. Potete semplicemente evitare di creare disegni che richiedano di essere rasterizzati nel file SVG. 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 di scripting, quali un effetto di rollover.

Opzioni di esportazione SVG ottimizzate per il Web

È disponibile una nuova opzione di esportazione SVG (File > Esporta > Esporta come > 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. Per ulteriori informazioni, consultate Opzioni di esportazione SVG.

Risorse correlate

Contattaci