SVG vs PNG: Vektör ve Raster Görsel Formatlarının Karşılaştırması

SVG ve PNG temelden farklı sorunları çözer. SVG görselleri sonsuz ölçeklenen matematiksel şekiller olarak saklar. PNG görselleri renkli pikseller ızgarası olarak saklar. Yanlışını seçmek ya performans ya da görsel kaliteye mal olur.

SVG ve PNG'yi Temelden Farklı Kılan Ne?

SVG ve PNG arasındaki fark, vektör ve raster grafikler arasındaki daha geniş ayrımı yansıtır.

SVG (Ölçeklenebilir Vektör Grafikleri), görselleri şekiller, çizgiler, eğriler ve renklerin matematiksel tanımlarıyla açıklayan XML tabanlı bir formattır. Bir SVG'yi yakınlaştırdığınızda tarayıcı her şekli yeni boyutta yeniden hesaplar ve çizer. Sonuç ister 16px'lik bir favicon ister 16.000px'lik bir billboard olarak görüntülensin her zaman nettir.

PNG (Taşınabilir Ağ Grafikleri), görselleri her biri belirli bir renk değerine sahip piksellerden oluşan bir ızgara olarak saklayan bir raster formatıdır. Görselin sabit bir çözünürlüğü vardır. Yerel boyutlarının ötesine ölçeklerseniz bulanık ve pikselleştirilmiş hale gelir. Küçültürseniz gereksiz yere daha fazla veri indirmiş olursunuz.

Bu ayrım her şeyi belirler: dosya boyutu, ölçeklenebilirlik, düzenleme iş akışı ve her formatın iyi işlediği görsel türleri.

SVG Ne Zaman Daha İyi Seçim?

SVG, başlangıçta vektör sanat eseri olarak oluşturulan her grafikte üstünlük sağlar. SVG'yi şu durumlarda kullanın:

• Logolar — bir logonun her boyutta net görünmesi gerekir, 32px'lik bir tarayıcı sekmesi ikonundan tam genişlikte bir hero bannere kadar. SVG bunu tek bir dosyayla halleder. PNG ile birden fazla çözünürlüğe ihtiyacınız olurdu.
• İkonlar — kullanıcı arayüzü ikonları, navigasyon ikonları, sosyal medya ikonları. Gerçek dünya örneği: 50 kategori ikonu olan bir e-ticaret sitesi, PNG olarak toplam 1,2 MB olan dosyaları SVG'ye geçişte yalnızca 95 KB'a düşürdü.
• İllüstrasyonlar ve diyagramlar — temiz çizgiler ve düz renklerle teknik diyagramlar, akış şemaları, haritalar ve infografikler. SVG metni seçilebilir ve aranabilir tutar.
• Animasyonlar — SVG ögeleri CSS veya JavaScript ile canlandırılabilir, video dosyaları olmadan hafif yükleme döndürücüleri, mikro etkileşimler ve interaktif grafikler oluşturmaya olanak tanır.
• Faviconlar — modern tarayıcılar SVG faviconları destekler, bunlar her ekran yoğunluğunda net görünür. Herhangi bir görselden favicon oluşturmak için Favicon Oluşturucu aracımızı kullanabilirsiniz.

W3Techs'e göre tüm web sitelerinin %65,5'i artık SVG kullanıyor, bu da onu PNG ve JPEG'den sonra en yaygın üçüncü görsel formatı yapıyor. Duyarlı tasarım ihtiyaçları ve performans avantajları tarafından yönlendirilerek benimsenmesi yıllık yaklaşık %8 büyüdü.

PNG Ne Zaman Daha İyi Seçim?

PNG, piksel düzeyinde detay önemli olduğunda veya görsel içeriği doğası gereği raster tabanlı olduğunda doğru seçimdir:

• Şeffaf arkaplana sahip fotoğraflar — şeffaf arkaplanlar üzerinde ürün kesimleri, katmanlı fotoğraf kompozitleri. PNG, fotoğrafik detayı korurken tam alfa şeffaflığı destekler. (Şeffaflığı olmayan fotoğraflar için JPEG genellikle daha iyidir.)
• Ekran görüntüleri — ekran yakalamaları piksel hassasiyetinde kullanıcı arayüzü ögeleri, kenar yumuşatılmış metin ve ince geçişler içerir ki bunlar doğası gereği rasterdir. PNG bunları tam olarak korur.
• Çok renkli karmaşık sanat eserleri — detaylı dijital tablolar, dokular ve temiz vektör şekillerine sadeleştirilemeyecek fotorealistik illüstrasyonlar.
• Metin bindirmeli raster grafikler — birleştirilmiş fotoğraf ve metin içeriğinin piksel hassasiyetinde oluşturulmasına ihtiyacınız olduğunda, PNG metin kenarları etrafında sıkıştırma kusurları olmamasını sağlar.

Dosya Boyutu ve Performans

SVG'nin iyi işlediği grafik türleri (ikonlar, logolar, basit illüstrasyonlar) için dosya boyutu tasarrufları dramatiktir:

SVG dosyaları ayrıca Gzip veya Brotli ile son derece iyi sıkışır (çoğu web sunucusunda standart), aktarım sırasında genellikle %50-70 daha küçüklerdir. 20 KB'lık bir SVG hat üzerinden yalnızca 6-8 KB olarak aktarılabilir.

Performans kazanımları dosya boyutunun ötesine geçer. SVG dosyaları doğrudan HTML'ye gömülerek bir HTTP isteği tamamen ortadan kaldırılabilir. Cihazın yerel çözünürlüğünde srcset özelliklerine veya duyarlı görsel işaretlemesine ihtiyaç duymadan oluşturulurlar. Metin tabanlı oldukları için önbellek ve sürüm kontrolü dostudurlar.

Karmaşık görseller için — fotoğraflar, detaylı dokular, binlerce benzersiz renk içeren görseller — SVG hiçbir avantaj sunmaz. SVG'ye "dönüştürülmüş" bir fotoğraf ya raster veriyi base64 olarak gömer (küçültmek yerine büyütür) ya da görseli basitleştirilmiş şekillere dönüştürür (detay kaybeder). Bu görseller için PNG, JPEG veya WebP ve AVIF gibi yeni formatlar doğru araçlardır.

SVG vs PNG: Hızlı Karşılaştırma

Pratik Bir Senaryo

Bir şirket web sitesini yeniden tasarladığınızı düşünün. Markanın bir logosu, 30 navigasyon ve özellik ikonu, bir hero fotoğrafı ve birkaç ürün ekran görüntüsü var. Formatları şöyle atarsınız:

• Logo → SVG. Başlıkta (küçük), alt bilgide (orta) ve hakkımızda sayfasında (büyük) görünür. Tek bir SVG dosyası üç boyutu da halleder, retina ekranlarda net kalır ve yaklaşık 5 KB ağırlığındadır.
• 30 ikon → SVG sprite. Tüm 30 ikon tek bir dosyada, toplam yaklaşık 40-60 KB. Bu, iki veya üç PNG ikonunun ağırlığından daha azdır. CSS renk ve boyutlarını kontrol eder.
• Hero fotoğrafı → SVG değil, PNG değil. En küçük dosya boyutu için JPEG veya WebP kullanın. En iyi uygulamalar için görsel optimizasyonu rehberimize bakın.
• Ürün ekran görüntüleri → PNG. Ekran görüntüleri, kayıpsız korunma gerektiren piksel hassasiyetinde kullanıcı arayüzü ögeleri ve metin içerir.

SVG ve PNG Arasında Nasıl Dönüştürülür?

Bu formatlar arasında doğrudan tarayıcınızda dönüşüm yapabilirsiniz — sunucuya yükleme yok, kurulacak yazılım yok. Vizua her dosyayı cihazınızda yerel olarak işler:

• SVG'den PNG'ye — SVG dosyalarını istediğiniz çözünürlükte rasterleştirin
• Görsel Vektörleştirme — raster görselleri (PNG, JPEG) SVG vektör formatına dönüştürün
• Favicon Oluşturucu — modern tarayıcılar için SVG çıkışı dahil herhangi bir görselden favicon dosyaları oluşturun

Sitenizdeki her görsel için doğru formatı seçmeye daha geniş bir bakış için, kullanım amacına göre önerilen boyutları ve formatları listeleyen görsel dosya boyutları rehberimize bakın.

Sık Sorulan Sorular