Adobe Illustratorin vientiasetukset - CSS-temppuja

Tämä on vähemmän katkelma ja enemmän muistutus jostakin, jota etsin usein. Kun luot SVG-tiedostoja Adobe Illustratorissa, tiedostojen vientiin on olemassa muutama erilainen tapa. Molemmat menetelmät sisältävät kourallisen vaihtoehtoja, joista jotkut unohdan kokonaan, mitä ne tarkoittavat ja mitä valita.

Tapa 1: Tallenna nimellä…

Et todennäköisesti käytä tätä menetelmää SVG: n tallentamiseen käytettäväksi verkossa. Tämä on pääosin päädokumentin tallentamista varten. Itse asiassa haluat ehkä vain tallentaa suoraan Illustrator-muotoon. Voit käyttää joitain muita vientivaihtoehtoja verkkoon viemiseen.

Yleisin tapa tallentaa tiedosto SVG: nä Adobe Illustratorissa on valita File > Save As… vaihtoehto päävalikosta.

Illustrator käynnistää valintaikkunan, jossa kysytään, mihin tiedosto nimetään ja mihin se tallennetaan. Vielä tärkeämpää on, että se kysyy myös, minkä tyyppinen tiedosto tallennetaan, mikä on SVG. Ei SVG-pakattu (svgz). Tavallinen SVG.

Napsauta Tallenna-painiketta ja uusi vaihtoehtojoukko ilmestyy. Täällä muistini pyrkii pettämään minut, ja minun on etsittävä vastauksia verkosta. Tässä on kuvakaappaus täysin optimaalisesta tapasta tallentaa SVG-tiedosto Adobe Illustratoriin.

• SVG-profiilit : Tämä asettaa XML-asiakirjatyypin avaavaan tagiin. SVG 1.1 on viimeisin versio, joka kattaa laajimman tuen ja on todennäköisesti sopivin vaihtoehto. Kaikki muu on joko vanhempi versio tai SVG 1.1: n osajoukko, eikä minun tarvitse vielä törmätä ongelmaan valitessani sitä.
• Fontit> Tyyppi : Kun valitset "Muunna ääriviivaksi", varmistetaan, että kaikki tiedostoon kirjoitetut tekstit viedään vektoripoluiksi eikä kuvioiksi. Kuvioilla on mahdollisuus olla tekemättä, mutta vektoripolut ovat aina iso peukalo ylös.
• Asetukset> Kuvan sijainti : Jos tiedostossa käytetään rasterikuvia (lue: JPG.webp, PNG, GIF), haluamme valita vaihtoehdon Linkki. Muussa tapauksessa rasterikuva upotetaan tiedostoon ja se imee suorituskykyedut heti SVG: stä lisäämällä tiedostokokoa sisällyttämään nämä ylimääräiset varat. Parempi viitata niihin linkkeinä ja muista sisällyttää lähdetiedostot samaan hakemistoon kuin SVG-tiedosto.
• Asetukset> Kuvan sijainti> Säilytä Illustratorin muokkausominaisuudet : Tällä on valtava vaikutus SVG-tiedoston tulosteeseen. Koska olet todennäköisesti tallentamassa tähän "master" -kopiota, jota ei ole tarkoitettu meille verkossa, jätä tämä valittuun. Tämä säilyttää Illustratorin omistamat asiat (kuten oppaat), kun seuraavan kerran avaat tiedoston. Tarkistamaton tarkoittaa, että sellaiset asiat riisutaan ja menetetään.
• Lisäasetukset> CSS-ominaisuudet : Valitsin tälle ominaisuudelle ”Esitysmääritteet”, koska se asettaa ominaisuudet (esim. Täytteet, viivat ja muut) alimmalle spesifisyystasolle. Esimerkiksi . Tämä tyyli elementti, mutta on erittäin helppo ohittaa CSS.
• Lisäasetukset> Desimaalipaikat : Jos olet selannut a-koodia , tiedät, että nämä muodot määrittävät arvot voivat olla erittäin tarkkoja. Monesti ne ovat kuitenkin liian tarkkoja ja lisäävät SVG-tiedoston kokoa. Koska olet todennäköisesti tallentamassa päätiedostoa tänne, voit pitää tämän melko korkealla, koska tiedostokoko ei ole kovin huolestuttava.
• Lisäasetukset> Koodaus : En ole UTF-koodauksen harrastaja, mutta jättämällä tämän kohtaan “Unicode UTF-8” varmistetaan taaksepäin yhteensopivuus. Myös UTF-8-tiedostokoot ovat yleensä pienempiä kuin UTF-16, joten se on itsessään voitto.
• Lisäasetukset> Reagoiva : Jos tämä jätetään valitsematta, SVG: ssä määritetään kiinteät heightja widthmääritteet. Tarkistan tämän vaihtoehdon, koska sen avulla voin asettaa nämä määritteet joko koodiin tai CSS: ään.

Tapa 2: Vie nimellä

Toinen tapa saada SVG Adobe Illustratorista on valita File > Export > Export As… vaihtoehto päävalikosta. On kuitenkin olemassa toinen tapa päästä sinne käyttämällä Illustrator-työtilan Toiminnot-paneelia.

Tämä vaihtoehto on ihanteellinen, jos tiedät, että aiot käyttää tätä tiedostoa suoraan verkossa, etkä aio hioa suunnittelua myöhemmin. Se tarjoaa paljon vähemmän asetuksia ja pari vaihtoehtoa, joiden avulla tiedosto voi optimoida tiedoston edelleen suorituskyvyn parantamiseksi. Itse asiassa on parasta, että tämä tehdään tiedostokopiossa eikä itse päätiedostossa, joten on yksi versio, joka voidaan avata ja muokata myöhemmin Illustratorissa, ja toinen, joka soveltuu paremmin tuotantosivustolle.

• Tyylitys : Käsitelimme tämän aiemmin menetelmän 1 asetuksissa, mutta valitsen täältä ”Esitysmääritteet”, koska se on tapa järjestää ominaisuuksia korkeimman tason määritteissä. Tämä lisää järjestystä merkintöihin, joustavuutta kykyymme muotoilla seuraavat attribuutit CSS: llä ja johtaa usein pienempiin tiedostokokoihin.
• Fontti : Tämä on toinen edellä käsittelemämme, mutta valitsemalla "Muunna ääriviivoiksi" vaihdetaan merkit vektorikuville merkkien kohdalla, mikä varmistaa tekstin oikean renderoinnin.
• Kuvat : Tämä on jälleen yksi edellä käsitellymme, mutta "Linkki" -valinta estää upotettujen rasterikuvien pakkaamisen SVG: hen, mikä tekee tiedostosta paljon suuremman.
• Objektitunnukset : Tämä asetus antaa Illustratorille marssimistoiminnon siitä, kuinka tunnisteet nimetään merkinnässä. Voit kertoa sen nimeämään tunnukset sen perusteella, miten kerrokset nimetään tiedostossa.
• Desimaali : Vähemmän desimaaleja tarkoittaa pienempiä tiedostokokoja. Tämän asetuksen asettaminen 1on monissa tapauksissa ihanteellinen ja OK, eikä sillä ole huomattavaa eroa suunnittelussa, mutta se 2on yleensä turvallista. Kummassakin tapauksessa kannattaa tarkistaa, miten SVG renderoidaan.
• Pienennä : Kyllä, kiitos! Tämä murtaa koodin alas vähentääksesi tilaa ja lisätä web-suorituskykyä samalla tavalla kuin CSS: n minimointi.
• Reagoiva : Aivan kuten ensimmäinen menetelmä, tämän vaihtoehdon valitseminen on ihanteellinen, koska muuten kiinteät heightja widthmääritteet sijoitettaisiin SVG: hen.