Impostazioni ottimali per esportare SVG per il Web da Illustrator?


128

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

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

In Illustrator, ci sono diverse opzioni per l'esportazione in formato SVG. Innanzitutto, qual è il profilo SVG migliore?

inserisci qui la descrizione dell'immagine

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

In secondo luogo, presumo che l'opzione migliore per la posizione dell'immagine sia "link"? (Vedi descrizione dopo il punto esclamativo.)

inserisci qui la descrizione dell'immagine

In alternativa, come è il supporto del browser per l'opzione "incorpora"?

inserisci qui la descrizione dell'immagine

Grazie!

PS Ci sarà un'opzione alfa-PNG di fallback, ma voglio che SVG sia supportato nel miglior modo possibile. (Pensaci, un'opzione di fallback - come un JPG - sarebbe probabilmente la migliore offerta in questo caso poiché l'alfa-PNG stesso 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 qui la descrizione dell'immagine


4
Sia la domanda che la risposta sono davvero buone in questo senso - puntelli sia a Baumr che a Duopixel.
Aendrew

Risposte:


215

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é imgnon 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 webfunzionalità. 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 tspanelementi 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.


Grazie! Che risposta dettagliata! Presumo che SVG Tiny abbia una dimensione del file inferiore? E quando hai detto "Solo una manciata di dispositivi supporta SVG Tiny e non le specifiche complete" , intendevi dire che non molti dispositivi supportano SVG Tiny? Immagino cosa sto veramente chiedendo, quali sono le differenze più importanti? (Senza dover leggere questo mostro W3 .) Grazie ancora! Aggiornamento: ho aggiunto una parte aggiuntiva sulle posizioni decimali alla domanda originale se sei interessato. Ho aperto SVG in un editor di testo: qualcosa da leggere per sapere quale XML estrarre?
Baumr,

3
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. Non so per certo se ogni browser che supporta SVG supporta anche SVG Tiny, ma suppongo che sia vero. Ti consiglierei di dimenticarti di SVG Tiny in quanto otterrai solo copertura per i vecchi telefoni BlackBerry. Ho anche aggiornato la risposta per rispondere alla tua domanda sui decimali.
methodofaction

Grazie ancora. Non dire cose del tipo "otterrai solo copertura per i vecchi telefoni BlackBerry" - mi fa venire voglia di esaminarlo, non importa quanto obsoleto: P
Baumr

4
qualche suggerimento per la sezione "opzioni avanzate"?
RZKY,

1
@Duopixel potresti aggiornare la tua risposta con "Opzioni avanzate"? Proprietà CSS, Posizioni decimali (già nella risposta), Codifica, Ottimizza per Adobe SVG Viewer, Includi dati di affettatura, Includi XMP, Output meno elementi <tspan> e infine usa l'elemento <textPath> per Text on Path.
PussInBoots,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.