Il formato 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.

Applicare gli effetti 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.

Nota:

Per modificare i filtri SVG predefiniti di Illustrator, usate un editor di testo per modificare i file Adobe SVG Filters.svg nella cartella Documenti e Impostazioni/<userdir>/Application Data/Adobe/Adobe Illustrator <numero versione> Impostazioni/<posizione>. Potete modificare le definizioni esistenti del filtro, eliminare le definizioni del filtro e aggiungere nuove definizioni.

  1. Selezionate l’oggetto o il gruppo (oppure impostate come destinazione un livello nel pannello Livelli).
  2. Effettuate una delle seguenti operazioni:
    • Per applicare un effetto con le impostazioni predefinite, selezionate l’effetto nella sezione inferiore del sottomenu Effetto > Filtri SVG.

    • Per applicare un effetto con impostazioni personali, scegliete Effetto > Filtri SVG > Applica filtro SVG. Nella finestra di dialogo, selezionate l’effetto e fate clic sul pulsante Modifica filtro SVG .Modificate il codice predefinito e fate clic su OK.

    • Per creare e applicare un nuovo effetto, scegliete Effetto > Filtri SVG > Applica filtro SVG. Nella finestra di dialogo, fate clic sul pulsante Nuovo Filtro SVG ,immettete il nuovo codice e fate clic su OK.

      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.

      Nota: se un oggetto utilizza più effetti, l’effetto SVG deve comparire come ultimo effetto nel pannello Aspetto (appena sopra la voce Trasparenza). Se un effetto SVG è seguito da altri effetti, l’output SVG consisterà in un oggetto raster.

Importare gli effetti da un file SVG

  1. Scegliete Effetto > Filtro SVG > Importa filtro SVG.

  2. Selezionate il file SVG da cui volete importare gli effetti e fate clic su Apri.

Panoramica del pannello Interattività 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.

Eliminare un evento dal pannello Interattività SVG

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

Elencare, aggiungere o eliminare gli eventi collegati al file

  1. Fate clic sul pulsante Collega file JavaScript .
  2. Nella finestra di dialogo File JavaScript, selezionate un evento JavaScript ed effettuate una delle seguenti operazioni:
    • Fate clic su Aggiungi per cercare altri file JavaScript.

    • Fate clic su Rimuovi per eliminare la voce JavaScript selezionata.

Aggiungere interattività SVG al disegno

  1. Nel pannello Interattività SVG, selezionate un evento. Consultate Eventi SVG.

  2. Immettete il corrispondente JavaScript e premete Invio.

Eventi SVG

onfocusin

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

onfocusout

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

onactivate

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

onmousedown

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

onmouseup

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

onclick

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

onmouseover

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

onmousemove

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

onmouseout

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

onkeydown

Attiva l’azione quando un tasto resta premuto.

onkeypress

Attiva l’azione mentre viene premuto un tasto.

onkeyup

Attiva l’azione quando viene rilasciato un tasto.

onload

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

onerror

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

onabort

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

onunload

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

onzoom

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

onresize

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

onscroll

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

Opzioni di esportazione SVG ottimizzate per il Web

È 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 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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online