PNG ve SVG: Logolar, Simgeler ve Grafikler için Hangi Format?

PNG ve SVG, logolar ve grafikler için popüler formatlardır — ancak çok farklı çalışırlar. Yanlış olanı seçmek ya bulanık bir logo ya da her yerde açılamayan bir dosya ile sonuçlanır. İşte nasıl karar verileceği.

PNG ve SVG: Temel Fark

• PNG (Portable Network Graphics) bir raster formattır — bir görüntüyü piksel ızgarası olarak saklar. 200×200 bir PNG'nin tam olarak 40.000 pikseli vardır. Büyütün ve bulanıklaşır.
• SVG (Scalable Vector Graphics) bir vektör formattır — şekilleri matematiksel talimatlar olarak saklar. Bir SVG logosu herhangi bir boyutta mükemmel keskin görünür, bir favicon'dan (16×16) bir reklam panosuna kadar.

PNG Ne Zaman Kullanılır

• Karmaşık görüntüler veya fotoğraflar: SVG karmaşık şekilleri tanımlayabilir ama fotoğraflar için pratik değildir
• Platformlar arası uyumluluk: PNG her yerde açılır — tarayıcılar, kelime işlemciler, e-posta, mesajlaşma uygulamaları
• Sabit bir çıktı boyutuna ihtiyacınız olduğunda: Sosyal medya gönderileri, bilinen bir DPI'da baskı veya piksel mükemmelliğinde arayüz varlıkları için
• Ekran görüntüleri ve arayüz maketleri: Doğası gereği raster, PNG doğru formattır
• SVG mevcut olmadığında: Yüksek çözünürlüklü bir PNG (2000+ piksel genişlik) çoğu amaç için iyi çalışır

SVG Ne Zaman Kullanılır

• Logolar ve marka işaretleri: SVG logoları herhangi bir boyutta keskin kalır — web sitesi başlığı, mobil uygulama simgesi, basılı broşür
• Simgeler: SVG'deki arayüz simgeleri retina/yüksek DPI ekranlarda mükemmel ölçeklenir
• Şekillerden oluşan illüstrasyonlar: Grafikler, diyagramlar, infografikler, illüstrasyonlar
• Animasyonlar: SVG, CSS ve JavaScript animasyonlarını destekler
• Duyarlı web tasarımı: SVG tarayıcı penceresiyle otomatik olarak ölçeklenir

PNG ve SVG Karşılaştırması

İkisini Birlikte Kullanma

• Birçok iş akışı her iki formatı da kullanır:
• SVG'yi düzenleme ve ölçeklendirme için ana logo dosyası olarak tutun
• Sosyal medya, sunumlar ve e-posta için belirli boyutlarda PNG sürümleri dışa aktarın
• Retina ekranlar için 2× PNG (örn. 200×200 logo için 400×400) kullanın
• Yalnızca bir PNG logonuz varsa, yüksek çözünürlüklü sürümler oluşturmak için Görüntü Boyutlandırıcı ve web kullanımı için PNG → WebP kullanın.