Bu daha az pasaj ve daha çok sık aradığım bir şey için bir hatırlatıcı. Adobe Illustrator'da SVG dosyaları oluştururken, dosyaları dışa aktarmak için birkaç farklı yöntem vardır. Her iki yöntem de, bazılarının ne anlama geldiğini ve ne seçeceğimi tamamen unuttuğum bir avuç seçenek içeriyor.
Yöntem 1: Farklı Kaydet…
SVG'yi web'de kullanmak üzere kaydetmek için muhtemelen bu yöntemi kullanmazsınız. Bu, büyük ölçüde bir ana belgeyi kaydetmek içindir. Aslında, doğrudan Illustrator formatında kaydetmek isteyebilirsiniz. Web için dışa aktarmak için diğer dışa aktarma seçeneklerinden bazılarını kullanırsınız.
Adobe Illustrator'da bir dosyayı SVG olarak kaydetmenin en yaygın yolu, File > Save As… seçeneği ana menüden seçmektir .
Illustrator, dosyanın adını ve nereye kaydedileceğini soran bir iletişim penceresi açar. Daha da önemlisi, hangi tür dosyanın hangisi olarak kaydedileceğini sorar, bu durumda SVG'dir. SVG Sıkıştırılmış değil (svgz). Düz ol 'SVG.
Kaydet düğmesini tıkladığınızda başka bir seçenek kümesi görünecektir. Hafızamın beni hayal kırıklığına uğrattığı yer burası ve cevaplar için internette dolaşmam gerekiyor. Adobe Illustrator'da bir SVG dosyasını kaydetmenin mükemmel bir şekilde en iyi yolunun bir ekran görüntüsü.
- SVG Profilleri : Bu, açılış
etiketindeki XML belge türünü ayarlar . SVG 1.1 en son sürümdür, en geniş kapsamlı desteği kapsar ve muhtemelen en uygun seçenektir. Geri kalan her şey ya eski bir sürüm ya da SVG 1.1'in bir alt kümesidir ve henüz onu seçerken bir sorunla karşılaşmadım. - Yazı Tipleri> Tür : "Anahata Dönüştür" seçeneğinin seçilmesi, dosyadaki herhangi bir yazılan metnin glifler yerine vektör yolları olmasını sağlar. Gliflerin işlenmeme şansı vardır, ancak vektör yolları her zaman büyük bir beğenidir.
- Seçenekler> Görüntü Konumu : Dosyada raster görüntüler (okuyun: JPG.webp, PNG, GIF) kullanılıyorsa, "Bağlantı" seçeneğini seçmek isteriz. Aksi takdirde, raster görüntü dosyaya gömülür ve bu, dosya boyutunu bu ekstra varlıkları içerecek şekilde artırarak SVG'den performans avantajlarını alır. Bunlara bağlantı olarak başvurmak ve bu kaynak dosyalarını SVG dosyasıyla aynı dizine dahil ettiğinizden emin olmak daha iyidir.
- Seçenekler> Görüntü Konumu> Illustrator Düzenleme Yeteneklerini Koru : Bunun, SVG dosyasının çıktısı üzerinde büyük bir etkisi vardır. Web'de bizim için tasarlanmayan, muhtemelen buraya bir "ana" kopya kaydettiğiniz için, bunu işaretli bırakırsınız. Bu, dosyayı bir sonraki açışınızda Illustrator'a ait olan şeyleri (kılavuzlar gibi) koruyacaktır. Kontrol edilmemiş, bunun gibi şeylerin sıyrılıp kaybolacağı anlamına gelir.
- Gelişmiş Seçenekler> CSS Özellikleri : Bunun için “Sunum Nitelikleri” ni seçiyorum çünkü özellikleri (örn. Dolgular, konturlar vb.) En düşük özgüllük seviyesine yerleştiriyor. Örneğin
. Bu, öğeyi biçimlendirir, ancak CSS'de geçersiz kılmak çok kolaydır. - Gelişmiş Seçenekler> Ondalık Basamaklar : a için koda göz attıysanız,
bu şekilleri belirten değerlerin çok hassas olabileceğini bilirsiniz. Ancak çoğu zaman bunlar çok kesindir ve SVG dosyasının genel boyutuna eklenir. Büyük olasılıkla bir ana dosyayı buraya kaydettiğiniz için, bunu oldukça yüksek tutabilirsiniz, çünkü dosya boyutu çok fazla sorun teşkil etmez. - Gelişmiş Seçenekler> Kodlama : UTF kodlamasında bir meraklı değilim, ancak bunu "Unicode UTF-8" olarak bırakmak geriye dönük uyumluluğu garanti ediyor. Ayrıca, UTF-8 dosya boyutları UTF-16'dan daha küçük olma eğilimindedir, bu nedenle kendi başına bir kazançtır.
- Gelişmiş Seçenekler> Duyarlı : Bunu işaretlemeden bırakırsanız, SVG'de sabit
heightvewidthöznitelikler ayarlanır . Bu seçeneği işaretliyorum çünkü bu öznitelikleri kodda veya CSS'de ayarlamama izin veriyor.
Yöntem 2: Farklı Dışa Aktar
Adobe Illustrator'dan SVG almanın bir başka yolu File > Export > Export As… da ana menüden seçeneği belirlemektir. Ancak, Illustrator çalışma alanındaki Eylemler panelini kullanarak oraya gitmenin ikinci bir yolu vardır.
Bu dosyayı doğrudan web üzerinde kullanacağınızı biliyorsanız ve tasarımı daha sonra düzenlemeyi planlamıyorsanız, bu seçenek idealdir. Dosyanın daha iyi performans için daha fazla optimize edilmesini sağlayan çok daha az ayar ve birkaç seçenek sağlar. Aslında, bunu ana dosyanın kendisi yerine dosyanın bir kopyasında yapmak en iyi uygulamadır, bu nedenle Illustrator'da daha sonra açılabilen ve düzenlenebilen bir sürüm ve bir üretim web sitesinde sunulmaya daha uygun bir sürüm vardır.
- Stil : Bunu daha önce Yöntem 1 ayarlarında ele almıştık , ancak burada "Sunum Nitelikleri" ni seçiyorum çünkü bu, özellikleri en üst düzey niteliklerde düzenlemenin bir yolu. Bu, işaretlemeye düzen, sonraki öznitelikleri CSS ile biçimlendirme yeteneğimize esneklik katar ve genellikle daha küçük dosya boyutlarına yol açar.
- Yazı Tipi : Bu, yukarıda ele aldığımız bir diğeridir, ancak "Anahatlara Dönüştür" ü seçmek, metnin doğru şekilde oluşturulmasını sağlayan karakterler için vektör yolları için glifleri değiştirir.
- Resimler : Bu, yukarıda ele aldığımız bir diğeridir, ancak "Bağlantı" yı seçmek, yerleştirilmiş tarama resimlerinin SVG'de paketlenmesini önleyecek ve bu da dosyayı daha da büyütecektir.
- Nesne Kimlikleri : Bu ayar, Illustrator'a işaretlemede kimliklerin nasıl adlandırılacağına ilişkin yürüyüş emirleri verir. Katmanların dosyada nasıl adlandırıldığına bağlı olarak kimlikleri adlandırmasını söyleyebilirsiniz.
- Ondalık : Kodda daha az ondalık sayı, daha küçük dosya boyutları anlamına gelir. Bunu olarak ayarlamak
1çoğu durumda ideal ve uygundur ve tasarımda gözle görülür bir fark yaratmaz, ancak2genellikle güvenlidir. Her iki durumda da, SVG'nin nasıl işlendiğini kontrol etmeye değer. - Küçült : Evet, lütfen! Bu, boşlukları azaltmak ve CSS'yi küçültmek gibi web performansını artırmak için kodu aşağıya çeker.
- Duyarlı : Tam olarak ilk yöntemde olduğu gibi, bu seçeneğin belirlenmesi idealdir çünkü aksi takdirde sabit
heightvewidthöznitelikler SVG'ye yerleştirilir.