Impostazioni ottimali per l’esportazione di SVG per il Web da Illustrator?

Sto cercando di utilizzare un logo SVG per un sito Web – per renderlo eccezionale su un design reattivo per tutti i dispositivi.

Ma dal momento che ci sono problemi , voglio supportare il maggior numero di dispositivi e browser ansible. Anche la velocità di carico è una considerazione importante. In che modo le impostazioni di esportazione in Adobe Illustrator si adattano a tutto questo?

In Illustrator, ci sono diverse opzioni per l’esportazione SVG. Innanzitutto, quale profilo SVG è il migliore?

inserisci la descrizione dell'immagine qui

Presumo che SVG Tiny abbia una dimensione di file inferiore? Molti dispositivi supportano SVG Tiny? Quali sono le differenze più importanti? (Senza dover leggere questo mostro W3 .)

In secondo luogo, suppongo che l’opzione migliore per la posizione dell’immagine sia “link”? (Vedi descrizione dopo il punto esclamativo).

inserisci la descrizione dell'immagine qui

In alternativa, qual è il supporto del browser per l’opzione “embed”?

inserisci la descrizione dell'immagine qui

Grazie!

PS Ci sarà un’opzione alpha-PNG di fallback, ma voglio che l’SVG sia supportato nel miglior modo ansible. (Vieni a pensarci, un’opzione di fallback – come un JPG – sarebbe probabilmente la migliore in questo caso dato che alpha-PNG ha bisogno di una soluzione per IE più vecchi.)

Aggiornamento: ci sono anche più opzioni che possono essere configurate. Non sto lavorando con il testo, quindi l’unico rilevante che vedo sono i decimali. Per i loghi, qualcosa da visualizzare come massimo 200x200px (quindi 400x400px sui display Retina), “3” è l’impostazione migliore? O “2” per ridurre al minimo le dimensioni del file?

inserisci la descrizione dell'immagine qui

Profili SVG

  • SVG 1.0: tutti i moderni browser desktop e per dispositivi mobili supportano SVG 1.1, quindi non scegliere mai questa opzione.
  • SVG 1.1: quasi sempre vorrai questo.
  • 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 che è adeguato per i dispositivi con bassa potenza di elaborazione. Scartare sfumature, opacità, caratteri incorporati e filtri. Erik Dahlström dice: Tutti i SVG 1.1 full viewer dovrebbero essere in grado di visualizzare tutti i contenuti SVG 1.1 Tiny / Basic (secondo le specifiche), e probabilmente tutti i contenuti SVG 1.2 Tiny che anche Illustrator produce.

Nota sui caratteri : se non hai alcun testo nell’immagine questa impostazione non ha importanza.

  • Adobe CEF: non utilizzare mai questa opzione per la visualizzazione nei browser. È il modo in cui Adobe incorpora i caratteri nei file SVG, per quanto ne so è supportato solo dal plug-in SVG di Adobe.

  • SVG: incorpora il font come SVG, che non è supportato da Firefox, ma è una buona opzione se si intende supportare solo i dispositivi mobili (che di solito eseguono il webkit).

  • Crea contorni: vorrai farlo la maggior parte del tempo , a meno che tu non abbia una grande quantità di testo. Se hai una grande quantità di testo, vorresti incorporare il font con WOFF, ma dovrai farlo a mano.

Sottosistema :

  • Nessuno: questo annullerà l’impostazione precedente e non incorporerà alcun carattere, se non ti interessa che il font ricada su qualche altro font nel computer dell’utente, scegli questo.

  • Utilizzati solo glifi: questo lo vorrai il più delle volte se scegli di incorporare il carattere. Incorpora solo i caratteri utilizzati in modo che non aumenti le dimensioni del file.

  • [resto di subsetting]: questo è abbastanza chiaro, è ansible scegliere di includere l’intero font o sottoinsiemi di esso. È utile solo se SVG è dinamico e il testo potrebbe cambiare in base all’input dell’utente.

Immagini : questo è importante solo se si includono immagini bitmap

  • Incorpora: di solito è ciò che desideri , codifica l’immagine come un dato uri in modo da caricare un solo file anziché il file svg con le sue immagini bitmap companion.

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

Tieni presente che le immagini bitmap collegate non verranno visualizzate se SVG viene visualizzato tramite il tag , poiché img non consente il caricamento di risorse esterne. Inoltre: webkit ha un bug che non mostra immagini bitmap all’interno di file svg anche se le incorpori. In breve: usa un semplice tag se intendi incorporare o colbind immagini bitmap, non utilizzare .

Mantieni le funzionalità di modifica di Illustrator

Preferisco salvare un file .ai come immagine di origine e pensare al file SVG come a Export for web funzione Export for web . In questo modo ti concentrerai sulla riduzione della dimensione del file e avrai una copia incontaminata del tuo file vettoriale con tutte le funzionalità di modifica. Quindi non scegliere questo.

Decimali

Il default 3 è un ambiente sensato e puoi per lo più dimenticarlo.

Tuttavia, se si dispone di percorsi davvero complicati con molti punti che riducono questa impostazione a 1 o addirittura a 0, si ridurrà sostanzialmente la dimensione del file. Ma devi stare attento perché i segmenti Bezier sono molto sensibili a questa impostazione e potrebbero sembrare un po ‘distorti. Quindi se abbassi questa impostazione assicurati sempre che sia 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 a meno che tu non sappia cosa stai facendo.

Ottimizza per Adobe SVG Viewer

Adobe SVG Viewer è un plug-in del browser da quando i browser non supportavano SVG in modo nativo. Non so cosa faccia, ma è irrilevante, non controllare questo .

Includi dati di slicing

Ciò aggiunge i metadata bloat al tuo file SVG, a meno che tu non abbia in programma di aprire il tuo file SVG in seguito in Illustrator e di trovare le tue fette (se ce l’hai), non controllare questo

Includi XMP

Più metadati relativi al file, puoi leggere su XMP qui . non controllare questo

Mostra meno elementi

Questo sarà distriggersto se non hai testo. SVG non supporta le tabelle di kern, quindi alcune sequenze di caratteri appariranno troppo distanziate, cioè AVA . Illustrator funziona aggirando aggiungendo elementi di tspan e modificando leggermente le posizioni dei caratteri. Questo aggiunge un po ‘di gonfiamento al file , non controllarlo a meno che non ti interessi più delle dimensioni del file che dell’aspetto del testo .

Usa l’elemento per il testo su un percorso

Questo sarà distriggersto se non hai testo su un percorso. I browser tendono a variare molto quando si tratta di posizionare il testo su un tracciato, quindi Illustrator cerca di essere utile applicando la rotazione e la posizione al personaggio invece di lasciare il lavoro al browser. non controllare questo a meno che non ti interessi più sulle dimensioni del file che sull’aspetto del testo .


In generale, ti consiglio di guardare in SVG in generale, scoprirai che assomiglia molto all’HTML e ti permette di modificare ciò che non può essere fatto all’interno di Illustrator.