Profili SVG
- SVG 1.0: tutti i browser desktop e mobili moderni supportano SVG 1.1, quindi non scegliere mai questa opzione.
- SVG 1.1: quasi sempre lo vorrai.
- SVG Tiny / Basic: questo è un sottoinsieme di SVG destinato ai dispositivi mobili. Solo una manciata di dispositivi supporta SVG Tiny e non le specifiche complete, quindi scegli SVG 1.1.
Nota: SVG Tiny non riduce le dimensioni del file, è solo un sottoinsieme di SVG adeguato per dispositivi a bassa potenza di elaborazione. Eliminerà gradienti, opacità, caratteri e filtri incorporati. Erik Dahlström afferma: Tutti i visualizzatori completi di SVG 1.1 dovrebbero essere in grado di visualizzare tutto il contenuto Tiny / Basic di SVG 1.1 (secondo le specifiche) e probabilmente tutto il contenuto Tiny di SVG 1.2 prodotto anche da Illustrator.
CaratteriNota sui : se non hai testo nell'immagine, questa impostazione non ha importanza.
Adobe CEF: non usare mai questa opzione per mostrarla nei browser. È il modo di Adobe di incorporare i caratteri nei file SVG, per quanto ne so questo è supportato solo dal plug-in visualizzatore SVG di Adobe.
SVG: incorpora il carattere come SVG, che non è supportato da Firefox, ma è una buona opzione se si intende supportare solo i dispositivi mobili (che di solito eseguono webkit).
Crea contorni: vorrai farlo per la maggior parte del tempo , a meno che tu non abbia una grande quantità di testo. Se hai una grande quantità di testo, vorrai incorporare il carattere con WOFF, ma dovrai farlo a mano.
Sottoimpostazione :
Nessuno: questo annullerà l'impostazione precedente e non incorporerà alcun carattere, se non ti interessa che il carattere ricada su qualche altro carattere nel computer dell'utente, scegli questo.
Sono stati usati solo glifi: lo vorrai per la maggior parte del tempo se scegli di incorporare il carattere. Incorpora solo i caratteri utilizzati in modo da non gonfiare le dimensioni del file.
[resto del sottoinsieme]: questo è abbastanza chiaro, puoi scegliere di includere l'intero carattere o sottoinsiemi di esso. È utile solo se il tuo SVG è dinamico e il testo potrebbe cambiare in base all'input dell'utente.
Immagini : questo è importante solo se includi immagini bitmap
Incorpora: di solito è quello che vuoi , codifica l'immagine come uri di dati in modo da caricare un solo file invece del file svg con le sue immagini bitmap associate.
Link: usa questo solo se hai diversi file svg che fanno riferimento a un file bitmap (quindi non viene scaricato ogni volta che esegue il rendering del file svg).
Si noti che le immagini bitmap collegate non verranno visualizzate se SVG viene visualizzato tramite il <img>
tag, poiché img
non consente il caricamento di risorse esterne. Inoltre: webkit ha un bug che non visualizza le immagini bitmap all'interno dei file svg anche se le incorporate. In breve: utilizzare un <svg>
tag semplice se si intende incorporare o collegare immagini bitmap, non utilizzare <img>
.
Conserva le funzionalità di modifica di Illustrator
Preferisco salvare un file .ai come immagine di origine e pensare al file SVG come una Export for web
funzionalità. In questo modo ti concentri sulla riduzione delle dimensioni del file e disponi di una copia originale del tuo file vettoriale con tutte le funzionalità di modifica. Quindi non scegliere questo.
Decimali
L'impostazione predefinita 3
è un'impostazione sana e puoi dimenticartene.
Tuttavia, se hai percorsi davvero complicati con molti punti che riducono questa impostazione a 1 o addirittura a 0 ridurrà sostanzialmente la dimensione del file. Ma devi stare attento perché i segmenti più bezier sono molto sensibili a questa impostazione e potrebbero sembrare un po 'distorti. Quindi, se si abbassa questa impostazione, assicurarsi sempre che appaia accettabile in un browser.
Codifica
La spiegazione alla base della codifica dei caratteri è piuttosto tecnica e riguarda solo i file svg con testo. La codifica più probabile di cui hai bisogno è UTF-8 , non cambiarla se non sai cosa stai facendo.
Ottimizza per Adobe SVG Viewer
Adobe SVG Viewer è un plug-in del browser in periodi in cui i browser non supportavano SVG in modo nativo. Non so cosa faccia, ma è irrilevante, non controllare questo .
Includi dati di suddivisione
Questo aggiunge metadata bloat al tuo file SVG, a meno che tu non abbia intenzione di aprire il tuo file SVG in seguito in Illustrator e trovare le tue sezioni (se ne hai), non controllare questo
Includi XMP
Altri metadati relativi al file, puoi leggere su XMP qui . non controllare questo
Emette meno <tspan>
elementi
Questo sarà disattivato se non hai testo. SVG non supporta le tabelle di crenatura, quindi alcune sequenze di caratteri sembreranno troppo distanziate, ad es AVA
. Illustrator aggira aggiungendo tspan
elementi e modificando un po 'le posizioni dei personaggi. Questo aggiunge un po 'di gonfiore al file , non controllarlo a meno che non ti interessi più della dimensione del file che dell'aspetto del testo .
Usa l' <textpath>
elemento per il testo su un percorso
Questo sarà disattivato se non hai testo su un percorso. I browser tendono a variare molto quando si tratta di posizionare il testo su un percorso, quindi Illustrator cerca di essere utile applicando la rotazione e la posizione al personaggio invece di lasciare il lavoro al browser. non verificarlo a meno che non ti interessi più della dimensione del file che dell'aspetto del testo .
In generale, ti consiglio di esaminare SVG in generale, scoprirai che assomiglia molto all'HTML e ti permette di modificare cose che non possono essere fatte in Illustrator.