Možnosti exportu aplikace Adobe Illustrator - Triky CSS

To je méně úryvek a spíše připomínka něčeho, co často vyhledávám. Při vytváření souborů SVG v aplikaci Adobe Illustrator existuje několik různých způsobů exportu souborů. Obě metody zahrnují několik možností, z nichž některé úplně zapomínám, co znamenají a co vybrat.

Metoda 1: Uložit jako…

Pravděpodobně byste tuto metodu nepoužili k uložení SVG pro použití na webu. To je z velké části pro uložení hlavního dokumentu. Ve skutečnosti byste možná chtěli uložit přímo ve formátu Illustratoru. K exportu na web byste použili některé z dalších možností exportu.

Nejběžnějším způsobem, jak uložit soubor jako SVG v aplikaci Adobe Illustrator, je výběr File > Save As… možnosti z hlavní nabídky.

Illustrator spustí dialogové okno s dotazem, co pojmenovat soubor a kam ho uložit. Ještě důležitější je, že se také ptá, jaký typ souboru se má uložit, což je v tomto případě SVG. Není SVG komprimováno (svgz). Prostý SVG.

Klikněte na tlačítko Uložit a zobrazí se další sada možností. To je místo, kde moje paměť má tendenci selhat a já musím hledat web pro odpovědi. Zde je snímek obrazovky dokonale optimálního způsobu uložení souboru SVG v aplikaci Adobe Illustrator.

• Profily SVG : Nastaví typ dokumentu XML na úvodní značku. SVG 1.1 je nejnovější verze, pokrývá nejširší podporu a je pravděpodobně nejvhodnější volbou. Všechno ostatní je buď starší verze, nebo podmnožina SVG 1.1, a při jejím výběru se musím ještě setkat s problémem.
• Fonty> Typ : Výběr možnosti „Převést na obrys“ zajistí, že veškerý zadaný text v souboru bude exportován spíše než vektorové cesty než glyfy. Glyfy mají šanci, že nebudou vykresleny, ale vektorové cesty jsou vždy velkým palcem nahoru.
• Možnosti> Umístění obrázku : Pokud jsou v souboru použity rastrové obrázky (číst: JPG.webp, PNG, GIF), budeme chtít vybrat možnost „Propojit“. V opačném případě bude rastrový obrázek vložen do souboru a to zvýší výkonové výhody přímo z SVG zvětšením velikosti souboru tak, aby zahrnoval tyto další podklady. Lepší je odkazovat na ně jako na odkazy a nezapomeňte tyto zdrojové soubory zahrnout do stejného adresáře jako soubor SVG.
• Možnosti> Umístění obrázku> Zachovat možnosti úprav aplikace Illustrator : Toto má obrovský dopad na výstup souboru SVG. Jelikož zde pravděpodobně ukládáte „hlavní“ kopii, která není určena pro nás na webu, ponecháte toto políčko zaškrtnuté. Tím zachováte chráněné věci Illustratoru (například průvodce) pro další otevření souboru. Nezaškrtnuto bude znamenat, že takové věci budou odstraněny a ztraceny.
• Pokročilé možnosti> Vlastnosti CSS : Pro tento vyberu „Prezentační atributy“, protože umístí vlastnosti (např. Výplně, tahy atd.) Na nejnižší úroveň přesnosti. Například . Toto stylizuje prvek, ale je velmi snadné jej přepsat v CSS.
• Pokročilé možnosti> Desetinná místa : Pokud jste procházeli kódem a , pak víte, že hodnoty určující tyto tvary mohou být velmi přesné. Mnohokrát jsou však příliš přesné a zvyšují celkovou velikost souboru SVG. Vzhledem k tomu, že zde pravděpodobně ukládáte hlavní soubor, můžete jej udržet poměrně vysokou, protože velikost souboru není příliš důležitá.
• Pokročilé možnosti> Kódování : Nejsem nadšencem kódování UTF, ale ponechání tohoto nastavení na „Unicode UTF-8“ zajišťuje zpětnou kompatibilitu. Velikost souborů UTF-8 má také tendenci být menší než UTF-16, což je samo o sobě výhra.
• Pokročilé možnosti> Reagovat : Ponecháte-li toto nezaškrtnuté, nastaví se pevné heighta widthatributy na SVG. Tuto možnost zaškrtnu, protože mi umožňuje nastavit tyto atributy buď v kódu, nebo v CSS.

Metoda 2: Exportovat jako

Dalším způsobem, jak získat SVG z aplikace Adobe Illustrator, je vybrat File > Export > Export As… možnost z hlavní nabídky. Existuje však druhý způsob, jak se tam dostat, pomocí panelu Akce v pracovním prostoru Illustratoru.

Tato možnost je ideální, pokud víte, že tento soubor použijete přímo na webu a neplánujete si s designem pohrávat později. Poskytuje mnohem méně nastavení a několik možností, které souboru umožňují další optimalizaci souboru pro lepší výkon. Ve skutečnosti je nejlepší udělat to na kopii souboru než na hlavním souboru, takže existuje jedna verze, kterou lze otevřít a upravit později v Illustratoru, a další, která je vhodnější pro zobrazování na produkčním webu.

• Styling : Této jsme se dříve věnovali v nastavení Metody 1, ale zvolím zde „Atributy prezentace“, protože je to způsob, jak uspořádat vlastnosti na nejvyšší úrovni atributů. To přidává pořadí do značky, flexibilitu v naší schopnosti stylizovat následné atributy pomocí CSS a často vede k menším velikostem souborů.
• Písmo : Toto je další, které jsme popsali výše, ale výběr možnosti „Převést na obrysy“ zamění glyfy za vektorové cesty znaků, což zajistí správné vykreslení textu.
• Obrázky : Toto je další, které jsme popsali výše, ale volba „Odkaz“ zabrání zabalení rastrových obrázků do SVG, čímž se soubor mnohem zvětší.
• ID objektů : Toto nastavení dává Illustratoru pochodové příkazy, jak pojmenovat ID v označení. Můžete mu říci, aby pojmenovala ID na základě toho, jak jsou v souboru pojmenovány vrstvy.
• Desetinné : Méně desetinných míst v kódu znamená menší velikost souboru. Nastavení 1je ideální a v mnoha případech v pořádku a nebude mít znatelný rozdíl v designu, ale 2je obvykle bezpečné. Ať tak či onak, stojí za to zkontrolovat, jak je vykreslen SVG.
• Minify : Ano, prosím! To způsobí snížení kódu, aby se zmenšily mezery a zvýšil výkon webu podobně jako při zhuštění CSS.
• Responzivní : Přesně jako první metoda je výběr této možnosti ideální, protože fixní heighta widthatributy by jinak byly umístěny na SVG.