Mogućnosti izvoza Adobe Illustrator - CSS-trikovi

Ovo je manje isječak, a više podsjetnik za nešto što često pogledam. Prilikom stvaranja SVG datoteka u Adobe Illustratoru postoji nekoliko različitih metoda za izvoz datoteka. Obje metode uključuju nekoliko mogućnosti, od kojih neke potpuno zaboravljam što znače i što odabrati.

1. način: Spremi kao ...

Vjerojatno ne biste koristili ovu metodu za spremanje SVG-a za upotrebu na webu. To je uglavnom za spremanje glavnog dokumenta. U stvari, možda biste htjeli samo izravno spremiti u Illustrator formatu. Za izvoz za web koristili biste neke druge mogućnosti izvoza.

Najčešći način spremanja datoteke kao SVG u Adobe Illustratoru je odabir File > Save As… opcije s glavnog izbornika.

Illustrator će pokrenuti dijaloški prozor s pitanjem kako imenovati datoteku i gdje je spremiti. Što je još važnije, također se pita koju vrstu datoteke spremiti kao koju, u ovom je slučaju SVG. Nije SVG komprimirano (svgz). Običan SVG.

Pritisnite gumb Spremi i pojavit će se drugi skup opcija. Tu me moje pamćenje zna iznevjeriti i moram pretraživati ​​web tražeći odgovore. Evo snimke zaslona savršeno optimalnog načina spremanja SVG datoteke u Adobe Illustrator.

• SVG profili : Ovim se postavlja vrsta XML dokumenta na početnoj oznaci. SVG 1.1 je najnovija verzija, pokriva najširu podršku i vjerojatno je najprikladnija opcija. Sve ostalo je ili starija verzija ili podskup SVG-a 1.1 i još nisam naišao na problem prilikom odabira.
• Fontovi> Vrsta : Odabirom opcije „Pretvori u obris“ osigurat će se da se svaki otkucani tekst u datoteci izvozi vektorske staze, a ne glifi. Glifi imaju šanse da se ne prikažu, ali vektorske staze su uvijek veliki palac gore.
• Opcije> Lokacija slike : Ako se u datoteci koriste rasterske slike (čitaj: JPG.webp, PNG, GIF), tada ćemo htjeti odabrati opciju "Link". Inače, rasterska slika bit će ugrađena u datoteku i to usisava prednosti izvedbe odmah izvan SVG-a povećavanjem veličine datoteke kako bi se uključila ta dodatna sredstva. Bolje ih je uputiti kao poveznice i obavezno uključiti te izvorne datoteke u isti direktorij kao i SVG datoteka.
• Opcije> Lokacija slike> Sačuvaj mogućnosti uređivanja Illustratora : Ovo ima ogroman utjecaj na izlaz SVG datoteke. Budući da ovdje spremate "glavnu" kopiju koja nam nije namijenjena na webu, ostavili biste ovo označeno. Ovo će sačuvati zaštićene stvari Illustratora (poput vodiča) za sljedeći put kada otvorite datoteku. Ako nije označeno, takve će stvari biti uklonjene i izgubljene.
• Napredne mogućnosti> Svojstva CSS-a : Odabirem "Prezentacijski atributi" za ovaj jer smješta svojstva (npr. Ispune, poteze i slično) na najnižu razinu specifičnosti. Na primjer . Ovo stilizira element, ali ga je vrlo lako nadjačati u CSS-u.
• Napredne mogućnosti> Decimalna mjesta : Ako ste u kodu pretraživali a , tada znate da vrijednosti koje određuju te oblike mogu biti super precizne. Međutim, oni su često previše precizni i dodaju ukupnoj veličini SVG datoteke. Budući da ovdje vjerojatno spremate glavnu datoteku, možete je zadržati prilično visoku, jer veličina datoteke ne zabrinjava.
• Napredne mogućnosti> Kodiranje : Nisam ljubitelj UTF kodiranja, ali ostavljajući ovo na "Unicode UTF-8" osigurava povratnu kompatibilnost. Također, veličine datoteka UTF-8 obično su manje od UTF-16, pa je to samo po sebi dobitak.
• Napredne mogućnosti> Odzivno : Ako ovo ne označite, postavit će se fiksni heighti widthatributi na SVG. Provjeravam ovu opciju jer mi omogućuje da postavim te atribute u kodu ili u CSS-u.

Metoda 2: Izvoz kao

Drugi način za dobivanje SVG-a iz Adobe Illustratora je odabir File > Export > Export As… opcije s glavnog izbornika. Međutim, postoji drugi način da se tamo dođe pomoću ploče Akcije u radnom prostoru Illustrator.

Ova je opcija idealna ako znate da ćete ovu datoteku koristiti izravno na webu i ne planirate se kasnije petljati s dizajnom. Pruža manje postavki i nekoliko opcija koje datoteci omogućuju daljnju optimizaciju datoteke radi boljih performansi. Zapravo je najbolje to učiniti na kopiji datoteke, a ne na samoj glavnoj datoteci, tako da postoji jedna verzija koja se kasnije može otvoriti i urediti u Illustratoru, a druga koja je prikladnija za posluživanje na produkcijskoj web stranici.

• Stiliziranje : Ovu smo obrađivali ranije u postavkama Metode 1, ali ovdje odabirem "Atributi prezentacije" jer je to način organiziranja svojstava na atributima najviše razine. To dodaje red označavanju, fleksibilnost u mogućnosti oblikovanja sljedećih atributa pomoću CSS-a, a često dovodi do manjih veličina datoteka.
• Font : Ovo je još jedan koji smo pokrili gore, ali odabirom "Pretvori u obrise" zamjenjuje se glifi za vektorske staze za znakove što osigurava pravilno prikazivanje teksta.
• Slike : Ovo je još jedna ona koju smo pokrili gore, ali odabir "Link" spriječit će pakiranje ugrađenih rasterskih slika u SVG, što datoteku čini puno većom.
• ID-ovi objekata : Ova postavka daje Illustratoru naredbe za marširanje kako imenovati ID-ove u oznakama. Možete mu reći da imenuje ID-ove na temelju načina imenovanja slojeva u datoteci.
• Decimalni : Manje decimala u kodu znači manje veličine datoteka. Ako je ovo postavljeno 1, idealno je i u redu u mnogim slučajevima i neće imati primjetnih razlika u dizajnu, ali 2je obično sigurno. U svakom slučaju, vrijedi provjeriti kako se SVG prikazuje.
• Umanji : Da, molim te! To drobi kôd kako bi se smanjio razmak i povećale web performanse slično kao i minificiranje CSS-a.
• Responzivan : Upravo poput prve metode, odabir ove opcije idealan je jer bi se fiksni heighti widthatributi inače postavili na SVG.