SVG'yi PNG'ye Dönüştürürken Gerçekte Ne Olur?

SVG'yi PNG'ye çevirmek tek ve apaçık bir işlem gibi görünür. Değildir, çünkü bir SVG piksel içermez - bir şeyi çizmek için gereken talimatları içerir. PNG istediğiniz anda, dosyanın belki de hiç yanıtlamadığı üç soruyu sormuş olursunuz: ne kadar büyük, hangi yazı tipiyle ve nelerin çalışmasına izin vererek.

Her dönüştürücü bu üç soruyu yanıtlar. Çoğu size nasıl yanıtladığını söylemez. Güncel Chrome, Firefox ve Safari üzerinde ölçülmüş haliyle gerçekte olan şey şudur.

Birinci soru: bir SVG ne kadar büyüktür?#

Bir tarayıcıya SVG'nin boyutunu sorun, size kendinden emin biçimde yanlış bir sayı versin.

Bunu Chromium 149, Firefox 151 ve WebKit 26.5 üzerinde üç dosyayla sınadık:

Üç motor da aynı fikirde ve sorun ikinci ile üçüncü satırlarda. 300 x 150, doğal boyutu olmayan öğeler için bir CSS varsayılanıdır - eksik bir <img> etiketinin aldığı varsayılanın aynısı. Bir viewBox varsa tarayıcı o 300 piksellik genişliği korur ve yüksekliği en-boy oranından hesaplar.

Yani tasarımcısının 200 x 50 olarak çizdiği bir simge, 300 x 75 boyutunda bir PNG olarak çıkar ve hiçbir yerde çiziminizin gerçek boyutunun yerine bir varsayılanın konduğu söylenmez.

Gerçekten işe yarayan kural#

DOM'u değil, dosyayı okuyun:

1. width ve height mutlak birimlerle veriliyorsa - birimsiz, px, pt, mm, in - gerçek boyut budur. 96 dpi ile dönüştürün, yani 1in 96 pikseldir.
2. Değilse ve bir viewBox varsa, onun genişlik ve yüksekliğini alın. Bu, çizeni kişinin kendi koordinat sistemidir. En çok önem taşıyan durum da budur, çünkü viewBox ile birlikte width="100%" height="100%", Illustrator ve Figma'nın varsayılan çıktısıdır.
3. Değilse dosyada gerçekten hiç boyut yoktur. Bir şey seçilmek zorundadır ve dürüst olanı, sessizce 300 x 150 uydurmak yerine bunu söylemektir.

SVG'den PNG'ye dönüştürücümüz, bıraktığınız her dosya için bu üç durumdan hangisinin geçerli olduğunu söyler ve üçüncüsünde tarayıcının kare olmayan varsayılanı yerine 512 x 512'ye düşer.

İkinci soru: yazı tiplerime ne oldu?#

Bir SVG'deki metin, metnin resmi değildir. Bir karakter dizisidir; yanında da başka bir yerde bulunması beklenen bir yazı tipinin adı vardır. font-family="Brandon Grotesque" diyen bir SVG, Brandon Grotesque'in hiçbir parçasını içermez.

SVG içindeki bir @font-face kuralının bunu çözmesini bekleyebilirsiniz. Çözmez. Uzak bir web yazı tipi taşıyan bir SVG'yi üç tarayıcıda da ağı izleyerek sınadık: her motorda yazı tipi için sıfır istek. Metin yine de çizildi - farklı genişlikte bir yedek yazı tipiyle.

"Dönüştürdükten sonra metnim neden yanlış görünüyor" sorusunun tüm mekanizması budur. Yalnızca iki tür metin olduğu gibi kalır:

• Dönüştürmeyi yapan makinede kurulu olan yazı tipleri. Yani PNG'niz sizin dizüstünüzde bir, iş arkadaşınızınkinde başka türlü çıkabilir.
• Zaten eğriye çevrilmiş metin. Illustrator'da bu Yazı > Eğrilere Dönüştür, Figma'da Flatten'dır. Her harf bir yola dönüştüğünde, eksik olabilecek bir yazı tipi kalmaz.

Metin önemliyse dışa aktarmadan önce onu eğriye çevirin. Tek güvenilir yanıt budur ve bunun herhangi bir dönüştürücünün eksiği değil, biçimin kendi özelliği olduğunu bilmekte yarar var.

Üçüncü soru: neyin çalışmasına izin var?#

SVG, PNG'nin bir görsel biçimi olduğu anlamda bir görsel biçimi değildir. Bir XML belgesidir ve XML belgeleri betik içerebilir. Bir SVG; <script> etiketleri, onload işleyicileri, uzak görsellere göndermeler ve dış stil sayfalarını çeken @import kuralları taşıyabilir.

Bazı içerik yönetim sistemlerinin SVG yüklemesini baştan reddetmesinin nedeni budur.

Ölçtüğümüz iyi haber şu: bir SVG'yi sayfaya enjekte etmek yerine <img> etiketiyle çizmek gerçek bir kum havuzudur. Gömülü bir <script>, uzak bir <image href>, bir xlink:href, bir @import ve uzak bir @font-face taşıyan bir dosyada üç tarayıcı da hiçbir betik çalıştırmadı ve hiçbir ağ isteği yapmadı - hem sayfanın içinden hem dışından doğrulandı.

Yani SVG'nizi bu şekilde çizen bir dönüştürücüye hiçbir şey çalıştırtılamaz. Bizimki yine de ne bulduğunu bildirir, çünkü logonuzun içinde bir izleme pikseli olduğunu öğrenmek, onu sessizce atmaktan daha yararlıdır.

Hâlâ boyanan tek şey bir data: URI'sidir - doğrudan SVG'nin içine metin olarak gömülmüş bir görsel. Bu bilinçlidir: kendi kendine yeter, indirilecek bir şey yoktur.

Bunun asıl canınızı yaktığı yer#

Dönüştürmede değil. SVG kaynak kodunu alıp kendi sayfanıza satır içi yapıştırdığınızda canınızı yakar; orada bu korumaların hiçbiri geçerli değildir. Bunu yapıyorsanız - bir simge takımıyla ya da bir iyileştiricinin çıktısıyla - dosyanın önce temizlenmesi gerekir. SVG iyileştiricimizin siz istesiniz istemeyin her çalıştırmada temizlik yapmasının nedeni budur: size kaynak kodu verir ve kaynak kodu bir DOM'a girer.

Bunların hiçbirinin değiştirmediği şeyler#

İki şey dönüşümden birebir sağ çıkar; olmayan sorunları aramamanız için bunu bilmekte yarar var.

Saydamlık. PNG tam bir alfa kanalı taşır; SVG'nizin boyamadığı her yer gerçekten saydam kalır ve yarı saydam dolgular kısmi matlıklarını korur. Üç motorda da piksel piksel doğrulandı.

İstediğiniz her boyutta keskinlik. Vektörden başlamanın asıl avantajı budur. 2x bir dışa aktarım, ikiye katlanmış bir görsel değildir - çizim, geometriden daha büyük boyutta yeniden üretilir, dolayısıyla eğriler matematiksel olarak keskin kalır. 2x dışa aktarmanın PNG'yi sonradan büyütmeyi yenmesinin ve vektörden çizilmiş 16 piksellik bir simgenin 512 pikselden küçültülmüş olanı yenmesinin nedeni budur.

Bu sonuncusu ölçülebilir. Kenarları piksel ızgarasına oturan bir işarette, doğrudan 16 x 16'da çizmek 141 dolu piksel ve hiç yarı saydam piksel vermedi; aynı çizim 512 piksellik bir render'dan küçültüldüğünde 98 dolu ve 64 bulanık piksel verdi. Mürekkebin yüzde kırkı bulanıklığa dönüştü - favicon oluşturucumuzun büyük olanı küçültmek yerine her boyutu ayrı ayrı çizmesinin nedeni de budur.

Kısa özet#

• Boyut: width/height değerlerini okuyun, yoksa viewBox'a düşün ve tarayıcının bildirdiğine asla güvenmeyin.
• Yazı tipleri: yolculuk etmezler. Metin önemliyse dışa aktarmadan önce eğriye çevirin.
• Betikler: dönüşüm sırasında çalışamazlar, ama SVG kaynağını bir sayfaya yapıştırdığınız anda çalışabilirler.
• Saydamlık ve keskinlik: ikisi de korunur. Sonradan boyutlandırmak yerine ihtiyacınız olan boyutta dışa aktarın.