Adobe Illustratori ekspordisuvandid - CSS-trikid

See on vähem jupp ja pigem meeldetuletus millegi kohta, mida ma tihti üles otsin. Adobe Illustratoris SVG-failide loomisel on failide eksportimiseks paar erinevat meetodit. Mõlemad meetodid sisaldavad käputäis võimalusi, millest mõned unustan täielikult ära, mida need tähendavad ja mida valida.

1. meetod: salvesta nimega ...

Tõenäoliselt ei kasutaksite seda meetodit SVG veebis kasutamiseks salvestamiseks. See on suuresti põhidokumendi salvestamiseks. Tegelikult võiksite lihtsalt salvestada otse Illustratori vormingus. Veebi eksportimiseks kasutaksite mõnda muud ekspordivõimalust.

Kõige tavalisem viis faili SVG-vormingus salvestamiseks Adobe Illustratoris on File > Save As… peamenüüst suvandi valimine .

Illustrator käivitab dialoogiakna, kus küsitakse, mida failile nimetada ja kuhu salvestada. Veelgi olulisem on see, et see küsib ka seda, millist tüüpi fail salvestada millisena, antud juhul on SVG. Pole SVG tihendatud (svgz). Tavaline SVG.

Klõpsake nuppu Salvesta ja kuvatakse teine ​​valik valikuid. Siin kipub mu mälu mind alt vedama ja ma pean vastuseid otsima veebist. Siin on ekraanipilt täiesti optimaalsest viisist SVG-faili salvestamiseks Adobe Illustratoris.

• SVG-profiilid : see määrab avamärgendile XML-dokumendi tüübi . SVG 1.1 on uusim versioon, hõlmab kõige laiaulatuslikumat tuge ja on tõenäoliselt kõige sobivam variant. Kõik muu on kas SVG 1.1 vanem versioon või alamhulk ja ma ei pea selle valimisel veel probleemiga kokku puutuma.
• Fondid> Tüüp : Valides „Teisenda kontuuriks“, tagatakse, et faili mis tahes trükitud tekst eksporditakse vektorite, mitte tähestike kujul. Glyfidel on võimalus, et neid ei renderdata, kuid vektoriteed on alati suur pöial.
• Valikud> Pildi asukoht : kui failis kasutatakse rasterpilte (loe: JPG.webp, PNG, GIF), siis soovime valida suvandi "Link". Vastasel juhul manustatakse rasterkujutis faili ja see imeb jõudluse eeliseid kohe SVG-st, suurendades faili suurust nende lisavarade kaasamiseks. Parem viidake neile linkidena ja lisage need lähtefailid kindlasti SVG-failiga samasse kataloogi.
• Valikud> Pildi asukoht> Säilita Illustratori redigeerimisvõimalused : See mõjutab tohutult SVG-faili väljundit. Kuna salvestate siia tõenäoliselt põhikoopia, mis pole mõeldud meile veebis, jätaksite selle märkimata. See säilitab Illustratori varalised asjad (nt juhendid) järgmisel faili avamisel. Kontrollimata tähendab, et sellised asjad võetakse ära ja kaotatakse.
• Täpsemad valikud> CSS-i atribuudid : Valin selle jaoks valiku „Esitluse atribuudid”, kuna see asetab omadused (nt täidised, jooned jms) kõige madalamale spetsiifilisuse tasemele. Näiteks . See stiilib elemendi, kuid CSS-is on seda väga lihtne alistada.
• Täpsemad valikud> Kümnendkohad : kui olete sirvinud koodi a , siis teate, et neid kujundeid määravad väärtused võivad olla ülitäpsed. Mitu korda on need aga liiga täpsed ja suurendavad SVG-faili suurust. Kuna salvestate siia tõenäoliselt põhifaili, saate selle hoida üsna kõrgel, kuna faili suurus pole eriti murettekitav.
• Täpsemad valikud> Kodeerimine : ma ei ole UTF-kodeerimise harrastaja, kuid selle jätmine jaotisse „Unicode UTF-8” tagab tagurpidi ühilduvuse. Samuti kipuvad UTF-8 failide suurused olema väiksemad kui UTF-16, nii et see on iseenesest võit.
• Täpsemad valikud> Tundlik : selle märkimata jätmine määrab SVG-s fikseeritud heightja widthatribuudid. Kontrollin seda valikut, kuna see võimaldab mul need atribuudid kas koodis või CSS-is määrata.

2. meetod: eksportige nimega

Teine võimalus saada SVG Adobe Illustratorist on valida File > Export > Export As… peamenüüst suvand. Siiski on Illustratori tööpiirkonna paneeli Toimingud abil teine ​​võimalus sinna pääseda.

See valik on ideaalne, kui teate, et kavatsete seda faili otse veebis kasutada ega kavatse hiljem kujundusega nokitseda. See pakub palju vähem seadeid ja paar võimalust, mis võimaldavad failil parema jõudluse huvides faili veelgi optimeerida. Tegelikult on parim tava seda teha faili koopial, mitte põhifailil endal, nii et on üks versioon, mida saab hiljem Illustratoris avada ja redigeerida, ja teine, mis sobib rohkem tootmise veebisaidil esitamiseks.

• Stiil : me käsitlesime seda 1. meetodi seadetes varem, kuid valisin siin valiku „Esitluse atribuudid”, kuna see on viis korrastada atribuute kõrgeima taseme atribuutidel. See lisab märgistusele järjekorra, paindlikkuse meie võimaluses järgnevaid atribuute CSS-iga kujundada ja viib sageli väiksemate failisuurusteni.
• Font : see on veel üks, mida me eespool käsitlesime, kuid valides „Teisenda kontuurideks” vahetatakse tähemärgid vektoriteede jaoks tähtedega, mis tagab teksti õige renderdamise.
• Pildid : see on veel üks pilt, mida me eespool käsitlesime, kuid "Lingi" valimine hoiab ära manustatud rasterkujutiste SVG-sse pakkimise, mis muudab faili palju suuremaks.
• Objekti ID-d : see säte annab Illustratorile marssimiskorraldused, kuidas märgistuses ID-sid nimetada. Võite öelda ID-de nimetamise selle järgi, kuidas kihid failis nimetatakse.
• Koma : Vähem kümnendkohti koodis tähendab väiksemat failisuurust. Selle määramine 1on paljudel juhtudel ideaalne ja korras ning sellel ei ole disainis märgatavat erinevust, kuid see 2on tavaliselt ohutu. Mõlemal juhul tasub kontrollida, kuidas SVG renderdatakse.
• Minimeeri : jah, palun! See purustab koodi tühimahu vähendamiseks ja veebi jõudluse suurendamiseks sarnaselt CSS-i minimeerimisega.
• Reageeriv : täpselt nagu esimene meetod, on ka selle valimine ideaalne, kuna fikseeritud heightja widthatribuudid oleksid muidu paigutatud SVG-le.