Možnosti exportu aplikácie Adobe Illustrator Triky CSS

Toto je menej útržku a skôr pripomienka niečoho, čo často vyhľadávam. Pri vytváraní súborov SVG v aplikácii Adobe Illustrator existuje niekoľko rôznych spôsobov exportu súborov. Obe metódy obsahujú niekoľko možností, z ktorých niektoré úplne zabúdam, čo znamenajú a čo si mám vybrať.

Metóda 1: Uložiť ako…

Túto metódu by ste pravdepodobne nepoužili na uloženie SVG na použitie na webe. Toto slúži hlavne na uloženie hlavného dokumentu. V skutočnosti možno budete chcieť iba uložiť priamo vo formáte Illustrator. Na export na web by ste použili niektoré z ďalších možností exportu.

Najbežnejším spôsobom uloženia súboru ako SVG v aplikácii Adobe Illustrator je výber File > Save As… možnosti z hlavnej ponuky.

Illustrator spustí dialógové okno s otázkou, čo pomenovať súbor a kam ho uložiť. Dôležitejšie je, že sa pýta aj to, aký typ súboru sa má uložiť, ktorý je v tomto prípade SVG. Nie je komprimované SVG (svgz). Jednoduché SVG.

Kliknite na tlačidlo Uložiť a zobrazí sa ďalšia sada možností. To je miesto, kde ma moja pamäť zvykne zlyhávať a musím hľadať na webe odpovede. Tu je snímka obrazovky dokonale optimálneho spôsobu uloženia súboru SVG v aplikácii Adobe Illustrator.

• Profily SVG : Týmto sa nastaví typ dokumentu XML na otváraciu značku. SVG 1.1 je najnovšia verzia, ktorá poskytuje najširšiu podporu a je pravdepodobne najvhodnejšou voľbou. Všetko ostatné je buď staršia verzia, alebo podmnožina SVG 1.1, a pri jej výbere sa ešte musím stretnúť s problémom.
• Fonty> Typ : Výberom možnosti „Previesť na obrys“ zabezpečíte, že akýkoľvek zadaný text v súbore bude exportovaný skôr ako vektorové cesty ako glyfy. Glyfy majú šancu, že nebudú vykreslené, ale vektorové cesty sú vždy veľkým palcom hore.
• Možnosti> Umiestnenie obrázka : Ak sa v súbore používajú rastrové obrázky (na čítanie: JPG.webp, PNG, GIF), budeme chcieť zvoliť možnosť „Prepojiť“. V opačnom prípade bude rastrový obrázok vložený do súboru a to vysáva výkonové výhody priamo z SVG zväčšením veľkosti súboru tak, aby zahŕňal tieto ďalšie prvky. Radšej ich označte ako odkazy a nezabudnite tieto zdrojové súbory zahrnúť do rovnakého adresára ako súbor SVG.
• Možnosti> Umiestnenie obrázka> Zachovať možnosti úprav aplikácie Illustrator : Toto má obrovský vplyv na výstup súboru SVG. Pretože tu pravdepodobne ukladáte „hlavnú“ kópiu, ktorá nie je určená pre nás na webe, ponechali by ste to začiarknuté. Toto zachová veci, ktoré vlastní Illustrator (napríklad príručky) pre ďalšie otvorenie súboru. Nezačiarknuté bude znamenať, že také veci budú odstránené a stratené.
• Pokročilé možnosti> Vlastnosti CSS : Pre tento vyberiem „Prezentačné atribúty“, pretože umiestňuje vlastnosti (napr. Výplne, ťahy a podobne) na najnižšiu úroveň špecifickosti. Napríklad . Toto upravuje štýl prvku, ale je veľmi ľahké ho prepísať v CSS.
• Pokročilé možnosti> Desatinné miesta : Ak ste prechádzali kódom a , viete, že hodnoty špecifikujúce tieto tvary môžu byť veľmi presné. Mnohokrát sú však príliš presné a zvyšujú celkovú veľkosť súboru SVG. Pretože tu pravdepodobne ukladáte hlavný súbor, môžete ho ponechať pomerne vysoký, pretože veľkosť súboru vás veľmi neznepokojuje.
• Pokročilé možnosti> Kódovanie : Nie som nadšenec pre kódovanie UTF, ale ponechanie tohto nastavenia na „Unicode UTF-8“ zaisťuje spätnú kompatibilitu. Veľkosti súborov UTF-8 tiež bývajú menšie ako UTF-16, čo je samo osebe výhrou.
• Pokročilé možnosti> Reagovať : Ak toto nezačiarknete, nastavia sa pevné heighta widthatribúty na SVG. Túto možnosť začiarknem, pretože mi umožňuje nastaviť tieto atribúty buď v kóde, alebo v CSS.

Metóda 2: Exportovať ako

Ďalším spôsobom, ako získať SVG z aplikácie Adobe Illustrator, je výber File > Export > Export As… možnosti z hlavnej ponuky. Existuje však druhý spôsob, ako sa tam dostať, pomocou panela Akcie v pracovnom priestore Illustratoru.

Táto možnosť je ideálna, ak viete, že tento súbor použijete priamo na webe a neplánujete sa s návrhom zaoberať neskôr. Poskytuje oveľa menej nastavení a niekoľko možností, ktoré umožňujú súboru ďalej optimalizovať súbor pre lepší výkon. Najlepšie je v skutočnosti to urobiť skôr na kópii súboru, ako na samotnom hlavnom súbore, takže existuje jedna verzia, ktorú je možné otvoriť a upraviť neskôr v aplikácii Illustrator, a iná, ktorá je vhodnejšia na zobrazovanie na produkčných webových stránkach.

• Styling : Tejto sme sa venovali už skôr v nastaveniach Metódy 1, ale tu si vyberiem „Atribúty prezentácie“, pretože je to spôsob, ako usporiadať vlastnosti na atribútoch najvyššej úrovne. To dodáva značkám poriadok, flexibilita v našej schopnosti štylizovať následné atribúty pomocou CSS a často vedie k menšej veľkosti súborov.
• Písmo : Toto je ďalšie, ktoré sme opísali vyššie, ale výber možnosti „Previesť na obrysy“ zamení glyfy za vektorové cesty pre znaky, čo zabezpečí správne vykreslenie textu.
• Obrázky : Toto je ešte jeden z vyššie uvedených obrázkov, ale výber možnosti „Odkaz“ zabráni tomu, aby sa vložené rastrové obrázky zabalili do SVG, čím sa súbor výrazne zväčší.
• ID objektov : Toto nastavenie dáva aplikácii Illustrator pochodové príkazy na pomenovanie ID v značke. Môžete to povedať tak, že pomenuje ID na základe toho, ako sú v súbore pomenované vrstvy.
• Desatinné miesto : Menej desatinných miest v kóde znamená menšie veľkosti súboru. Nastavenie na hodnotu 1je ideálne a v mnohých prípadoch v poriadku a nebude mať znateľný rozdiel v dizajne, ale 2je zvyčajne bezpečné. Či tak alebo onak, stojí za to skontrolovať, ako je vykreslený SVG.
• Minify : Áno, prosím! To spôsobí skreslenie kódu, aby sa znížili medzery a zvýšil sa výkon webu, podobne ako pri minifikácii CSS.
• Citlivý : Presne ako u prvého spôsobu, výberom tejto možnosti je ideálne, pretože pevné heighta widthatribúty by inak mohli byť umiestnené na SVG.