SVG mi PNG mi: Logolar, İkonlar ve Ekran Görüntüleri İçin Hangi Dosya Formatı

Her tasarım aracı dışa aktarırken aynı soruyu sorar: SVG mi PNG mi? Çalıştığın boyutta ikisi birbirinin aynısı görünür, o yüzden insanlar zaten seçili olanı bırakır. Fark sonradan ortaya çıkar: daha büyük bir ekranda, daha yavaş açılan bir sayfada ya da değişmesi gereken bir marka renginde. İşte aynı ikon iki formatta, her birinin bedeli ve her projede karşına çıkan durumlar için bir tablo.

Gerçekte ne farklı: yollar mı, pikseller mi

SVG talimat saklar: şu eğriyi çiz, şu renkle doldur. PNG ise renkli piksellerden oluşan bir ızgara saklar, her nokta için bir değer. Bu tek fark geri kalan her şeyi açıklar.

Talimatlar her boyutta çalıştırılabilir, bu yüzden eğri her seferinde pürüzsüz yeniden çizilir. Izgaranın ise sabit sayıda noktası vardır, bu yüzden büyük bir ekran onları esnetmek zorundadır. SVG bir vektör formatı, PNG bir raster formatıdır. İkisi de W3C'nin açık standartlarıdır ve Figma'nın dışa aktarma paneli ikisini yan yana sunar.

Aynı kalp, iyice yakınlaştırılmış

Normal boyutta iki kalp birbirinin aynısı. Yakınlaştır, artık aynı dosya olmadıklarını görürsün.

SVG, yakınlaştırılmış

PNG, yakınlaştırılmış

Soldaki kalp yeni boyutta yolundan yeniden çiziliyor, bu yüzden kenar hâlâ temiz bir eğri. Sağdaki kalp, aynı ikonun 12'ye 12 piksellik bir render'ının en yakın komşu ölçeklemesiyle büyütülmüş hali, bu yüzden her piksel görünüyor. Gerçek ekranlar bunu daha yumuşak yapar, bloklamak yerine bulanıklaştırarak, ama sebep aynı: dosya o detayı hiç tutmadı.

PNG'nin çaresi daha büyük dışa aktarmaktır, ki bu da onun bedelidir.

Kodla yeniden renklendir: tek dosya, her renk

SVG metindir. Rengi bir özelliktir, bu yüzden bir stil dosyası yeni bir dışa aktarma olmadan değiştirebilir.

.icon { fill: currentColor; } .icon:hover { fill: #FF3B30; }

Hover durumları, karanlık mod ve marka temaları birer satıra iner. PNG her renk ve her boyut için yeni bir dosya ister.

Dosya boyutu: görselin içeriğine bağlı

Yukarıdaki kalbi ölçtük. SVG 290 bayt. Aynı görsel boyuttaki PNG ise piksellerle birlikte büyüyor.

Basit şekillerde SVG sabit kalırken PNG, yayınladığın her boyutla katlanır. Detaylı görsellerde bu tersine döner. Gradyan arka planlı ve yumuşak gölgeli 1200'e 800'lük bir kartı dışa aktardık: PNG 55.365 bayt, kalite 80 JPG 15.248 bayt, kalite 80 WebP ise 4.970 bayt çıktı. Pürüzsüz gradyanlar ve gölgeler çok sayıda tondan oluşur; SVG bunları taklit etmek için bir filtreye ya da devasa sayıda şekle ihtiyaç duyar.

PNG ne zaman doğru seçim

Görsel temiz şekillerden oluşmuyorsa PNG doğru seçimdir:

• Ekran görüntüleri. Yumuşak gölgeli bir tarayıcı penceresi ya da gerçek metin renderlı tam bir uygulama ekranı doğası gereği pikseldir. PNG onları birebir korur.
• Detaylı çizimler. İnce doku, grenli yapı ve boyanmış gölgelendirme yollara indirgenemez.
• Basit olmayan şeffaf görseller. PNG şeffaflığı destekler, bu yüzden yumuşak kenarlı bir kesit her arka planda çalışır.

Bir uyarı: logodan üretilmiş bir PNG, boyutu sabitlenmiş bir PNG'dir. Ana dosya olarak SVG'yi sakla ve PNG'leri yalnızca SVG okuyamayan yerler için ondan üret.

SVG ne zaman doğru seçim

• Logolar. Web sitesi başlığı, favicon ve billboard için tek dosya. PDF, AI ve EPS dahil tüm set için logo dosya formatları açıklandı yazısına bak.
• İkonlar. Bir sekme çubuğu veya araç çubuğu ikon seti, duruma göre CSS ile yeniden renklendirilir. En çok kullanılan açık ikon setlerinden Lucide, her ikonu SVG olarak sunar.
• Basit şekiller ve illüstrasyonlar. Düz renkli şekiller, ayırıcılar, rozetler ve grafikler.

SVG'nin yetersiz kaldığı yerler: binlerce şekilli bir dosya ağırlaşır, e-posta istemcileri, sosyal paylaşım önizlemeleri ve eski uygulamalar gibi bazı yerler de SVG göstermeyebilir. Orada PNG kullan.

Peki ya fotoğraflar?

İkisi de değil. 2026 model bir telefon kamerasının fotoğrafı sürekli tonlara sahiptir; vektörlerin tam da kötü olduğu, PNG'nin ise büyük kaldığı şey budur. Fotoğrafları PNG'den çok daha iyi sıkıştıran JPG veya WebP kullan. WebP güncel tarayıcılarda desteklenir.

SVG mi PNG mi: bir karar tablosu

SSS

SVG, PNG'den daha mı iyi?

Logolar, ikonlar ve basit şekiller için evet: her boyutta daha keskin ve genellikle daha küçük. Ekran görüntüleri ve detaylı çizimler için PNG daha iyi formattır. Hiçbiri her şeyde kazanmaz.

Logo için SVG mi PNG mi kullanmalıyım?

SVG. Ana dosya olarak sakla ve bazı e-posta ve sosyal araçlar gibi SVG gösteremeyen yerler için ondan PNG üret.

SVG, PNG'den küçük müdür?

Basit şekillerde evet, yukarıdaki kalbin gösterdiği gibi: 290 bayta karşılık boyuta göre 393 ile 10.400 bayt arası. Detaylı görsellerde tam tersi, çünkü SVG onları anlatmak için çok sayıda şekle ihtiyaç duyar.

Bir PNG'yi SVG gibi yeniden renklendirebilir miyim?

Temiz bir şekilde olmaz. SVG'nin dolgusu CSS'te değiştirebileceğin bir metin özelliğidir. PNG ise pişmiş piksellerdir, yeni renk yeni bir dışa aktarma demektir.

PNG'm yakınlaştırınca neden bulanık görünüyor?

PNG sabit bir piksel ızgarası tutar. Kendi boyutundan büyük gösterildiğinde ekran bu pikselleri esnetir ve kenarlar bulanıklaşır ya da bloklaşır. Daha büyük boyutta dışa aktar ya da görsel basit bir şekilse SVG kullan.

Fotoğraflar için JPG veya WebP, PNG'den daha mı iyi?

Evet. Fotoğrafları çok daha iyi sıkıştırırlar, böylece sayfa daha hızlı yüklenir. PNG'yi ekran görüntüleri, keskin metin ve grafikler için sakla.

Kaynaklar

• Scalable Vector Graphics (SVG) 2, W3C.
• Portable Network Graphics (PNG) Specification, W3C.
• Image file type and format guide, MDN Web Docs.
• Dosya boyutları bizim tarafımızdan sharp ile ölçüldü: SVG olarak ve beş boyutta PNG olarak 24'e 24'lük bir kalp yolu, ayrıca PNG, JPG ve WebP olarak kalite 80'de 1200'e 800'lük gradyanlı ve gölgeli bir kart.
• İlk olarak UX Brainy üzerinde bir carousel olarak yayınlandı.