„Adobe Illustrator“ eksportavimo parinktys - CSS-gudrybės

Tai mažiau fragmentas ir daugiau priminimas apie tai, ko dažnai ieškau. Kuriant SVG failus „Adobe Illustrator“, yra keli skirtingi failų eksportavimo būdai. Abu metodai apima keletą variantų, kai kuriuos iš jų aš visiškai pamirštu, ką jie reiškia ir ką pasirinkti.

1 būdas: išsaugoti kaip…

Tikriausiai nenaudotumėte šio metodo išsaugodami SVG naudojimui žiniatinklyje. Tai daugiausia skirta pagrindiniam dokumentui išsaugoti. Tiesą sakant, galbūt norėsite tiesiog išsaugoti „Illustrator“ formatu tiesiogiai. Norėdami eksportuoti į internetą, naudokitės kitomis kitomis eksportavimo parinktimis.

Dažniausias būdas išsaugoti failą kaip SVG „Adobe Illustrator“ yra pasirinkti File > Save As… parinktį iš pagrindinio meniu.

„Illustrator“ suaktyvins dialogo langą, kuriame bus klausiama, kaip pavadinti failą ir kur jį išsaugoti. Dar svarbiau, ji taip pat klausia, kokio tipo failą išsaugoti kaip kurį, šiuo atveju - SVG. Nesuspaustas SVG (svgz). Plain ol 'SVG.

Spustelėkite mygtuką Išsaugoti ir pasirodys kitas parinkčių rinkinys. Čia mano atmintis linkusi mane nuvilti ir turiu ieškoti internete atsakymų. Čia pateikiamas visiškai optimalaus būdo išsaugoti SVG failą „Adobe Illustrator“ ekrano kopija.

• SVG profiliai : Tai nustato XML dokumento tipą atidarymo žymoje. „SVG 1.1“ yra naujausia versija, aprėpianti plačiausią palaikymą ir greičiausiai tinkamiausia parinktis. Visa kita yra senesnė versija arba SVG 1.1 pogrupis, ir aš dar neturėjau susidurti su problema, kai ją pasirinkau.
• Šriftai> Tipas : Pasirinkus „Konvertuoti į kontūrą“ bus užtikrinta, kad bet koks įvestas failo tekstas bus eksportuojamas ne vektoriniais, o vektoriniais keliais. Glyfai turi galimybę nebūti pateikiami, tačiau vektoriniai keliai visada yra didelis nykštis.
• Parinktys> Vaizdo vieta : jei faile naudojami rastriniai vaizdai (skaityti: JPG.webp, PNG, GIF), norime pasirinkti parinktį „Susieti“. Priešingu atveju rastrinis vaizdas bus įterptas į failą, o tai išnaudoja našumo naudą iš SVG, padidindamas failo dydį, įtraukdamas tuos papildomus išteklius. Geriau nurodykite juos kaip nuorodas ir būtinai įtraukite tuos šaltinio failus į tą patį katalogą kaip ir SVG failas.
• Parinktys> Vaizdo vieta> Išsaugoti „Illustrator“ redagavimo galimybes : Tai daro didžiulę įtaką SVG failo išvestims. Kadangi tikriausiai čia saugote „pagrindinę“ kopiją, kuri nėra skirta mums internete, palikite tai pažymėtą. Tai išsaugos „Illustrator“ nuosavybės teises turinčius dalykus (pvz., Vadovus), kai kitą kartą atidarysite failą. Nepažymėta reikš tokius dalykus, kurie bus nuimti ir pamesti.
• Išplėstinės parinktys> CSS ypatybės : Aš pasirenku šiai parinkčiai „Pateikimo atributai“, nes savybės (pvz., Užpildai, brūkšniai ir pan.) Priskiriamos žemiausiam specifiškumo lygiui. Pavyzdžiui . Tai stilizuoja elementą, tačiau CSS jį labai lengva nepaisyti.
• Išplėstinės parinktys> Dešimtainės vietos : jei naršėte kodą a , tada žinote, kad tas formas nurodančios vertės gali būti labai tikslios. Tačiau daug kartų tai yra per daug tikslu ir padidina bendrą SVG failo dydį. Kadangi čia greičiausiai išsaugosite pagrindinį failą, galite tai išlaikyti gana aukštą, nes failo dydis nerimauja.
• Išplėstinės parinktys> Kodavimas : aš nesu UTF kodavimo mėgėjas, tačiau palikęs tai „Unicode UTF-8“, užtikrinamas atgalinis suderinamumas. Be to, UTF-8 failų dydžiai paprastai būna mažesni nei UTF-16, taigi tai yra pats laimėjimas.
• Išplėstinės parinktys> Reaguojantis : Palikus šį žymėjimą, SVG nustatomi fiksuoti heightir widthatributai. Tikrinu šią parinktį, nes ji leidžia man nustatyti tuos atributus kode arba CSS.

2 metodas: eksportuoti kaip

Kitas būdas gauti SVG iš „Adobe Illustrator“ yra File > Export > Export As… pagrindinio meniu parinkties pasirinkimas. Tačiau yra antras būdas ten patekti naudojant „Illustrator“ darbo srities skydelį „Veiksmai“.

Ši parinktis yra ideali, jei žinote, kad šį failą naudosite tiesiogiai žiniatinklyje ir neplanuojate vėliau pritaikyti dizaino. Tai suteikia daug mažiau nustatymų ir keletą parinkčių, leidžiančių failui toliau optimizuoti failą, kad jis būtų geresnis. Tiesą sakant, geriausia praktika tai padaryti failo kopijoje, o ne pačiame pagrindiniame faile, todėl yra viena versija, kurią vėliau galima atidaryti ir redaguoti „Illustrator“, ir kita, kuri labiau tinka pateikti produkcijos svetainėje.

• Stilius : mes tai apėmėme anksčiau 1 metodo nustatymuose, bet aš čia pasirenku „Pristatymo atributus“, nes tai yra būdas organizuoti ypatybes aukščiausio lygio atributuose. Tai padidina žymėjimo tvarką, lankstumą, kai galime stilizuoti vėlesnius atributus naudodami CSS, ir dažnai lemia mažesnius failų dydžius.
• Šriftas : tai dar vienas dalykas, kurį aptarėme aukščiau, tačiau pasirinkus „Konvertuoti į kontūrus“ simbolių vektoriniai takai keičiami simboliais, kurie užtikrina, kad tekstas būtų pateiktas teisingai.
• Vaizdai : tai dar vienas paveikslėlis, kurį apžvelgėme aukščiau, tačiau pasirinkus „Nuoroda“, įterptų rastrinių vaizdų nebus galima įpakuoti į SVG, todėl failas bus žymiai didesnis.
• Objekto ID : Šis parametras suteikia „Illustrator“ eisenos nurodymus, kaip žymėti įvardyti ID. Galite nurodyti ID pavadinti pagal tai, kaip faile pavadinti sluoksniai.
• Dešimtainis skaičius : mažiau dešimtainių skaitmenų reiškia mažesnį failų dydį. Nustačius tai 1yra idealu ir daugeliu atvejų gerai, tai nepastebės pastebimo dizaino skirtumo, tačiau 2paprastai yra saugu. Bet kokiu atveju verta patikrinti, kaip pateikiamas SVG.
• Sumažinti : taip, prašau! Tai sugadina kodą žemyn, kad sumažėtų tarpų ir padidėtų žiniatinklio našumas, panašiai kaip sumažinant CSS.
• Interaktyvus : lygiai taip pat, kaip ir pirmasis metodas, pasirinkti šią parinktį yra idealu, nes priešingu atveju SVG būtų dedami fiksuoti heightir widthatributai.