PNG mi SVG mi: hangi formatı kullanmalısınız?

1. Temel fark: piksel ızgaraları ile matematiksel yollar

PNG bir bitmaptır: görseli tek tek piksellere böler ve her birinin rengini kaydeder. Bir PNG'yi büyütmek o pikselleri gererek büyütmektir; bu yüzden tırtıklı kenarlar ve bulanıklık ortaya çıkar. SVG ise bir vektör görseldir: şekilleri koordinatlar ve Bézier eğrileri gibi matematiksel talimatlarla tanımlar, tarayıcı da grafikleri yeni boyutta yeniden çizer; böylece her ölçekte keskin kalır. Bu tek gerçek, iki format arasındaki farkların neredeyse tamamının kökenidir.

Saydamlık konusunda PNG bir alfa kanalı destekler ve saydam arka plan saklayabilir. SVG ise doğası gereği saydamdır — arka plan dikdörtgeni çizmediğiniz sürece grafik dışındaki her şey saydam kalır. Aklınıza takılmasın: JPG'nin hiç saydamlığı yoktur; beyaz arka planı görselin içine boyanmış gerçek bir renktir.

2. Dosya boyutu ve yükleme performansı

İkon ve logo gibi basit grafiklerde SVG çoğu zaman yalnızca birkaç KB'tır ve tek dosya her ekran yoğunluğuna uyar. PNG ise Retina ekranlarda keskin kalmak için genellikle @2x ve @3x sürümlere ihtiyaç duyar; bu da dosya boyutunu çarpar. Fotoğraflarda tablo tersine döner: zengin renk geçişleri vektörleştirildiğinde çok sayıda yol üretir, dolayısıyla SVG JPG veya WEBP'den çok daha büyük olur — buna değmez.

Sebep, her formatın sıkıştırma biçiminde yatar. PNG pikselleri kayıpsız sıkıştırma ile saklar, bu yüzden görsel ne kadar karmaşıksa dosya o kadar büyük olur. SVG ise düz metindir; tekrarlanan yol komutları ve koordinatlar son derece iyi sıkıştırılır. İkisi de kayıpsız denen iki formatın boyut bakımından bu kadar farklı davranabilmesinin sebebi budur.

Kullanım senaryosu	Önerilen format	Neden
Web sitesi ikonları / logoları	SVG	Her çözünürlük için tek dosya ve CSS ile renklendirme
Fotoğraflar	JPG / WEBP	Fotoğraf sadakatiyle küçük dosyalar
Ekran görüntüleri	PNG	Piksel düzeyinde doğru ve kayıpsız sıkıştırma
Veri grafikleri	SVG	Ölçeklendiğinde keskin ve etkileşim yapmaya uygun
Sosyal medya avatarları	PNG / JPG	Çoğu platform yalnızca raster kabul eder

3. PNG ne zaman kullanılmalı?

• Fotoğraflar, karmaşık ışıklandırma ve ince gradyanlar;
• Piksel düzeyinde doğru olması gereken ekran görüntüleri ve arayüz kayıtları;
• Platformun yalnızca raster kabul ettiği yerler, örneğin bazı panolarda avatar yükleme;
• SVG'yi desteklemeyen çok eski ortamlar için uyumluluk yedeği.

4. SVG ne zaman kullanılmalı?

• Web sitesi ikonları ve logoları: her çözünürlük için tek dosya, Retina ekranlarda hâlâ keskin;
• CSS veya JavaScript ile renklendirme ve çizgi çizme animasyonu gerektiren grafikler;
• Veri grafikleri: ECharts gibi görselleştirme kütüphaneleri varsayılan olarak SVG üretir;
• Cihazın vektör yolları okuduğu baskı, lazer gravür ve vinil kesimi.

5. PNG ile SVG birbirine dönüştürülebilir mi?

Evet. PNG'den SVG'ye: PolySVG PNG'den SVG'ye aracını ya da görselden SVG'ye aracını kullanın, dosyayı yükleyin ve vektörleştirmek için üretin — sonuç ikonlar ve logolar için mükemmel olur, fotoğraflar ise illüstratif bir tarz kazanır. Dönüştürme ücretsizdir ve saydam bir PNG saydam arka planını korur. Oluşan SVG, renklendirme ve arka plan kaldırma için yine editörde açılabilir; böylece süreç tamamlanır. SVG'den PNG'ye: dosyayı çevrimiçi SVG editöründe açın ve ihtiyacınız olan çözünürlükte PNG dışa aktarın — dokümanlar veya önizleme görselleri için ideal.

Akınızda bulundurmanız gereken bir nokta var: PNG'den SVG'ye basit bir "farklı kaydet" değildir; konturları yeniden çizen bir vektörize etmedir. Grafik varlıklar temiz yollara dönüşür, fotoğraflar ise renk bloklarına sıkışır. İndirmeden önce sonucu araçta önizleyip tarzın beklediğiniz gibi olduğunu doğrulayın.

Tek satırlık kural: ikonlar, logolar ve grafikler SVG alır; fotoğraflar ve ekran görüntüleri PNG/JPG/WEBP alır. Emin değilseniz grafik olan her şey için SVG'yi tercih edin. Daha fazlası için SVG nedir ve Bir görseli SVG'ye çevirmenin üç yolu rehberlerini okuyun.