SVG vs PNG: Vektor ve Raster Gorsel Formatlarinin Karsilastirmasi

SVG ve PNG temelden farkli sorunlari cozer. SVG gorselleri sonsuz olceklenen matematiksel sekiller olarak saklar. PNG gorselleri renkli pikseller izgarasi olarak saklar. Yanlisini secmek ya performans ya da gorsel kaliteye mal olur.

SVG ve PNG'yi Temelden Farkli Kilan Ne?

SVG ve PNG arasindaki fark, vektor ve raster grafikler arasindaki daha genis ayrimi yansitir.

SVG (Olceklenebilir Vektor Grafikleri), gorselleri sekiller, cizgiler, egriler ve renklerin matematiksel tanimlariyla aciklayan XML tabanli bir formattir. Bir SVG'yi yakinlastirdiginizda tarayici her sekli yeni boyutta yeniden hesaplar ve cizer. Sonuc ister 16px'lik bir favicon ister 16.000px'lik bir billboard olarak goruntulensin her zaman nettir.

PNG (Tasinabilir Ag Grafikleri), gorselleri her biri belirli bir renk degerine sahip piksellerden olusan bir izgara olarak saklayan bir raster formattidir. Gorselin sabit bir cozunurluugu vardir. Yerel boyutlarinin otesine olceklerseniz bulanik ve piksellestirilmis hale gelir. Kucultseniz gereksiz yere daha fazla veri indirmis olursunuz.

Bu ayrm her seyi belirler: dosya boyutu, olceklenebilirlik, duzenleme is akisi ve her formatin iyi isledigi gorsel turleri.

SVG Ne Zaman Daha Iyi Secim?

SVG, baslangicta vektor sanat eseri olarak olusturulan her grafikte ustunluk saglar. SVG'yi su durumlarda kullanin:

• Logolar — bir logonun her boyutta net gorunmesi gerekir, 32px'lik bir tarayici sekmesi ikonundan tam genislikte bir hero bannere kadar. SVG bunu tek bir dosyayla halleder. PNG ile birden fazla cozunurluge ihtiyaciniz olurdu.
• Ikonlar — kullanici arayuzu ikonlari, navigasyon ikonlari, sosyal medya ikonlari. Gercek dunya ornegi: 50 kategori ikonu olan bir e-ticaret sitesi, PNG olarak toplam 1,2 MB olan dosyalari SVG'ye geciste yalnizca 95 KB'a dusurdu.
• Iluestrasyonlar ve diyagramlar — temiz cizgiler ve duz renklerle teknik diyagramlar, akis semalari, haritalar ve infografikler. SVG metni secilebiir ve aranabilir tutar.
• Animasyonlar — SVG ogeleri CSS veya JavaScript ile canlandirilabilir, video dosyalari olmadan hafif yukleme donduruculeri, mikro etkilesimler ve interaktif grafikler olusturmaya olanak tanir.
• Faviconlar — modern tarayicilar SVG faviconlari destekler, bunlar her ekran yogunlugunda net gorunur. Herhangi bir gorselden favicon olusturmak icin Favicon Olusturucu aracimizi kullanabilirsiniz.

W3Techs'e gore tum web sitelerinin %65,5'i artik SVG kullaniyor, bu da onu PNG ve JPEG'den sonra en yaygin ucuncu gorsel formati yapiyor. Duyarli tasarim ihtiyaclari ve performans avantajlari tarafindan yonlendirilerek benimsenmesi yillik yaklasik %8 buyudu.

PNG Ne Zaman Daha Iyi Secim?

PNG, piksel duzeyinde detay onemli oldugunda veya gorsel icerigi dogasi geregi raster tabanli oldugunda dogru secimdir:

• Seffak arkaplana sahip fotograflar — seffak arkaplanlar uzerinde urun kesimleri, katmanli fotograf kompozitllar. PNG, fotografik detayi korurken tam alfa seffakligi destekler. (Seffakligi olmayan fotograflar icin JPEG genellikle daha iyidir.)
• Ekran goruntuleri — ekran yakalamalari piksel hassasiyetinde kullanici arayuzu ogeleri, kenar yumusatilmis metin ve ince gecisler icerir ki bunlar dogasi geregi rasterdir. PNG bunlari tam olarak korur.
• Cok renli karmasik sanat eserleri — detayli dijital tablolar, dokular ve temiz vektor sekillerine sadeslestirilemeyecek fotorealistik iluestrasyonlar.
• Metin bindirmeli raster grafikler — birlestirilmis fotograf ve metin iceriginin piksel hassasiyetinde olusturulmasina ihtiyaciniz oldugunda, PNG metin kenarlari etrafinda sikistirma kusurlari olmamasini saglar.

Dosya Boyutu ve Performans

SVG'nin iyi isldigi grafik turleri (ikonlar, logolar, basit iluestrasyonlar) icin dosya boyutu tasarruflari dramatiktir:

SVG dosyalari ayrica Gzip veya Brotli ile son derece iyi sikisir (cogu web sunucusunda standart), aktarim sirasinda genellikle %50-70 daha kucuklerler. 20 KB'lik bir SVG hat uzerinden yalnizca 6-8 KB olarak aktarilabilir.

Performans kazanimlari dosya boyutunun otesine gecer. SVG dosyalari dogrudan HTML'ye gomulerek bir HTTP istegi tamamen ortadan kaldirilabilir. Cihazin yerel cozunurlugununde srcset ozelliklerine veya duyarli gorsel isaretlemesine ihtiyac duymadan olusturulurlar. Metin tabanli olduklari icin onbellek ve surum kontrolu dostudurlar.

Karmasik gorseller icin — fotograflar, detayli dokular, binlerce benzersiz renk iceren gorseller — SVG hicbir avantaj sunmaz. SVG'ye "donusturulmus" bir fotograf ya raster veriyi base64 olarak gomer (kucultmek yerine buyutur) ya da gorseli basitlestirilmis sekillere donusturur (detay kaybeder). Bu gorseller icin PNG, JPEG veya WebP ve AVIF gibi yeni formatlar dogru araclardir.

SVG vs PNG: Hizli Karsilastirma

Pratik Bir Senaryo

Bir sirket web sitesini yeniden tasarladiginizi dusunun. Markanin bir logosu, 30 navigasyon ve ozellik ikonu, bir hero fotografsi ve birkac urun ekran goruntusu var. Formatlari soyle atarsiniz:

• Logo → SVG. Baslikta (kucuk), alt bilgide (orta) ve hakkimizda sayfasinda (buyuk) gorunur. Tek bir SVG dosyasi uc boyutu da halleder, retina ekranlarda net kalir ve yaklasik 5 KB agirligindadir.
• 30 ikon → SVG sprite. Tum 30 ikon tek bir dosyada, toplam yaklasik 40-60 KB. Bu, iki veya uc PNG ikonunun agirligindan daha azdir. CSS renk ve boyutlarini kontrol eder.
• Hero fotografsi → SVG degil, PNG degil. En kucuk dosya boyutu icin JPEG veya WebP kullanin. En iyi uygulamalar icin gorsel optimizasyonu rehberimize bakin.
• Urun ekran goruntuleri → PNG. Ekran goruntuleri, kayipsiz korunma gerektiren piksel hassasiyetinde kullanici arayuzu ogeleri ve metin icerir.

SVG ve PNG Arasinda Nasil Donusturulur?

Bu formatlar arasinda dogrudan tarayicinizda donusum yapabilirsiniz — sunucuya yukleme yok, kurulacak yazilim yok. Vizua her dosyayi cihazinizda yerel olarak isler:

• SVG'den PNG'ye — SVG dosyalarini istediginiz cozunurlukkte rasterize edin
• Gorsel Vektorlestirme — raster gorselleri (PNG, JPEG) SVG vektor formatina donusturun
• Favicon Olusturucu — modern tarayicilar icin SVG cikisi dahil herhangi bir gorselden favicon dosyalari olusturun

Siteniizdeki her gorsel icin dogru formati secmeye daha genis bir bakis icin, kullanim amacina gore onerilen boyutlari ve formatlari listeleyen gorsel dosya boyutlari rehberimize bakin.

Sik Sorulan Sorular