# SVG'den PNG'ye Dönüştürücü: Sonsuz Vektörden Evrensel Rastere
SVG (Ölçeklenebilir Vektör Grafikleri) web tasarımı için mükemmel bir seçimdir: sonsuz ölçeklenebilir, hafiftir ve herhangi bir kod düzenleyiciyle düzenlenebilir. Ancak bu logoyu veya simgeyi bir mobil uygulamada kullanmak, sosyal medyada paylaşmak veya bir PowerPoint sunumuna yerleştirmek istediğinizde bir engelle karşılaşırsınız: Bu platformların çoğu SVG'yi desteklemez. PNG formatı evrensel çözümdür: rasterleştirilmiştir, bir alfa kanalına sahiptir ve kesinlikle her bağlamda uyumludur.# SVG mi PNG mi? Web için Vektörler, Dünya için Raster
SVG, görüntüyü matematiksel talimatlar olarak saklar: bir Bézier eğrisi, bir gradyan, bir çokgen. Bu, aynı dosyanın 16 pikselde veya 16.000 pikselde mükemmel görünmesi anlamına gelir. Web kodunuz, CSS animasyonlarınız ve herhangi bir kalite kaybı olmadan farklı ekran çözünürlüklerine uyum sağlaması gereken her öğe için ideal formattır.PNG, görüntüyü her piksel için renk ve şeffaflık bilgilerini içeren bir piksel ızgarası olarak saklar. Kayıpsız (lossless) bir formattır, yani kalite tamamen korunur. Bir SVG, PNG'ye rasterleştirildikten sonra çözünürlük sabittir. Bu nedenle doğru dışa aktarma boyutunu seçmek kritiktir: Aracımız, Retina ve 4K ekranlarda keskinliği sağlamak için çift ölçekte (2 kat) işleme yapar.# Karşılaştırma: Yerel ve Bulut Dönüştürme
Bulut Dönüştürücüler
Dosyalarınızı uzak bir sunucuya yükleyen araçlar.
- SVG kodunuz harici sunuculara gider
- Tutarsız kalitede uzaktan işleme
- Yükleme ve işleme için bekleme süresi
- SVG dosya boyutu sınırlamaları
Yerel Mimarimiz
Vanilla JS teknolojisini kullanarak doğrudan donanımınızda işleme.
- SVG'niz tarayıcınızdan asla ayrılmaz
- Maksimum doğruluk için yerel tarayıcı motoru işlemesi
- Yüksek yoğunluklu ekranlar için 2 kat çözünürlüklü PNG
- Tam alfa kanalıyla korunan şeffaflık
# Teknik Olarak Nasıl Çalışır
Süreç, SVG dosyasının bir JavaScript Image öğesine yüklenmesiyle başlar. Tarayıcı motoru vektör XML'ini ayrıştırıp işledikten sonra, sonuç görüntüsü boyutları orijinal SVG boyutunun iki katı (2 kat ölçek) olan bir HTML5 Canvas üzerine çizilir. Bu, yüksek çözünürlüklü ekranlar için ideal olan, her boyutta iki kat piksele sahip bir PNG üretir.JPG'ye dönüştürmenin aksine, PNG'ye dışa aktarırken tuval tam alfa kanalını korur: Orijinal SVG'deki şeffaf alanlar, sonuçta elde edilen PNG'de tamamen şeffaf pikseller haline gelir — beyaz arka plan dolgusu olmaz. Dışa aktarma işlemi, kayıpsız sıkıştırma iletoDataURL('image/png') yöntemini kullanır.Rasterleştirmeden önce ipucu
PNG dışa aktarma boyutunuzu dikkatli seçin — bir SVG'yi rasterleştirmek tek yönlü bir işlemdir: vektörleri sonuçta elde edilen PNG'den geri kazanamazsınız. Her zaman orijinal SVG'yi ana kaynak olarak tutun ve ihtiyaç duyabileceğiniz en yüksek çözünürlükte PNG'ler oluşturun.# Kullanım Durumları ve Uyumluluk
- PowerPoint veya Google Slides sunumları için vektör logolarını dışa aktarma.
- iOS, Android veya Progresif Web Uygulamaları için PNG simgeleri oluşturma.
- SVG tasarımlarını Instagram, LinkedIn veya diğer sosyal medyalarda paylaşma.
- Vektör illüstrasyonlarını Word belgelerine veya PDF'lere yerleştirme.
- CMS önizlemesi için SVG grafiklerinin PNG küçük resimlerini oluşturma.