Opzioni di esportazione di Adobe Illustrator - Trucchi CSS

Questo è meno uno snippet e più un promemoria per qualcosa che cerco spesso. Quando si creano file SVG in Adobe Illustrator, ci sono un paio di metodi diversi per esportare i file. Entrambi i metodi includono una manciata di opzioni, alcune delle quali dimentico completamente cosa significano e cosa selezionare.

Metodo 1: Salva con nome ...

Probabilmente non useresti questo metodo per salvare SVG da utilizzare sul web. Questo è principalmente per salvare un documento master. In effetti, potresti voler salvare direttamente nel formato Illustrator. Utilizzeresti alcune delle altre opzioni di esportazione per esportare per il Web.

Il modo più comune per salvare un file come SVG in Adobe Illustrator è scegliere l' File > Save As… opzione dal menu principale.

Illustrator aprirà una finestra di dialogo chiedendoti come assegnare un nome al file e dove salvarlo. Ancora più importante, chiede anche quale tipo di file salvare come quale, in questo caso è SVG. Non compresso in formato SVG (svgz). Semplice vecchio SVG.

Fare clic sul pulsante Salva e verrà visualizzato un altro set di opzioni. È qui che la mia memoria tende a deludermi e devo setacciare il web in cerca di risposte. Ecco uno screenshot di un modo perfettamente ottimale per salvare un file SVG in Adobe Illustrator.

• Profili SVG : imposta il tipo di documento XML sul tag di apertura . SVG 1.1 è l'ultima versione, copre il supporto più ampio ed è probabilmente l'opzione più adatta. Tutto il resto è una versione precedente o un sottoinsieme di SVG 1.1 e devo ancora incorrere in un problema quando lo seleziono.
• Caratteri> Tipo : selezionando "Converti in contorno" si assicurerà che il testo digitato nel file venga esportato come tracciati vettoriali anziché glifi. I glifi hanno la possibilità di non essere renderizzati ma i percorsi vettoriali sono sempre un grande pollice in alto.
• Opzioni> Posizione immagine : se nel file vengono utilizzate immagini raster (leggi: JPG.webp, PNG, GIF), allora dovremo selezionare l'opzione "Link". In caso contrario, l'immagine raster verrà incorporata nel file e ciò risucchia i vantaggi in termini di prestazioni direttamente dall'SVG aumentando la dimensione del file per includere quelle risorse extra. È meglio fare riferimento a loro come collegamenti e assicurarsi di includere quei file sorgente nella stessa directory del file SVG.
• Opzioni> Posizione immagine> Mantieni capacità di modifica di Illustrator : questo ha un enorme impatto sull'output del file SVG. Dato che probabilmente stai salvando una copia "master" qui, non destinata a noi sul Web, la lasceresti selezionata. Ciò manterrà le cose proprietarie di Illustrator (come le guide) per la prossima volta che aprirai il file. Deselezionato significherà che cose del genere verranno eliminate e perse.
• Opzioni avanzate> Proprietà CSS : seleziono "Attributi di presentazione" per questo perché colloca le proprietà (es. Riempimenti, tratti e simili) al livello di specificità più basso. Ad esempio . Questo stile l'elemento, ma è molto facile da sovrascrivere in CSS.
• Opzioni avanzate> Posizioni decimali : se hai sfogliato il codice per un , allora sai che i valori che specificano quelle forme possono essere estremamente precisi. Molte volte, tuttavia, questi sono troppo precisi e si aggiungono alla dimensione complessiva del file SVG. Poiché probabilmente stai salvando un file master qui, puoi mantenerlo abbastanza alto, perché la dimensione del file non è un grosso problema.
• Opzioni avanzate> Codifica : non sono un appassionato della codifica UTF, ma lasciare questo a "Unicode UTF-8" garantisce la retrocompatibilità. Inoltre, le dimensioni dei file UTF-8 tendono ad essere inferiori a UTF-16, quindi è una vittoria in sé e per sé.
• Opzioni avanzate> Reattivo : lasciando questa opzione deselezionata, verranno impostati gli attributi fissi heighte widthsull'SVG. Controllo questa opzione perché mi consente di impostare quegli attributi nel codice o nel CSS.

Metodo 2: Esporta come

Un altro modo per ottenere SVG da Adobe Illustrator è scegliere l' File > Export > Export As… opzione dal menu principale. Tuttavia, esiste un secondo modo per arrivarci utilizzando il pannello Azioni nell'area di lavoro di Illustrator.

Questa opzione è ideale se sai che utilizzerai questo file direttamente sul Web e non prevedi di armeggiare con il design in un secondo momento. Fornisce molte meno impostazioni e un paio di opzioni che consentono al file di ottimizzare ulteriormente il file per prestazioni migliori. In effetti, è buona norma farlo su una copia del file piuttosto che sul file master stesso, quindi esiste una versione che può essere aperta e modificata successivamente in Illustrator e un'altra più adatta per la pubblicazione su un sito Web di produzione.

• Stile : abbiamo trattato questo argomento in precedenza nelle impostazioni del Metodo 1, ma qui ho scelto "Attributi di presentazione" perché è un modo per organizzare le proprietà sugli attributi di livello più alto. Ciò aggiunge ordine al markup, flessibilità nella nostra capacità di modellare gli attributi successivi con CSS e spesso porta a file di dimensioni inferiori.
• Carattere : questo è un altro di cui abbiamo parlato sopra, ma scegliendo "Converti in contorni" si scambiano i glifi con i tracciati vettoriali per i caratteri, assicurando che il testo venga visualizzato correttamente.
• Immagini : questo è ancora un altro di cui abbiamo parlato sopra, ma la scelta di "Link" impedirà che le immagini raster incorporate vengano impacchettate nell'SVG, il che rende il file molto più grande.
• ID oggetto : questa impostazione fornisce a Illustrator ordini di marcia su come denominare gli ID nel markup. Puoi dirgli di nominare gli ID in base al modo in cui i livelli sono denominati nel file.
• Decimali : un numero inferiore di decimali nel codice significa file di dimensioni inferiori. Impostarlo su 1è ideale e OK in molti casi e non avrà una differenza notevole nel design, ma in 2genere è sicuro. Ad ogni modo, vale la pena controllare come viene reso SVG.
• Minimizza : Sì, grazie! Questo sgranocchia il codice per ridurre gli spazi bianchi e aumentare le prestazioni web in modo molto simile alla minimizzazione dei CSS.
• Reattivo : esattamente come il primo metodo, la selezione di questa opzione è ideale perché fissi heighte gli widthattributi verrebbero altrimenti inseriti nell'SVG.