Temel fark temsildedir: SVG yol, şekil ve metin gibi grafik nesneleri tanımlar; PNG ise dikdörtgen bir piksel ızgarası saklar. SVG'deki vektör yollar farklı boyutlarda temiz yeniden çizilir; gömülü bir bitmap özgün çözünürlüğünü korur. PNG'nin sabit bir piksel ızgarası vardır ve bu ızgaranın çok ötesine büyütülünce yumuşar veya pikselleşir.
SVG ve PNG bir bakışta
| Soru | SVG | PNG |
|---|---|---|
| Grafik modeli | XML tabanlı vektör ve karışık vektör/raster belge | Piksellerden oluşan raster görüntü |
| Ölçekleme | Şekiller ve metin istenen boyutta yeniden çizilir | Büyütme sabit piksel ızgarasını ara değerler |
| Saydamlık | Opaklık, maskeler ve birleştirme | PNG renk türüne göre alfa kanalı veya palet saydamlığı |
| En uygun kullanım | Logolar, simgeler, diyagramlar, grafikler ve arayüz grafikleri | Ekran görüntüleri, piksel sanatı ve kayıpsız saklama isteyen raster çalışmalar |
| Düzenleme | Tek tek vektör nesneler düzenlenebilir kalabilir | Piksel düzeyinde düzenleme |
| Karmaşık görüntü | Çok ayrıntılı sahnelerde belge uzayabilir | Karmaşık raster ayrıntıyı doğrudan saklar |
Bir logo için SVG neden genellikle kazanır?
Bir logo küçük bir gezinti çubuğunda, yüksek yoğunluklu bir ekranda ve büyük bir tabelada görünmek zorunda kalabilir. Çalışma temiz yollar ve şekillerden oluşuyorsa tek bir SVG, ayrı piksel boyutları üretmeden bu boyutları karşılayabilir. Renk ve bazı görsel özellikler, SVG'nin nasıl gömüldüğüne bağlı olarak belgede veya CSS ile de kontrol edilebilir.
SVG kendiliğinden en küçük dosya değildir. Basit bir simge kompakt olabilir; binlerce yolu olan izlenmiş bir fotoğraf, uygun bir raster görüntüden daha büyük ve bakımı daha zor olabilir. Uzantıya güvenmek yerine gerçek varlığı optimize edin ve aktarım boyutunu karşılaştırın.
PNG ne zaman daha iyi seçimdir?
- Ekran görüntüleri: PNG, kayıplı JPEG bozulması olmadan arayüz metnini ve keskin piksel kenarlarını korur.
- Raster çalışma: Dokular, fırça izleri ve piksel düzeyindeki etkilerin yararlı bir vektör karşılığı olmayabilir.
- Piksel sanatı: Piksel ızgarasının kesin kontrolü amaçtır.
- Sabit boyutlu yedek veya dışa aktarma: Alan iş akışı SVG kabul edemediğinde PNG bilinen boyutlarda verilebilir.
Saydamlık belirleyici fark değildir
İki biçim de saydamlığı destekler. PNG, gri tonlama-alfa veya truecolor-alfa görüntülerde piksel başına alfa saklayabilir; indexed PNG palet girişlerine alfa değerleri bağlayabilir. SVG opaklığı ve daha fazla belge düzeyinde birleştirme özelliğini destekler. Seçimi, arka planın saydam olması gerektiği için değil, çalışmanın temelde vektör mü raster mı olduğuna göre yapın.
Logoların ötesi: pratik seçimler
| Varlık | Genellikle şununla başlayın | Neden |
|---|---|---|
| Marka işareti veya basit simge | SVG | Çözünürlükten bağımsız geometri |
| Grafik veya teknik diyagram | SVG | Birden fazla boyutta keskin çizgi ve metin |
| Uygulama ekran görüntüsü | PNG | Bir piksel arayüzünün kayıpsız yeniden üretimi |
| Ayrıntılı raster çizim | PNG veya başka bir raster biçim | İzlemeden piksel düzeyindeki ayrıntıyı korur |
| Fotoğraf | Genellikle fotoğraf için bir web biçimi | PNG'nin kayıpsız saklaması sürekli tonlu fotoğraf için çoğu zaman gereksiz büyüktür |
PNG'yi SVG'ye çevirmek onu ölçeklenebilir yapar mı?
Kendiliğinden hayır. Bir SVG, bir image öğesiyle bitmap'i sarmalayabilir ve özgün pikselleri değiştirmeden bırakabilir. Otomatik izleme yollar oluşturur; küçük metin, gradyanlar ve ince çerçeveler değişebilir. Düzenlenebilir bir vektör özgün varsa oradan başlayın. SVG gömülü içerik belirtimi gömülü görüntüleri vektör geometriden ayırır.
PNG dışa aktarma boyutunu hedeften seçin
160 × 40 CSS pikseli olarak görünen bir logo için 320 × 80 piksel dışa aktarma 2× raster bir sürüm sağlar. Bu bir boyut örneğidir, dosya boyutu ölçümü değildir. Mümkünse vektör ana kopyadan dışa aktarın: mevcut 160 × 40 PNG'yi büyütmek eksik ayrıntıyı yaratmaz. Raster ve ekran piksellerinin açıklaması için web.dev yazısına bakın.
Yararlı bir üretim iş akışı
- Tasarım gerçekten vektörse düzenlenebilir vektör ana kopyayı saklayın.
- Kanal kabul ediyorsa SVG teslim edin.
- PNG yedeklerini gereken kesin piksel boyutlarında dışa aktarın.
- Gerçek sayfada hem görsel çıktıyı hem sıkıştırılmış dosya boyutunu test edin.
Sonraki karar için PNG saydamlığının nasıl çalıştığını okuyun veya PNG-8 ve PNG-24 dışa aktarma terimlerini karşılaştırın.
