Pilihan Eksport Adobe Illustrator - Trik CSS

Ini bukan sekadar coretan dan lebih banyak peringatan untuk sesuatu yang sering saya cari. Semasa membuat fail SVG dalam Adobe Illustrator, ada beberapa kaedah yang berbeza untuk mengeksport fail tersebut. Kedua-dua kaedah tersebut merangkumi beberapa pilihan, beberapa di antaranya saya benar-benar lupa maksudnya dan apa yang harus dipilih.

Kaedah 1: Simpan Sebagai…

Anda mungkin tidak akan menggunakan kaedah ini untuk menyimpan SVG untuk digunakan di web. Ini sebahagian besarnya untuk menyimpan dokumen induk. Sebenarnya, anda mungkin mahu menyimpan dalam format Illustrator secara langsung. Anda akan menggunakan beberapa pilihan eksport lain untuk mengeksport ke web.

Cara yang paling biasa untuk menyimpan fail sebagai SVG dalam Adobe Illustrator adalah dengan memilih File > Save As… pilihan dari menu utama.

Illustrator akan membuka tetingkap dialog yang menanyakan kepada anda apa nama fail dan tempat menyimpannya. Lebih penting lagi, ia juga meminta jenis fail apa yang akan disimpan, dalam hal ini adalah SVG. Bukan SVG Mampat (svgz). Plain ol 'SVG.

Klik butang Simpan dan sekumpulan pilihan lain akan muncul. Di sinilah ingatan saya cenderung untuk mengecewakan saya dan saya harus menjelajahi web untuk mendapatkan jawapan. Berikut adalah tangkapan skrin cara yang sangat optimum untuk menyimpan fail SVG dalam Adobe Illustrator.

• Profil SVG : Ini menetapkan jenis dokumen XML pada tag pembuka . SVG 1.1 adalah versi terbaru, merangkumi sokongan yang paling luas dan kemungkinan merupakan pilihan yang paling sesuai. Yang lain sama ada versi lama atau subset SVG 1.1 dan saya masih belum menghadapi masalah ketika memilihnya.
• Font> Jenis : Memilih "Convert to Outline" akan memastikan bahawa setiap teks yang diketik dalam fail yang dieksport adalah jalur vektor dan bukan glyph. Glyphs berpeluang tidak diberikan tetapi jalan vektor selalu menjadi jempol besar.
• Pilihan> Lokasi Gambar : Sekiranya gambar raster (baca: JPG.webp, PNG, GIF) digunakan dalam fail, maka kami ingin memilih pilihan "Pautan". Jika tidak, gambar raster akan disisipkan dalam fail dan itu akan memberikan keuntungan prestasi daripada SVG dengan meningkatkan saiz fail untuk memasukkan aset tambahan tersebut. Lebih baik merujuknya sebagai pautan dan pastikan untuk memasukkan fail sumber tersebut dalam direktori yang sama dengan fail SVG.
• Pilihan> Lokasi Gambar> Memelihara Keupayaan Penyuntingan Ilustrator : Ini mempunyai kesan besar pada output fail SVG. Oleh kerana anda mungkin menyimpan salinan "master" di sini, yang tidak ditujukan untuk kami di web, anda mesti membiarkan ini diperiksa. Ini akan mengekalkan perkara hak milik Illustrator (seperti panduan) untuk kali anda membuka fail. Tidak diperiksa bermaksud perkara seperti itu akan dilucutkan dan hilang.
• Pilihan Lanjutan> Properti CSS : Saya memilih "Atribut Presentasi" untuk yang satu ini kerana ia meletakkan sifat (contohnya isian, pukulan dan sebagainya) pada tahap kekhususan yang paling rendah. Contohnya . Ini menggayakan elemen, tetapi sangat mudah ditolak dalam CSS.
• Pilihan Lanjutan> Tempat Perpuluhan : Sekiranya anda melayari kod untuk , maka anda tahu bahawa nilai yang menentukan bentuk-bentuk itu sangat tepat. Namun, berkali-kali, fail tersebut terlalu tepat dan menambah ukuran keseluruhan fail SVG. Oleh kerana anda mungkin menyimpan fail induk di sini, anda boleh menyimpannya agak tinggi, kerana saiz fail tidak begitu membimbangkan.
• Pilihan Lanjutan> Pengekodan : Saya bukan penyokong pengekodan UTF, tetapi meninggalkannya di "Unicode UTF-8" memastikan keserasian ke belakang. Juga, ukuran fail UTF-8 cenderung lebih kecil daripada UTF-16, jadi itu adalah kemenangan sendiri.
• Pilihan Lanjutan> Responsif : Membiarkan ini tidak dicentang akan menetapkan tetap heightdan widthatribut pada SVG. Saya periksa pilihan ini kerana ia membolehkan saya menetapkan atribut tersebut sama ada dalam kod atau CSS.

Kaedah 2: Eksport Sebagai

Cara lain untuk mendapatkan SVG dari Adobe Illustrator adalah dengan memilih File > Export > Export As… pilihan dari menu utama. Namun, ada cara kedua untuk sampai ke sana dengan menggunakan panel Actions di ruang kerja Illustrator.

Pilihan ini sangat sesuai jika anda tahu bahawa anda akan menggunakan fail ini secara langsung di web dan tidak merancang untuk mempermain reka bentuknya nanti. Ini memberikan sedikit pengaturan dan beberapa pilihan yang membolehkan fail mengoptimumkan fail lebih jauh untuk prestasi yang lebih baik. Sebenarnya, adalah amalan terbaik untuk melakukan ini pada salinan fail daripada pada fail induk itu sendiri sehingga ada satu versi yang dapat dibuka dan diedit kemudian di Illustrator dan satu lagi yang lebih sesuai untuk disiarkan di laman web produksi.

• Gaya : Kami membahasnya lebih awal dalam tetapan Kaedah 1, tetapi saya memilih "Atribut Persembahan" di sini kerana ini adalah cara untuk mengatur sifat pada atribut tahap tertinggi. Ini menambah pesanan untuk markup, fleksibiliti dalam kemampuan kita untuk menggayakan atribut berikutnya dengan CSS, dan sering menyebabkan ukuran fail lebih kecil.
• Font : Ini adalah satu lagi yang kita bahas di atas, tetapi memilih "Tukar ke Garis Besar" menukar sifar untuk jalur vektor untuk watak yang memastikan rendering teks dengan betul.
• Imej : Ini adalah satu lagi yang kami bahas di atas, tetapi memilih "Pautan" akan mengelakkan gambar raster terbenam daripada dikemas dalam SVG, yang menjadikan fail jauh lebih besar.
• Objek Objek : Tetapan ini memberi arahan kepada Illustrator untuk bagaimana menamakan ID dalam markup. Anda boleh memaklumkannya pada nama ID berdasarkan bagaimana lapisan dinamakan dalam fail.
• Perpuluhan : Lebih sedikit perpuluhan dalam kod bermaksud ukuran fail yang lebih kecil. Menetapkan ini 1adalah ideal dan baik dalam banyak keadaan dan tidak akan mempunyai perbezaan yang ketara dalam reka bentuk, tetapi 2biasanya selamat. Walau apa pun, perlu disemak bagaimana SVG diberikan.
• Minify : Ya, tolong! Ini mengurangkan kod untuk mengurangkan ruang kosong dan meningkatkan prestasi web seperti meminimumkan CSS.
• Responsif : Sama seperti kaedah pertama, memilih pilihan ini sangat sesuai kerana tetap heightdan widthatribut sebaliknya akan diletakkan di SVG.