SVG'den PNG'ye — gerçekten piksele ihtiyacınız olduğunda (ve olmadığında)

Kusursuz bir logoya sahip olup onu koyacak yer bulamamanın kendine has bir sinir bozukluğu vardır. SVG her boyutta keskindir, neredeyse hiç yer kaplamaz ve tarayıcıda kusursuz görünür — sonra onu bir e-postaya bırakmaya, bir sosyal önizleme görseli olarak ayarlamaya ya da azıcık fazla eski bir yazılıma yapıştırmaya kalkarsınız ve düpedüz görünmez. Boş. Dosya sağlam. Koyduğunuz yer sadece vektör dilini konuşmuyor.

SVG'den PNG'ye işinin bir görev olarak var olmasının bütün nedeni bu. PNG daha iyi olduğu için değil — genellikle değildir — dünyanın büyük bölümü yalnızca piksel okuyabildiği için.

Vektör ve raster, kısaca

Bir SVG bir resim değildir. Bir dizi talimattır — buraya bir daire çiz, şuraya şu yolu, onu bu renge boya. Tarayıcı talimatları izler ve onları istediğiniz her boyutta taze işler, yani 16 pikselde de 16.000'de de jilet gibi keskindir ve dosya minik kalır çünkü o sadece matematiktir.

Bir PNG tam tersidir. Bir kez, tek bir çözünürlükte kararlaştırılmış, sabit bir renkli piksel ızgarasıdır. Kendi doğal boyutunun ötesine büyütün, yumuşar ve bloklaşır, çünkü çizilecek başka piksel yoktur — sadece içine pişirilmiş olanlar. İyi yanı, her şeyin bir piksel ızgarasını okuyabilmesidir. Görsellerin evrensel para birimidir.

Yani SVG'yi PNG'ye çevirmek, sonsuz ölçeklenebilirliği evrensel uyumlulukla takas etmektir. Bunun iyi bir takas olup olmadığı, tamamen görselin nereye gideceğine bağlıdır.

Gerçekten ne zaman PNG'ye ihtiyacınız var

Tereddütsüz piksele döktüğüm üç durum, çünkü vektör düpedüz işe yaramaz:

E-posta. E-posta istemcileri SVG işlemez — Gmail, Outlook, Apple Mail, esasen hepsi güvenlik nedeniyle onu reddeder. Bir e-posta imzasındaki ya da bültendeki bir logo raster biçim olmak zorundadır. PNG, çünkü saydamlığı istersiniz.

Sosyal ve OG önizleme görselleri. Bir bağlantıyı paylaştığınızda beliren o küçük kart — Open Graph görseli — sabit boyutlu bir raster olmak zorundadır, tipik olarak 1200x630. Platformlar orada bir SVG işlemez. Kaynak sanatınız vektörse, tam o boyutta bir PNG dışa aktarırsınız.

Eski ya da çevrimdışı yazılım. Bir sürü masaüstü uygulaması, sunum aracı, belge düzenleyici ve baskı iş akışı ya SVG içe aktaramaz ya da onu berbat eder. Onlara cömert bir çözünürlükte bir PNG vermek her seferinde, sürprizsiz işe yarar.

Üçünde de belirleyici etken aynı: hedef fiziksel olarak vektör okuyamaz, o yüzden ölçeklenebilirlik anlamsızdır. İşlenen bir biçim, işlenmeyen bir biçimi her zaman döver.

Doğru yapılacak tek şey: çözünürlük

İşte en çok gördüğüm ve başlarda kendim de yaptığım hata. Bir PNG dışa aktardığınız boyutta sabit olduğu için, onu yeterince büyük dışa aktarmanız gerekir — ve ideal olarak tam göstereceğiniz boyutta.

Bir logoyu 100x100 PNG dışa aktarıp sonra onu yüksek yoğunluklu bir ekranda 300 pikselde gösterin, yumuşak ve pürtüklü görünür. O alanı dolduracak pikseller yoktur. Çözüm kolay: gerçekten kullanacağınız boyutta ya da daha büyük dışa aktarın, özellikle çoğu zaman nominal boyutun 2 katını istediğiniz Retina ve 4K ekranlar için. Vektörü bırakarak vazgeçtiğiniz tek gerçek avantaj budur, o yüzden hedef çözünürlüğü doğru ayarlamaya bir an ayırın.

Ne zaman piksele DÖKMEMELİsiniz

Hedef SVG okuyabiliyorsa, SVG'yi tutun. Nokta.

Kendi web sitenizde bir simge ya da logo vektör kalmalıdır. Her ekranda, her yakınlaştırma düzeyinde keskin olur, eşdeğer PNG'den küçük olur ve daha yüksek yoğunluklu yeni bir ekran çıktığında hiç daha büyük bir sürümü yeniden dışa aktarmanız gerekmez. Orada piksele dökmek katıksız zarardır — zaten sahip olduğunuz uyumluluğu kazanmak için biçimin en iyi özelliğini çöpe atarsınız.

Ve ana dosyanızı piksele dökmeyin. SVG doğruluğun kaynağıdır; her an, her boyutta bir PNG üretebilir. Bir PNG öbür yöne gidemez — bir piksel ızgarasından temiz vektör yolları geri getiremezsiniz. O yüzden SVG'yi saklayın ve her PNG'yi tek bir yere özel, tek kullanımlık bir dışa aktarım gibi görün. Diğer her şeyle aynı ilke: gönderdiğiniz kopyayı çevirin, düzenlediğiniz aslı saklayın.

Gerçekte nasıl yapıyorum

Bir vektörden piksel gerektiğinde buradaki SVG'den PNG'ye dönüştürücüyü kullanırım. SVG'yi tarayıcınızda işler ve size PNG'yi verir, yani hiçbir yere hiçbir şey yüklenmez — her şey makinenizde olur. Gideceği yere uyan bir boyut seçin, saydamlığı bozulmamış temiz bir PNG alın.

Ama asıl beceri dönüşüm değil. Önce sorduğunuz soru: burası vektör okuyor mu? Evetse, SVG'yi rahat bırakın ve var olan en keskin, en küçük seçeneğin tadını çıkarın. Hayırsa — e-posta, OG kartı, inatçı eski bir uygulama — o zaman doğru boyutta piksele dökün ve SVG'nizi bir sonraki sefer için güvende tutun. Bu kararı doğru verin, logonuzun olması gereken yerde bir daha asla boş bir kutu olmasın.