SVG vs PNG: Vektör ve Raster Görsel Formatlarının Karşılaştırması
SVG ve PNG farklı sorunları çözer. SVG vektör geometrisini tanımlar ve raster içerik de gömebilir; PNG ise sabit bir piksel ızgarası saklar. Doğru seçim kaynak çalışmaya, güvenlik sınırına, erişilebilirliğe, düzenleme sürecine, oluşturma davranışına ve ölçülen dosya boyutuna bağlıdır.
SVG ile PNG Arasındaki Temel Fark
SVG ile PNG ayrımı, daha genel olan vektör ve raster grafikler arasındaki farka doğrudan karşılık gelir.
SVG (Scalable Vector Graphics) XML tabanlıdır; şekilleri, yolları, metni, filtreleri, stilleri ve gömülü kaynakları tanımlayabilir. Vektör bölümleri oluşturulan boyutta yeniden çizilir; ancak netlik yine geometriye, konturlara, efektlere, piksel hizalamasına ve gömülü raster görüntülere bağlıdır.
PNG (Portable Network Graphics), sabit piksel ızgarası saklayan bir raster biçimidir. Büyütme yeniden örnekleme gerektirir ve görüntü yumuşak veya pikselli olabilir. Kaynağı gösterilen alandan çok daha büyük sunmak, tarayıcı uygun bir dosyayı duyarlı adaylar arasından seçemiyorsa aktarım ve kod çözme işini artırabilir.
Bu ayrım dosya boyutundan ölçeklenebilirliğe, düzenleme akışından her biçimin iyi işlediği görüntü türlerine kadar her şeyi etkiler.
SVG Ne Zaman Kullanılır?
Güvenlik, erişilebilirlik, oluşturma ve gömme gereksinimleri anlaşıldığında SVG, incelenmiş vektör çalışmalar için güçlü bir adaydır:
- Logolar — tek bir temiz SVG, raster büyütme olmadan birçok oluşturma boyutunu karşılayabilir. Çok küçük işaretlerde yine de optik sadeleştirme, kontur ayarı veya özel bir sürüm gerekebilir.
- Simgeler — arayüz, gezinme ve sosyal simgeler yeniden kullanılabilir geometri ve stilleri paylaşabilir. SVG, birden çok raster çözünürlüğünden küçük olabilir; ancak karmaşık yollar veya satır içi tekrar bunun tersine yol açabilir.
- İllüstrasyonlar ve diyagramlar — temiz çizgili ve düz renkli teknik diyagramlar, akış şemaları, haritalar ve infografikler. SVG metni, metin olarak tutulduğunda seçilebilir; ancak erişilebilirlik ve dizine ekleme doğru işaretleme ve gömme gerektirir.
- Animasyonlar — SVG öğeleri CSS, JavaScript veya SVG mekanizmalarıyla canlandırılabilir. Hareket tercihleri, işlemci maliyeti, CSP, erişilebilirlik ve etkileşim karmaşıklığı yine incelenmelidir.
- Favicon’lar — güncel büyük tarayıcılar SVG favicon kullanabilir; tam bir simge seti, diğer tüketiciler için raster veya ICO yedekleri de içerebilir. Desteklenen bir görüntüden yaygın favicon çıktıları oluşturmak için Favicon Oluşturucu aracını kullanabilirsiniz.
SVG güncel tarayıcılarda ve yaygın tasarım araçlarında geniş destek görür. Popülerlik, belirli bir varlığın vektör olması gerektiğini garanti etmez; karmaşıklığı, güvenliği, önbellek stratejisini, erişilebilirliği ve oluşturmayı karşılaştırın.
PNG Ne Zaman Kullanılır?
Kayıpsız raster pikseller veya alfa saydamlığı önemli olduğunda ve ortaya çıkan boyut aktarım bütçesine uyduğunda PNG güçlü bir adaydır:
- Saydam fotoğraflar — PNG alfa ve kayıpsız piksel kodlamasını destekler, ancak ayrıntılı bir fotoğraf büyük olabilir. Tüketiciler destekliyorsa kayıpsız veya kayıplı WebP/AVIF alfa adaylarını karşılaştırın; saydamlık yoksa JPEG ve modern fotoğraf biçimlerini test edin.
- Ekran görüntüleri — ekran yakalamaları raster arayüz, kenarları yumuşatılmış metin ve degradeler içerir. PNG kodlanan piksel değerlerini koruyabilir; profiller, meta veriler, yeniden boyutlandırma ve palet dönüşümü ise ayrı konulardır.
- Çok renkli karmaşık çalışmalar — temiz vektör şekillerine sadeleştirilemeyen ayrıntılı dijital resimler, dokular ve fotogerçekçi illüstrasyonlar.
- Metin bindirmeli raster grafikler — metin kenarlarında piksel düzeyinde kesin görüntü gerektiğinde PNG, kayıplı biçimlerin oluşturduğu sıkıştırma bozulmalarını önler.
Dosya Boyutu ve Performans Karşılaştırması
Simge, logo ve basit illüstrasyonlarda; geometriye, boyutlara, tekrara, sıkıştırmaya ve önbellek stratejisine bağlı olarak optimize edilmiş SVG de raster adaylar da daha küçük olabilir:
| Grafik türü | PNG boyutu | SVG boyutu | Tasarruf |
|---|---|---|---|
| Basit simge | Her aday için bir raster boyutu | Çoğu zaman kompakt vektör geometrisi | İkisini de ölçün |
| Logo | Birden çok çözünürlük gerekebilir | Vektör kaynak varsa çoğu zaman güçlü bir seçim | İkisini de ölçün |
| Simge koleksiyonu | Ayrı dosyalar istek ve bayt ekleyebilir | Sprite, dış dosya ve satır içi işaretlemenin önbellek maliyetleri farklıdır | Tüm sayfayı ölçün |
| Basit illüstrasyon | Boyut piksel ölçüleri ve ayrıntıyla artar | Boyut yol, stil ve filtre karmaşıklığıyla artar | İçeriğe bağlı |
Brotli veya gzip gibi metin sıkıştırması, işaretlemeye ve sunucu yapılandırmasına bağlı olarak SVG aktarım boyutunu azaltabilir. Yalnızca diskteki kaynak dosyayı değil, sıkıştırılmış aktarım baytlarını karşılaştırın.
Satır içi SVG ayrı bir isteği önler ancak HTML’yi büyütür ve bağımsız önbelleğe alınamaz. Dış SVG tarayıcı önbelleğinden yararlanabilir. Vektör geometrisi genellikle raster yoğunluğu çeşitleri gerektirmez; karmaşık veya raster gömülü SVG yine de duyarlı işleme ihtiyaç duyabilir. Gömme stratejisini sayfa düzeyinde ölçerek seçin.
Fotoğraflarda ve ayrıntılı dokularda vektör izleme genellikle aşırı geometri oluşturur veya ayrıntıları basitleştirir. Özgün rasterı SVG içine gömmek, onu vektör çizime dönüştürmeden kapsayıcı ve çoğu zaman base64 yükü ekler. PNG, JPEG, WebP veya AVIF gibi uygun bir raster biçimi kullanın.
SVG ve PNG: Hızlı Karşılaştırma
| Özellik | SVG | PNG |
|---|---|---|
| Görüntü türü | Vektör (şekiller ve yollar) | Raster (piksel ızgarası) |
| Ölçeklenebilirlik | Vektör bölümleri yeniden çizilir; oluşturma ayrıntıları yine önemlidir | Sabit piksel ızgarası; büyütme yumuşatabilir |
| Saydamlık | Evet | Evet (alfa kanalı) |
| Fotoğraf içeriği | Gömülü raster dışında genellikle uygun değildir | Kayıpsız alfa seçeneği; sunum boyutunu karşılaştırın |
| Simgeler/logolar | Temiz ve incelenmiş bir vektör kaynak varsa güçlüdür | Hazırlanmış piksel boyutlarında kullanılabilir |
| Animasyon | Evet (SVG/CSS/JS mekanizmaları) | APNG uzantısı |
| Kodla düzenleme | Evet (XML tabanlı) | Hayır |
| Metin ve erişilebilirlik | Doğru işaretleme ve gömmeyle mümkündür | Çevreleyen metin veya eşdeğer alt gerekir |
| Tarayıcı desteği | Güncel büyük tarayıcılar; gömme kuralları farklıdır | Çok geniş |
| Dosya boyutu | Geometriye ve işaretlemeye bağlı | Boyutlara ve içeriğe bağlı |
Pratik Örnek: Bir Şirket Web Sitesini Yenilemek
Bir şirket web sitesini yenilediğinizi düşünün. Marka logonuz, 30 gezinme ve özellik simgesi, bir ana fotoğraf ve birkaç ürün ekran görüntüsü var. Biçimleri şöyle atayabilirsiniz:
- Logo → temiz bir vektör kaynak varsa SVG. İncelenmiş tek dosya birkaç oluşturma boyutunu karşılayabilir; konturları ve küçük boyutta okunabilirliği test edin.
- Simge koleksiyonu → SVG sprite veya bileşen sistemi geometriyi yeniden kullanabilir. Erişilebilirliği, önbellek davranışını, CSP’yi ve aktarılan toplam işaretlemeyi doğrulayın.
- Ana fotoğraf → JPEG, WebP ve AVIF adaylarını eşit boyut ve görünür kalitede test edin; hedef kitlenin ihtiyaç duyduğu yedekleri koruyun. görüntü optimizasyonu rehberimize bakın.
- Ürün ekran görüntüleri → kodu çözülen pikseller korunacaksa PNG ile başlayın, ardından diğer kayıpsız adayları ve kabul edilebilir kayıplı bir sunum sürümünü karşılaştırın.
SVG ve PNG Arasında Nasıl Dönüştürülür?
Desteklenen dosyaları yazılım kurmadan tarayıcınızda dönüştürebilirsiniz. Vizua seçilen dosyayı tarayıcıda işler ve görüntü işleme sunucumuza göndermez; sayfa hizmetleri yine de ağı kullanabilir:
- SVG’den PNG’ye — desteklenen SVG’yi mevcut bir çıktı ölçeğinde rasterleştirin ve sonucu inceleyin
- Görüntüyü Vektörleştir — desteklenen raster görüntüleri yaklaşık SVG yollarına izler; özgün vektör geometrisini geri getirmez
- Favicon Oluşturucu — desteklenen bir kaynak görüntüden yaygın favicon çıktıları oluşturur
Aday boyutlarına ve sayfaya özel bayt bütçelerine daha geniş bir bakış için görüntü dosyası boyutları rehberine bakın.
Sık Sorulan Sorular
SVG, PNG’nin yerini tamamen alabilir mi?
Hayır. SVG grafikler, simgeler ve illüstrasyonlar için çok uygundur ancak fotoğrafları verimli biçimde temsil edemez. SVG’ye dönüştürülen bir fotoğraf, base64 raster verisi olarak gömülürse çok büyük olur; basitleştirilmiş şekillere izlenirse fotoğraf ayrıntılarını kaybeder. Vektöre uygun içerik için SVG; fotoğraflar ve karmaşık raster görüntüler için PNG, JPEG veya WebP kullanın.
SVG dosyalarını web sitelerinde kullanmak güvenli mi?
SVG; betik, olay işleyici, dış başvuru, bağlantı, CSS, filtre ve başka özellikler içerebilen etkin XML tabanlı içeriktir. Güvenilmeyen SVG’yi kod gibi ele alın: izin verilenler listesine göre doğrulayın, bakımı yapılan bir araçla temizleyin, uygun içerik türü ve yalıtımla sunun, CSP uygulayın. Güvenilir kaynak riski azaltır ancak incelemenin yerini tutmaz.
SVG’m neden bulanık görünüyor?
Vektör geometrisi raster büyütme olmadan farklı boyutlarda yeniden çizilebilir; ancak kesirli hizalama, konturlar, filtreler, dönüşümler, kenar yumuşatma, gömülü raster görüntüler veya ekran SVG’yi yine yumuşak gösterebilir. viewBox değerini, oluşturulan boyutları, kontur davranışını ve raster içeriği inceleyin.
Web sitesi simgeleri için SVG mi, simge yazı tipi mi kullanmalıyım?
Her simgeye açık bir erişilebilir ad verilebildiği veya dekoratifse gizlenebildiği ve stiller sınırlandırılabildiği için SVG çoğu zaman iyi bir seçenektir. Ancak otomatik olarak daha hızlı ya da erişilebilir değildir: satır içi işaretleme HTML’yi büyütür, dış sprite önbelleğe alınabilir ve ARIA doğru uygulanmalıdır. Tek bir kural yerine simge sisteminizin ihtiyaçlarını karşılaştırın.
PNG’yi SVG’ye dönüştürebilir miyim?
Evet. Vizua Görüntüyü Vektörleştir aracı, PNG veya JPEG gibi raster görüntüleri yaklaşık SVG yollarına dönüştürür. En iyi sonucu sınırlı renk paletine ve temiz kenarlara sahip logo, simge ve basit illüstrasyonlarda verir; karmaşık fotoğraflarda değil.
Görüntülerinizi dönüştürün
Hesap gerekmez. Seçilen dosya tarayıcıda işlenir ve görüntü işleme sunucumuza gönderilmez.