Adobe Illustrator exportálási beállítások - CSS-trükkök

Ez kevésbé részlet és inkább emlékeztető valamire, amit gyakran keresek fel. Amikor SVG fájlokat hoz létre az Adobe Illustrator alkalmazásban, a fájlok exportálásához többféle módszer létezik. Mindkét módszer tartalmaz egy csomó lehetőséget, amelyek közül néhányat teljesen elfelejtek, mit jelentenek és mit kell kiválasztani.

1. módszer: Mentés másként ...

Valószínűleg nem használná ezt a módszert az SVG webes használatra történő mentésére. Ez nagyrészt a törzsdokumentum mentésére szolgál. Valójában lehet, hogy csak közvetlenül az Illustrator formátumban szeretne menteni. Néhány más exportálási lehetőséget használhat az internetes exportáláshoz.

A fájl SVG formátumban történő mentésének leggyakoribb módja az Adobe Illustrator programban az, ha a File > Save As… főmenüből választja az opciót.

Az Illustrator elindít egy párbeszédablakot, amelyben megkérdezi, hogy nevezze el a fájlt, és hova mentse. Ennél is fontosabb, hogy azt is megkérdezi, hogy melyik fájltípust mentse el, amelyik SVG. Nem SVG tömörítve (svgz). Sima ol 'SVG.

Kattintson a Mentés gombra, és megjelenik egy másik opció. Itt szokott elbukni a memóriám, és az interneten kell kutatnom a válaszokat. Itt található egy képernyőkép az SVG fájl Adobe Illustratorba mentésének tökéletesen optimális módjáról.

• SVG-profilok : Ez beállítja az XML dokumentum típusát a nyitó címkén. Az SVG 1.1 a legújabb verzió, amely a legszélesebb körű támogatást fedi le, és valószínűleg a legmegfelelőbb lehetőség. Minden más vagy az SVG 1.1 régebbi verziója, vagy egy részhalmaza, és még mindig nem kellett belemennem egy kérdésbe a kiválasztásakor.
• Betűtípusok> Típus : A „Konvertálás vázlattá” kiválasztásával biztosíthatja, hogy a fájlba beírt bármilyen szöveg exportálva legyen, nem pedig karakterjelekként. A karakterjeleknek van esélyük arra, hogy ne jelenjenek meg, de a vektoros útvonalak mindig nagyok.
• Opciók> Kép helye : Ha raszteres képeket (olvasható: JPG.webp, PNG, GIF) használunk a fájlban, akkor ki kell választanunk a „Link” opciót. Ellenkező esetben a raszterkép beágyazódik a fájlba, és ez a teljesítményelőnyöket közvetlenül az SVG-ből szippantja ki azzal, hogy növeli a fájl méretét az említett extra eszközök bevonásával. Jobb hivatkozásként hivatkozni rájuk, és feltétlenül vegye fel azokat a forrásfájlokat ugyanabba a könyvtárba, mint az SVG fájlt.
• Opciók> Kép elhelyezése> Az Illustrator szerkesztési képességeinek megőrzése : Ez hatalmas hatással van az SVG fájl kimenetére. Mivel valószínűleg itt tárol egy „master” példányt, amelyet nem nekünk szánunk az interneten, ezt hagyja bejelölve. Ez megőrzi az Illustrator által védett dolgokat (például útmutatók) a fájl következő megnyitásakor. Az ellenőrizetlen azt jelenti, hogy az ilyen dolgokat leveszik és elveszítik.
• Speciális beállítások> CSS tulajdonságok : Azért választom a „Prezentációs attribútumok” elemet, mert a tulajdonságokat (pl. Kitöltések, körvonalak és hasonlók) a legalacsonyabb specifitásszintre helyezi. Például . Ez stilizálja az elemet, de CSS-ben nagyon könnyen felülírható.
• Speciális beállítások> Tizedeshelyek : Ha a a kódot böngészte , akkor tudja, hogy az ezeket az alakzatokat meghatározó értékek szuper pontosak lehetnek. Sokszor ezek azonban túl pontosak és hozzáadják az SVG fájl teljes méretét. Mivel valószínűleg mesterfájlt ment itt, ezt meglehetősen magas szinten tarthatja, mert a fájlméret nem okoz különösebb gondot.
• Speciális beállítások> Kódolás : Nem vagyok buff az UTF-kódolással kapcsolatban, de ha ezt az „Unicode UTF-8” -ra hagyom, biztosítani tudjuk a visszafelé való kompatibilitást. Ezenkívül az UTF-8 fájlméretek általában kisebbek, mint az UTF-16, tehát ez önmagában is győzelem.
• Speciális beállítások> Reszponzív : Ha ezt nem jelöli be, akkor az fix heightés widthattribútumokat állítja be az SVG-n. Azért jelölöm be ezt az opciót, mert lehetővé teszi, hogy ezeket az attribútumokat a kódban vagy a CSS-ben állítsam be.

2. módszer: Exportálás As néven

Az SVG megszerzésének másik módja az Adobe Illustrator alkalmazásból az, ha a File > Export > Export As… főmenüből választja az opciót. Van azonban egy másik út is, amely az Illustrator munkaterület Műveletek paneljének használatával érhető el.

Ez az opció ideális, ha tudod, hogy ezt a fájlt közvetlenül az interneten fogod használni, és nem tervezed később a tervezést. Kevesebb beállítást és pár lehetőséget kínál, amelyek lehetővé teszik a fájl számára, hogy a jobb teljesítmény érdekében tovább optimalizálja a fájlt. Valójában a legjobb gyakorlat, ha ezt a fájl másolatán, nem pedig a főfájlon hajtja végre, így van egy verzió, amelyet később az Illustratorban megnyithat és szerkeszthet, és egy másik, amely jobban megfelel a produkciós webhelyen történő kiszolgálásra.

• Stílus : Ezt már korábban az 1. módszer beállításaiban ismertettük, de itt a „Prezentációs attribútumok” lehetőséget választom, mert így lehet a tulajdonságokat a legmagasabb szintű attribútumokon rendszerezni. Ez növeli a jelölés sorrendjét, rugalmasságot kínál a későbbi attribútumok CSS-sel történő stílusában, és gyakran kisebb fájlméretekhez vezet.
• Betűtípus : Ez egy másik, amire fentebb kitértünk, de az „Átalakítás körvonalakká” választás esetén a karakterjelek vektorpályákra cserélnek karaktereket, ami biztosítja a szöveg megfelelő megjelenítését.
• Képek : Ez egy másik, a fentiekben tárgyalt kép, de a „Link” kiválasztása megakadályozza, hogy a beágyazott raszteres képeket az SVG-be csomagolják, ami sokkal nagyobbá teszi a fájlt.
• Objektumazonosítók : Ez a beállítás az Illustrator menetelési parancsokat ad az azonosítók elnevezéséről a jelölésben. Elmondhatja, hogy nevezzen el azonosítókat annak alapján, hogy a rétegeket hogyan nevezik meg a fájlban.
• Tizedes : A kódban kevesebb tizedes jelenti a kisebb fájlméretet. Ennek beállítása 1ideális és sok esetben rendben van, és nem lesz észrevehető különbsége a tervezésben, de 2általában biztonságos. Akárhogy is, érdemes ellenőrizni az SVG renderelését.
• Csökkentse : Igen, kérem! Ez a kódot lefelé gyűjti, hogy csökkentse a szóközöket és növelje az internetes teljesítményt, hasonlóan a CSS csökkentéséhez.
• Válaszadó : Pontosan az első módszerhez hasonlóan, ennek az opciónak a kiválasztása is ideális, mert a fix heightés az widthattribútumok egyébként az SVG-re kerülnének.