25: Mengoptimalkan SVG Secara Manual di Illustrator - Trik CSS

Anonim

Video yang satu ini telah dihapus. Saya akan segera syuting ulang suatu hari nanti. Jika Anda membaca ini dan saya belum melakukannya, silakan hubungi saya dan ganggu saya tentang hal itu.

Terkadang SVG yang ingin Anda gunakan terlihat sangat bagus di Illustrator, tetapi tidak sesuai dengan keinginan Anda untuk menggunakannya di web.

Salah satu hal yang kami lihat dalam video ini adalah bentuk sederhana yang terlihat seperti satu bentuk tetapi sebenarnya adalah empat bentuk yang duduk di atas satu sama lain. Untuk menyederhanakannya, kita cukup memilih semua bentuk dan menggunakan alat Pathfinder di Illustrator untuk menggabungkannya menjadi satu bentuk. Kita bisa melihat itu tercermin langsung dalam kode. Kadang-kadang agak menyenangkan untuk membuka file SVG baik di Illustrator dan editor kode sehingga saat Anda menyimpannya, Anda dapat melihat apa yang dilakukannya pada kode.

Pathfinder sangat bagus untuk pengoptimalan bentuk secara manual - ada baiknya mengetahui apa yang dilakukan tombol-tombol itu - dan apa yang mereka lakukan dengan tombol opsi yang ditekan juga.

Ukuran file SVG, sebagian besar, ditentukan oleh berapa banyak titik yang terjadi dalam bentuk. Ada faktor lain, tetapi itulah masalahnya. Hal lain yang kami lihat dalam video ini adalah menggunakan fitur Illustrator Simplify Path untuk mengurangi jumlah titik pada beberapa bentuk tekstur untuk menurunkan ukuran file.

Hal lain yang perlu diketahui: jalur gabungan bisa berguna. Dua bentuk yang benar-benar terpisah satu sama lain masih bisa menjadi satu jalur. Seperti, secara harfiah satu. Sintaksnya memungkinkan untuk "mengambil pena, memindahkannya ke tempat lain, menggambar sesuatu yang baru". Jadi ketika Anda membuat jalur gabungan di Illustrator (misalnya beberapa bentuk independen, Object> Compound Path> Make) begitulah hasilnya. Dapat menghasilkan keluaran SVG yang disederhanakan / dioptimalkan.