Guida utente Annulla

SVG

Operazioni con SVG che consentono l'uso di XML e JavaScript per creare grafica per il Web che risponde alle azioni dell'utente con effetti sofisticati, quali evidenziamento, consigli, audio e animazioni.

Collegamento avanzato Adobe Illustrator

Provatelo nell'app
Applicate filtri SVG in pochi semplici passaggi.

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

Potete usare gli effetti SVG (filtri) 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. Un effetto SVG è semplicemente un insieme di proprietà XML che descrive 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 applicare direttamente un effetto predefinito oppure modificare il relativo codice XML per personalizzarlo. Potete anche creare nuovi effetti SVG.

Nota:

per modificare i filtri SVG predefiniti di Illustrator, modificate il file Filters.svg di Adobe SVG nel seguente percorso utilizzando un editor di testo:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <versione>/<impostazione locale>
  • Windows: C:\Users\<nomeutente>\AppData\Roaming\Adobe\Adobe Illustrator <versione> Settings\<impostazione locale>\x64

Potete modificare le definizioni dei filtri esistenti, eliminarle e aggiungerne di nuove.

Applicare un effetto predefinito

  1. Selezionate un oggetto o il gruppo (o un livello nel pannello Livelli).

  2. Selezionate Effetto > Filtri SVG > Applica filtro SVG.

Applicare un effetto personalizzato

  1. Selezionate un oggetto o il gruppo (o un livello nel pannello Livelli).

  2. Selezionate Effetto > Filtri SVG > Applica filtro SVG.

  3. Nella finestra di dialogo, selezionate un effetto e fate clic su Modifica filtro SVG  . Modificate il codice predefinito e selezionate OK.

Creare e applicare un nuovo effetto

  1. Selezionate un oggetto o il gruppo (o un livello nel pannello Livelli).

  2. Selezionate Effetto > Filtri SVG > Applica filtro SVG.

  3. Nella finestra di dialogo, selezionate Nuovo filtro SVG. Immettete il nuovo codice e selezionate 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:

quando un oggetto utilizza più effetti, l'effetto SVG deve essere l'ultimo. In altre parole, deve apparire nella parte inferiore del 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. Selezionate Effetto > Filtro SVG > Importa filtro SVG.

  2. Selezionate il file SVG da cui volete importare gli effetti e scegliete Apri.

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.

Per eliminare un evento

  • Selezionate l'evento e scegliete Rimuovi voce selezionata.

Per eliminare tutti gli eventi

  • Selezionate Cancella eventi dal menu del pannello

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

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

  2. Immettete il JavaScript corrispondente 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. Usa 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.

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 denominato Button1 diventa <g id="Button1_ver3.0"> nel file SVG.) I livelli nidificati diventano gruppi SVG nidificati e i livelli nascosti vengono conservati 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.

Altri argomenti correlati

Avete una domanda o un'idea?

Chiediete alla community di utenti

Se avete domande o un'idea da condividere, partecipate alla community di Adobe Illustrator. Desideriamo ricevere il vostro feedback e ammirare le vostre creazioni.

Ottieni supporto in modo più facile e veloce

Nuovo utente?