Ini bukan cuplikan dan lebih merupakan pengingat untuk sesuatu yang sering saya cari. Saat membuat file SVG di Adobe Illustrator, ada beberapa metode berbeda untuk mengekspor file. Kedua metode menyertakan beberapa opsi, beberapa di antaranya saya benar-benar lupa apa artinya dan apa yang harus dipilih.
Metode 1: Simpan Sebagai…
Anda mungkin tidak akan menggunakan metode ini untuk menyimpan SVG untuk digunakan di web. Ini sebagian besar untuk menyimpan dokumen master. Sebenarnya, Anda mungkin ingin menyimpan dalam format Illustrator secara langsung. Anda akan menggunakan beberapa opsi ekspor lainnya untuk mengekspor untuk web.
Cara paling umum untuk menyimpan file sebagai SVG di Adobe Illustrator adalah dengan memilih File > Save As… opsi dari menu utama.
Illustrator akan membuka jendela dialog yang menanyakan nama file dan di mana menyimpannya. Lebih penting lagi, ia juga menanyakan jenis file apa yang akan disimpan, dalam hal ini adalah SVG. Tidak Terkompresi SVG (svgz). SVG biasa.
Klik tombol Simpan dan serangkaian opsi lain akan muncul. Di sinilah ingatan saya cenderung mengecewakan saya dan saya harus menjelajahi web untuk mendapatkan jawaban. Berikut adalah tangkapan layar dari cara yang sangat optimal untuk menyimpan file SVG di Adobe Illustrator.
- Profil SVG : Ini menyetel jenis dokumen XML pada
tag pembuka . SVG 1.1 adalah versi terbaru, mencakup dukungan yang paling luas dan kemungkinan merupakan opsi yang paling sesuai. Yang lainnya adalah versi lama atau bagian dari SVG 1.1 dan saya belum mengalami masalah saat memilihnya. - Fonts> Type : Memilih "Convert to Outline" akan memastikan bahwa teks apa pun yang diketik dalam file yang diekspor adalah jalur vektor daripada mesin terbang. Mesin terbang memiliki peluang untuk tidak dirender tetapi jalur vektor selalu diacungi jempol.
- Pilihan> Lokasi Gambar : Jika gambar raster (baca: JPG.webp, PNG, GIF) digunakan dalam file, maka kita ingin memilih opsi “Link”. Jika tidak, gambar raster akan disematkan dalam file dan itu menyedot manfaat kinerja langsung dari SVG dengan meningkatkan ukuran file untuk menyertakan aset ekstra tersebut. Lebih baik mereferensikannya sebagai tautan dan pastikan untuk menyertakan file sumber tersebut dalam direktori yang sama dengan file SVG.
- Pilihan> Lokasi Gambar> Pertahankan Kemampuan Pengeditan Illustrator : Yang ini berdampak besar pada keluaran file SVG. Karena Anda mungkin menyimpan salinan "master" di sini, yang tidak ditujukan untuk kami di web, biarkan ini dicentang. Ini akan mempertahankan hal-hal berpemilik Illustrator (seperti panduan) untuk waktu berikutnya Anda membuka file. Tidak dicentang berarti hal-hal seperti itu akan dilucuti dan hilang.
- Opsi Lanjutan> Properti CSS : Saya memilih “Atribut Presentasional” untuk yang satu ini karena menempatkan properti (misalnya isian, goresan, dan semacamnya) pada tingkat spesifisitas terendah. Misalnya
. Ini memberi gaya pada elemen, tetapi sangat mudah untuk diganti di CSS. - Opsi Lanjutan> Tempat Desimal : Jika Anda telah menjelajahi kode untuk a
, Anda tahu bahwa nilai yang menentukan bentuk tersebut bisa jadi sangat tepat. Namun, sering kali, hal itu terlalu tepat dan menambah ukuran file SVG secara keseluruhan. Karena Anda kemungkinan besar menyimpan file master di sini, Anda dapat menyimpannya cukup tinggi, karena ukuran file tidak terlalu menjadi perhatian. - Opsi Lanjutan> Pengkodean : Saya bukan ahli dalam pengkodean UTF, tetapi membiarkan ini di "Unicode UTF-8" memastikan kompatibilitas ke belakang. Selain itu, ukuran file UTF-8 cenderung lebih kecil dari UTF-16, jadi itu merupakan keunggulan tersendiri.
- Opsi Lanjutan> Responsif : Membiarkan ini tidak dicentang akan menetapkan tetap
heightdanwidthatribut pada SVG. Saya memeriksa opsi ini karena memungkinkan saya mengatur atribut tersebut baik dalam kode atau di CSS.
Metode 2: Ekspor Sebagai
Cara lain untuk mendapatkan SVG dari Adobe Illustrator adalah dengan memilih File > Export > Export As… opsi dari menu utama. Namun, ada cara kedua untuk sampai ke sana dengan menggunakan panel Actions di ruang kerja Illustrator.
Opsi ini ideal jika Anda tahu Anda akan menggunakan file ini langsung di web dan tidak berencana untuk mengutak-atik desain nanti. Ini memberikan pengaturan yang jauh lebih sedikit dan beberapa opsi yang memungkinkan file untuk mengoptimalkan file lebih jauh untuk kinerja yang lebih baik. Faktanya, praktik terbaik adalah melakukan ini pada salinan file daripada pada file master itu sendiri sehingga ada satu versi yang dapat dibuka dan diedit nanti di Illustrator dan versi lain yang lebih cocok untuk disajikan di situs web produksi.
- Styling : Kita membahas ini sebelumnya di pengaturan Metode 1, tetapi saya memilih "Presentation Attributes" di sini karena ini adalah cara untuk mengatur properti pada atribut tingkat tertinggi. Ini menambah urutan pada markup, fleksibilitas dalam kemampuan kami untuk memberi gaya pada atribut berikutnya dengan CSS, dan sering kali mengarah ke ukuran file yang lebih kecil.
- Font : Ini adalah salah satu yang kita bahas di atas, tetapi memilih "Convert to Outlines" menukar mesin terbang untuk jalur vektor untuk karakter yang memastikan teks dirender dengan benar.
- Gambar : Ini adalah satu lagi yang kami bahas di atas, tetapi memilih "Tautan" akan mencegah gambar raster yang disematkan untuk dikemas dalam SVG, yang membuat file jauh lebih besar.
- ID Objek : Pengaturan ini memberi Illustrator perintah berbaris tentang cara memberi nama ID di markup. Anda dapat memberitahukannya untuk memberi nama ID berdasarkan bagaimana lapisan diberi nama dalam file.
- Desimal : Lebih sedikit desimal dalam kode berarti ukuran file lebih kecil. Menyetel ini menjadi
1ideal dan OK dalam banyak kasus dan tidak akan memiliki perbedaan yang mencolok dalam desain, tetapi2biasanya aman. Bagaimanapun, ada baiknya memeriksa bagaimana SVG dirender. - Perkecil : Ya, tolong! Ini memecah kode untuk mengurangi spasi dan meningkatkan kinerja web seperti mengecilkan CSS.
- Responsif : Persis seperti metode pertama, memilih opsi ini ideal karena atribut tetap
heightdanwidthjika tidak akan ditempatkan pada SVG.