25: Illustrator'da SVG'yi Manuel Olarak En İyileştirme - CSS Hileleri

Anonim

Video bunda kaldırıldı. Yakında bir gün yeniden çekeceğim. Bunu okuyorsanız ve henüz yapmadıysam, benimle iletişime geçmekten çekinmeyin ve bu konuda beni rahatsız edin.

Bazen kullanmak istediğiniz SVG, Illustrator'da mükemmel görünür, ancak web'de tam olarak kullanmak istediğiniz gibi değildir.

Bu videoda baktığımız şeylerden biri, tek bir şekil gibi görünen, ancak aslında üst üste oturan dört şekil olan basit bir şekil. Bunu basitleştirmek için, tüm şekilleri seçip Illustrator'daki Yol Bulucu araçlarını kullanarak onları tek bir şekilde birleştiriyoruz. Bunun koda hemen yansıdığını görebiliriz. Bazen SVG dosyasının hem Illustrator'da hem de bir kod düzenleyicide açılması eğlencelidir, böylece kaydederken koda ne yaptığını görebilirsiniz.

Yol Bulucu, şekillerin manuel olarak optimize edilmesi için harikadır - bu düğmelerin ne işe yaradığını ve ayrıca seçenek tuşuna basılarak ne yaptıklarını öğrenmeye değer.

Bir SVG dosyasının boyutu, büyük ölçüde, şekillerde kaç nokta olduğuna göre belirlenir. Başka faktörler de var ama önemli olan bu. Bu videoda baktığımız bir diğer şey de, dosya boyutunu çok aşağı çekmek için bazı dokuya benzer şekillerdeki nokta sayısını azaltmak için Illustrator'ın Yolu Basitleştir özelliğini kullanmaktır.

Bilmeniz gereken başka bir şey: bileşik yollar yararlı olabilir. Birbirinden tamamen ayrı olan iki şekil yine tek bir yol olabilir. Kelimenin tam anlamıyla biri gibi. Sözdizimi esasen “kalemi al, başka bir yere hareket ettir, yeni bir şey çiz” e izin verir. Dolayısıyla, Illustrator'da bileşik bir yol oluşturduğunuzda (örneğin, birden çok bağımsız şekil, Nesne> Bileşik Yol> Oluştur) bu şekilde çıktı alınır. Basitleştirilmiş / optimize edilmiş SVG çıktısına yol açabilir.