Opțiuni de export Adobe Illustrator - CSS-Tricks

Acesta este mai puțin un fragment și mai mult un memento pentru ceva pe care îl caut des. Când creați fișiere SVG în Adobe Illustrator, există câteva metode diferite pentru exportul fișierelor. Ambele metode includ o mână de opțiuni, dintre care unele uit total ce înseamnă și ce să selectez.

Metoda 1: Salvați ca ...

Probabil că nu ați folosi această metodă pentru a salva SVG pentru utilizare pe web. Acest lucru este în mare parte pentru salvarea unui document master. De fapt, s-ar putea să doriți să salvați direct în formatul Illustrator. Ați folosi unele dintre celelalte opțiuni de export pentru a exporta pentru web.

Cel mai comun mod de a salva un fișier ca SVG în Adobe Illustrator este de a alege File > Save As… opțiunea din meniul principal.

Illustrator va deschide o fereastră de dialog care vă va cere să denumiți fișierul și unde să îl salvați. Mai important, se întreabă, de asemenea, ce tip de fișier să salvați, care în acest caz este SVG. Nu SVG comprimat (svgz). Plain ol 'SVG.

Faceți clic pe butonul Salvare și va apărea un alt set de opțiuni. Aici memoria mea tinde să-mi dea greș și trebuie să scotocesc pe web pentru răspunsuri. Iată o captură de ecran a unui mod perfect optim de a salva un fișier SVG în Adobe Illustrator.

• Profiluri SVG : Aceasta setează tipul de document XML pe eticheta de deschidere . SVG 1.1 este cea mai recentă versiune, acoperă suportul cel mai larg și este probabil cea mai potrivită opțiune. Orice altceva este fie o versiune mai veche, fie un subset al SVG 1.1 și încă nu am întâmpinat o problemă la selectarea acesteia.
• Fonturi> Tip : Selectarea „Convertiți în contur” vă va asigura că orice text tastat în fișier este exportat sunt căi vectoriale mai degrabă decât glife. Glifele au șansa de a nu fi redate, dar căile vectoriale sunt întotdeauna mari.
• Opțiuni> Locație imagine : Dacă în fișier sunt utilizate imagini raster (citiți: JPG.webp, PNG, GIF), atunci vom dori să selectăm opțiunea „Link”. În caz contrar, imaginea raster va fi încorporată în fișier și asta suge beneficiile de performanță chiar din SVG prin mărirea dimensiunii fișierului pentru a include acele active suplimentare. Mai bine să le referiți ca link-uri și asigurați-vă că includeți acele fișiere sursă în același director cu fișierul SVG.
• Opțiuni> Locație imagine> Conservare capacități de editare Illustrator : Aceasta are un impact masiv asupra ieșirii fișierului SVG. Deoarece probabil salvați aici o copie „master”, care nu este destinată pentru noi pe web, ați lăsa acest lucru bifat. Aceasta va păstra lucrurile proprietare ale Illustrator (cum ar fi ghidurile) pentru următoarea deschidere a fișierului. Necontrolat va însemna că astfel de lucruri vor fi eliminate și pierdute.
• Opțiuni avansate> Proprietăți CSS : selectez „Atribute de prezentare” pentru acesta, deoarece plasează proprietăți (de exemplu, umpluturi, linii și altele) la cel mai mic nivel de specificitate. De exemplu . Acesta stilizează elementul, dar este foarte ușor de înlocuit în CSS.
• Opțiuni avansate> Locuri zecimale : dacă ați răsfoit codul pentru un , atunci știți că valorile care specifică acele forme pot fi foarte precise. Cu toate acestea, de multe ori, acestea sunt prea precise și se adaugă la dimensiunea totală a fișierului SVG. Deoarece probabil salvați un fișier master aici, îl puteți menține destul de ridicat, deoarece dimensiunea fișierului nu este o problemă prea mare.
• Opțiuni avansate> Codificare : nu sunt un buff în codificarea UTF, dar lăsând acest lucru la „Unicode UTF-8” asigură compatibilitatea înapoi. De asemenea, dimensiunile fișierelor UTF-8 tind să fie mai mici decât UTF-16, deci este un câștig în sine.
• Opțiuni avansate> Răspuns : Dacă nu bifați această opțiune, veți seta fix heightși widthatribute pe SVG. Verific această opțiune, deoarece îmi permite să setez aceste atribute fie în cod, fie în CSS.

Metoda 2: Exportați ca

O altă modalitate de a obține SVG de la Adobe Illustrator este de a alege File > Export > Export As… opțiunea din meniul principal. Cu toate acestea, există un al doilea mod de a ajunge acolo utilizând panoul Acțiuni din spațiul de lucru Illustrator.

Această opțiune este ideală dacă știi că vei folosi acest fișier direct pe web și nu intenționezi să tratezi mai târziu proiectul. Oferă mult mai puține setări și câteva opțiuni care permit fișierului să optimizeze fișierul în continuare pentru o performanță mai bună. De fapt, este cea mai bună practică să faceți acest lucru pe o copie a fișierului, mai degrabă decât pe fișierul master în sine, astfel încât există o versiune care poate fi deschisă și editată mai târziu în Illustrator și alta care este mai potrivită pentru difuzarea pe un site de producție.

• Stil : Am tratat-o ​​mai devreme în setările Metodei 1, dar aleg „Atribute de prezentare” aici, deoarece este un mod de a organiza proprietăți la atributele de cel mai înalt nivel. Acest lucru adaugă ordine marcajului, flexibilitate în capacitatea noastră de a stiliza atributele ulterioare cu CSS și duce adesea la dimensiuni mai mici de fișiere.
• Font : Acesta este altul pe care l-am acoperit mai sus, dar alegând „Convertiți în contururi” se schimbă glifele pentru căile vectoriale pentru caractere, care asigură redarea corectă a textului.
• Imagini : acesta este încă un alt lucru pe care l-am acoperit mai sus, dar alegerea „Link” va împiedica încorporarea imaginilor raster în pachetul SVG, ceea ce face fișierul mult mai mare.
• ID-uri de obiect : această setare oferă ordinelor Illustrator pentru cum să numiți ID-uri în markup. Îi puteți spune să numească ID-uri pe baza modului în care straturile sunt denumite în fișier.
• Zecimal : mai puține zecimale din cod înseamnă dimensiuni mai mici ale fișierelor. Setarea la acest lucru 1este ideală și OK în multe cazuri și nu va avea o diferență vizibilă în design, dar 2este de obicei sigură. Oricum ar fi, merită să verificați modul în care este redat SVG.
• Minify : Da, te rog! Acest lucru reduce codul pentru a reduce spațiul alb și pentru a crește performanța web, la fel ca reducerea CSS.
• Responsive : Exact ca prima metodă, selectând această opțiune este ideală , deoarece fix heightsi widthatribute , altfel , ar fi plasat pe SVG.