2012-11-05 13 views
121

Sto cercando di utilizzare un logo SVG per un sito Web - per renderlo eccezionale su un design reattivo per tutti i dispositivi.Impostazioni ottimali per l'esportazione di SVG per il Web da Illustrator?

Ma dal there are issues, voglio supportare il maggior numero di dispositivi e browser possibile. 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 esistono diverse opzioni per l'esportazione SVG. Innanzitutto, quale profilo SVG è il migliore?

enter image description here

presumo SVG Tiny ha una dimensione di file più basso? Molti dispositivi supportano SVG Tiny? Quali sono le differenze più importanti? (Senza dover leggere this W3 monster.)

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

enter image description here

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

enter image description here

Grazie!

P.S. Ci sarà un'opzione alpha-PNG di fallback, ma voglio che l'SVG a sia supportato nel miglior modo possibile. (Vieni a pensarci bene, un'opzione di ripiego - come un JPG - sarebbe probabilmente il migliore servita in questo caso, in quanto alfa-PNG stesso ha bisogno di una soluzione per gli anziani IE.)

Update: 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?

enter image description here

+4

Sia la domanda che la risposta sono davvero buone su questo - puntelli sia per Baumr che per Duopixel. – aendrew

+0

@aendrew, grazie! – Baumr

+1

Guida molto utile: http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/ –

risposta

206

SVG profili

  • SVG 1.0: tutti i desktop moderno e browser mobili supportano SVG 1.1, in modo da non scegliere 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.

Caratteri nota: se non avete 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 contorno: si vuole fare questo la maggior parte del tempo, a meno che non si dispone di una grande quantità di testo. Se hai una grande quantità di testo, vorresti incorporare il font con WOFF, ma dovrai farlo a mano.

sottoinsiemi:

  • Nessuno: questo negare l'impostazione precedente e non incorporare qualsiasi tipo di carattere, se non vi interessa che il font ricade a qualche altro tipo di carattere nel il computer dell'utente sceglie questo.

  • Solo glifi utilizzati: questo è il più delle volte lo si desidera se si sceglie di incorporare il carattere. Incorpora solo i caratteri utilizzati in modo che non aumenti le dimensioni del file.

  • [rest of subsettings]: questo è abbastanza chiaro, è possibile scegliere di includere l'intero carattere 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 le immagini bitmap

  • Incorpora: questo è di solito quello che si vuole, esso codifica l'immagine come un URI dati in modo che appena carica un file invece del file svg con le sue immagini bitmap companion.

  • Collegamento: utilizzare questo solo se si dispone di diversi file svg che fanno riferimento a un file bitmap (quindi non viene scaricato ogni volta che esegue il rendering del file svg).

Nota che collegava le immagini bitmap non viene visualizzata se il formato SVG è visualizzato attraverso il tag <img>, perché img non permette 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: utilizzare un semplice tag <svg> se si intende incorporare o collegare immagini bitmap, non utilizzare <img>.

Preserve Illustrator funzionalità di editing

preferisco salvare un file .ai come la mia immagine di origine, e di pensare del file SVG come una caratteristica 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

L'impostazione predefinita 3 è un ambiente sano e si può in gran parte non pensarci più.

Tuttavia, se si dispone di un percorso veramente complicato con molti punti, l'impostazione di questa impostazione su 1 o su 0 riduce notevolmente le dimensioni 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 dietro codifica dei caratteri è piuttosto tecnico, e riguarda solo i file SVG con il testo. La codifica più probabile che ti serve è UTF-8, non cambiarla a meno che tu non sappia cosa stai facendo.

Ottimizza per Adobe SVG Viewer

Adobe SVG Viewer è un plugin per il browser da momenti in cui i browser non supportano nativamente SVG. Non so cosa faccia, ma è irrilevante, non controllare questo.

includere dati affettatrici

Questo aggiunge metadati gonfiare al vostro file in formato SVG, a meno che non si ha intenzione di aprire il file in formato SVG più avanti in Illustrator e trovare i tuoi fette (se li avete), non controlli questo

Includi XMP

Più metadati per quanto riguarda il file, è possibile read on XMP here. non selezionare questa

uscita un minor numero di elementi <tspan>

Questa è disattivata se non si dispone di testo. SVG non supporta le tabelle di kern, quindi alcune sequenze di caratteri appariranno troppo distanziate, ovvero AVA. Illustrator funziona aggirando gli elementi tspan e modificando leggermente le posizioni dei caratteri. Questo aggiunge un po 'di gonfiamento al file non controllare questo a meno che non ti interessi più sulle dimensioni del file di aspetto del testo.

Usa <textpath> elemento di testo su un tracciato

Questo sarà grigio, se non si dispone di testo su un tracciato. 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 si preoccupi di più delle dimensioni del file di aspetto del testo.


In generale, vi consiglio di guardare in SVG in generale, troverete che sembra un po 'come HTML e consente di ottimizzare le cose che non si possono fare all'interno di Illustrator.

+0

** Grazie! ** Che risposta dettagliata! Presumo che SVG Tiny abbia una dimensione di file inferiore? E quando hai detto, _ "Solo una manciata di dispositivi supporta SVG Tiny e non le specifiche complete" _, intendevi che ** non molti dispositivi supportano SVG Tiny? ** Immagino quello che sto davvero chiedendo, ** quali sono le differenze più importanti? ** (Senza dover leggere [questo mostro W3] (http://www.w3.org/TR/SVGMobile/).) Grazie ancora! ** Aggiornamento: ** Ho aggiunto una ** parte aggiuntiva sui posti decimali ** alla domanda originale se sei interessato. Ho aperto SVG in un editor di testo - tutto da leggere per sapere ** quale XML estrarre? ** – Baumr

+3

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. Non so se tutti i browser che supportano SVG supportino anche SVG Tiny, ma presumo che sia vero. Ti consiglierei di dimenticarti di SVG Tiny dato che otterrai solo una copertura per i vecchi telefoni BlackBerry. Ho anche aggiornato la risposta per rispondere alla domanda sui posti decimali. – Duopixel

+0

Grazie ancora. Non dire cose come "otterresti copertura solo per vecchi telefoni BlackBerry" - mi fa venir voglia di guardare dentro, non importa quanto obsoleto: P – Baumr

Problemi correlati