SVG'yi PNG'ye Nasıl Dönüştürülür (Ve Ne Zaman Yapmalısınız)

SVG web için mükemmeldir ancak sosyal platformlar, e-posta istemcileri ve birçok baskı hizmeti yerine taramalı bir görüntü ister. SVG'yi PNG'ye dönüştürmek bir dakikanızı alır ve doğru dışa aktarma boyutunu seçerseniz orijinali kadar keskin olur. Bir uyarı: PNG, SVG'ye temiz bir şekilde geri dönmez, bu yüzden orijinal dosyanızı saklayın. Zaten ihtiyacınız olanı biliyorsanız doğrudan SVG'den PNG'ye dönüştürücü sayfasına atlayın; aksi takdirde bu rehber ne zaman dönüştürüleceğini, web, retina ve baskı için hangi piksel boyutunun dışa aktarılacağını ve şeffaf arka planın nasıl korunacağını kapsar.

Bir Dakikada SVG vs PNG

SVG vektörel bir formattır: çizim talimatlarından (yollar ve şekiller) oluşan, herhangi bir boyutta (16px veya 16.000px) net bir şekilde render edilen ve logolar, simgeler ve geometrik sanat eserleri için küçük dosya boyutlarında kalan bir format. Metin düzenleyicilerde düzenlenebilir ve hatta animasyon desteğine sahiptir.

PNG ise taramalı bir formattır: sabit bir piksel ızgarasıdır. Yerel boyutunda keskindir, büyütüldüğünde bulanıklaşır. Gradyanlar, gölgeler ve fotografik detaylar konusunda üstündür ve her yerde öngörülebilir şekilde render edilir.

İnsanların çoğunun yanlış anladığı şey: SVG'yi PNG'ye dönüştürmek dışa aktarma sırasında kalite "kaybına" neden olmaz. Pikseller vektörel matematikten oluşturulur, bu nedenle doğru boyutlandırılmış bir dışa aktarma piksel piksel doğrudur. Gerçek bedel, PNG'nin sonsuza dek tek bir çözünürlüğe kilitlenmesidir.

Genel kural: SVG'yi gerçeklik kaynağınız olarak saklayın ve hedef bir PNG talep ettiğinde her zaman PNG dışa aktarın.

SVG'yi PNG'ye Ne Zaman Dönüştürmelisiniz

Hedef SVG'yi işleyemediğinde dönüştürürsünüz, çünkü PNG daha iyidir diye değil. Pratikte şu durumlar sıkça karşınıza çıkar:

• Sosyal medya. Instagram, X/Twitter, Facebook ve LinkedIn SVG yüklemelerini kabul etmez. Göndermeden önce PNG veya JPG'ye dönüştürün.
• E-posta. Çoğu e-posta istemcisinin sınırlı veya hiç SVG desteği yoktur. Bülten görselleri ve e-posta imzaları için PNG kullanın.
• Favikonlar ve uygulama simgeleri. Modern tarayıcılar SVG favikonları kabul eder ancak Apple dokunma simgeleri ve eski tarayıcılar hala PNG sürümleri gerektirir. Logodan favicon oluşturma hakkındaki rehberimiz bu süreci baştan sona anlatır.
• Baskı hizmetleri. Çok sayıda fotoğraf ürünü baskıcısı (çıkartmalar, kartvizitler, promosyon ürünler) PNG'yi kabul eder ancak SVG'yi kabul etmez.
• Eski yazılımlar ve bazı CMS'ler. Eski araçlar ve belge iş akışları SVG'yi yanlış veya hiç render etmeyebilir; PNG güvenli tercihtir. Office'in bazı sürümleri ve eski belge iş akışları SVG'yi tutarsız şekilde işler.

Ve dönüştürmemeniz gereken yer: web siteleri. Orada SVG her boyutta keskin kalır, CSS ile stillendirilebilir ve animasyon eklenebilir; ayrıca büyük bir PNG'den daha az yer kaplar. Tek hedefiniz kendi sitenizse dönüştürmeyi tamamen atlayın.

Yukarıdaki platform destek noktalarının kaynağı: ConverterUp.

Tool Cloud'da SVG'den PNG'ye Dönüştürme (Adım Adım)

1. SVG'den PNG'ye dönüştürücü sayfasını açın.
2. SVG'nizi yükleyin. Bir seti dönüştürüyorsanız aynı anda birden fazla dosya yükleyebilirsiniz.
3. SVG'yi dönüştürün ve PNG'yi indirin. Tam bir piksel boyutu elde etmek için dönüştürmeden önce genişlik ve yükseklik alanlarını ayarlayın (veya 72 ile 1200 arasında değişen çözünürlük seçeneğini kullanın); ayrıca en-boy oranını koruma anahtarı da mevcuttur. İşleme sonrası yüklenen dosyalar otomatik olarak silinir.

Dönüştürücü açık bir genişlik ve yükseklik aldığından, SVG'nizin görünüm alanıyla uğraşmanıza veya tasarım editöründe hiçbir şeyi yeniden boyutlandırmanıza gerek yoktur: sadece çıktı boyutunu (bir sonraki bölüm) belirleyin ve girin.

Web Aracı Olmadan SVG'yi PNG'ye Dönüştürme

Bu işlem için çevrimiçi bir dönüştürücüye ihtiyacınız yok. Her tasarım aracı PNG'yi doğrudan dışa aktarır:

• Figma, Illustrator, Affinity, Inkscape: dışa aktarma iletişim kutusunu kullanın, PNG'yi seçin ve dışa aktarma boyutunu piksel cinsinden ayarlayın (burada aşağıdaki ölçek çarpanını uyguluyorsunuz). Kaynak dosyanız varsa bu en iyi seçenektir, çünkü metinleri konturlara dönüştürüp istenmeyen arka plan dikdörtgenlerini aynı işlemde kaldırabilirsiniz.
• Bir web sitesinden: SVG'ye (veya bir tarayıcı sekmesinde açıldıktan sonra SVG dosyasının kendisine) sağ tıklayın ve "Görüntüyü farklı kaydet"i kullanın — genellikle SVG alırsınız, bu yüzden oradan dışa aktarın veya dönüştürün.
• Son çare, hiç araç yok: SVG'yi bir tarayıcıda açın, netliğini koruduğu ölçüde yakınlaştırın ve ekran görüntüsü alın. Şeffaflığı destekleyen bir yakalama aracı kullanmadığınız sürece şeffaflığı kaybedersiniz ve kenarlar gerçek bir dışa aktarma kadar temiz olmayacaktır. Hızlı bir taslak için uygundur ancak üretim için değil.

Hangi Piksel Boyutunu Dışa Aktarmalısınız? (Ölçek Çarpanı Rehberi)

SVG'nizin görünüm alanı boyutlarını bir ölçek çarpanıyla çarparak dışa aktarma boyutunuzu seçin: 200×200 görünüm alanına sahip bir SVG, 1x'de dışa aktarıldığında 200×200px PNG verir, 2x'de 400×400px ve 3x'de 600×600px verir. Dönüştürücüde bu aynı matematik, girdiğiniz genişlik ve yükseklik haline gelir. Ardından ölçeği hedefle eşleştirin:

Günlük web simgeleri ve logolar için 2x pratik ideal noktadır: 2x'deki tek bir dosya, standart ekranlarda zarif şekilde küçüldüğü için hem standart hem de retina ekranları kapsar. Bir spesifikasyon gerçekten tek bir sabit boyut talep ediyorsa, eşleşen görünüm alanının 1x'i cevaptır. Baskı için 3x–4x'e gidin; bu, stickerlar veya kartvizitler gibi küçük basılı öğeler için yeterli piksel sağlar, ancak büyük baskılar için orantılı olarak daha fazlası gerekir.

İhtiyacınız olandan daha büyük dışa aktarmanın kalite açısından bir dezavantajı yoktur, çünkü pikseller uzatmadan değil vektörel matematikten gelir. Tek dezavantaj dosya boyutudur ki bu, ölçeğin karesiyle artar: 4x bir PNG, 1x'in on altı katı piksele sahiptir. Bu yüzden boyutu, dosyanın nerede kullanılacağına göre seçin; 'büyük olması daha güvenlidir' mantığıyla değil.

Şeffaflığı koruma (ve beyaz arka plan ne zaman kullanılır)

PNG'nin alpha kanalı, SVG şeffaflığını yerel olarak korur; bu, farklı arka planlar üzerinde durması gereken logolar ve simgeler için tam olarak istediğiniz şeydir. Herhangi bir ölçekle dışa aktarın ve şeffaflık dokunulmadan taşınır.

Ancak burada klasik bir tuzak var. Tarayıcıda bir SVG, aslında arkasındaki sayfayı gördüğünüzde beyaz bir arka plana sahipmiş gibi görünebilir. Dönüştürmeden önce koyu bir arka planda test edin. Şekil hâlâ düzgün okunuyorsa gerçek şeffaflığınız vardır; beyaz bir kutu görüyorsanız, SVG'nizde dahili bir arka plan dikdörtgeni vardır.

Bunun yerine arka planı doldurduğunuz zamanlar: bazı platformlar ve eski araçlar şeffaflığı iyi işlemez. Bu tür yüklemeler için düz bir arka plan (genellikle beyaz) daha güvenli bir tercihtir.

Ve SVG'nizde istemediğiniz bir arka plan dikdörtgeni içeriyorsa, dışa aktarmadan önce tasarım dosyanızda onu kaldırın. Bu bir dönüştürme ayarı değil, tasarım dosyası düzeltmesidir.

SVG dışa aktarmalarını bozan tuzaklar

Çoğu SVG'den PNG'ye dönüştürme işlemi sorunsuz ilerler. Sorun yaşayanlar genellikle şu üç yoldan biriyle başarısız olur:

• Yazı tipleri. SVG metinleri, SVG 1.1 spesifikasyonu'e göre, render işlemini yapan makinede yüklü olan yazı tipleriyle oluşturulur. Rasterleştiricide yazı tipiniz yoksa metin değiştirme ya da bozuk düzen ile karşılaşırsınız. Çözüm basittir: SVG'yi dışa aktarmadan önce tasarım aracınızda metni vektörel dış hatlara dönüştürün. Bu, "logom PNG'de neden yanlış görünüyor?" sorusunun en yaygın nedenidir.
• Kırpma. Bazı dönüştürücüler çıktıyı SVG'nin bildirilen görünüm alanına (viewport) kıyar; SVG içeriği bu alandan taşabilir ve taşan kısımlar kaybolabilir. Dışa aktarmadan önce önemli hiçbir şeyin tuvalin dışında kalmadığından emin olun.
• Özel efektler. SVG filtrelerinin ve gradyanlarının render edilmesi, farklı rasterleştiricilerde değişebilir. Sunucu taraflı rasterleştiriciler bunları tarayıcılardan farklı şekilde işler; örneğin, ImageMagick mümkün olduğunda librsvg'e başvurur, aksi halde daha zayıf dahili bir rasterleştiriciye geçer. Gradyanlar her ölçekte temiz bir şekilde rasterleştirilir (MDN), ancak karmaşık filtre zincirleri tarayıcı önizlemenizden farklı görünebilir. Böyle olursa efektleri basitleştirin veya tasarım aracınızda önceden rasterleştirin.

Bir simge setini toplu dönüştürme

Simge setleri tutarlılık sayesinde ayakta kalır ya da çöker. Karışık boyutlar ya da bazı simgelerin şeffaf arka plana sahip olup diğerlerinin beyaz olması, her bir dosya tek başına sorunlu olmasa bile ürün veya uygulama arayüzünde bozuk görünür.

Bu yüzden baştan iki kararı verin:

1. Tek ölçek. Web için 2x genellikle tercih edilir.
2. Tek arka plan politikası. Genellikle şeffaf, ancak hedef ortam alpha kanalını desteklemiyorsa farklı.

Sonra bunu tüm dosyalara uygulayın. Pratik yol: dönüştürücüye birden fazla SVG'yi aynı anda yükleyip tüm grubu aynı genişlik ve yükseklikte dışa aktarmaktır; dosyaları teker teker dönüştürüp sapmaya izin vermek yerine.

Daha sonra tek bir kaynak SVG'den birden fazla boyuta ihtiyacınız olursa (örneğin 16, 32 ve 512px), her boyutta SVG'den yeniden dışa aktarın veya PNG'yi bir resim boyutlandırıcıdan geçirin — küçük bir PNG'yi büyütmemeye dikkat edin, çünkü bu sadece bulanıklığa yol açar.

Yaygın sorular, tek yerde cevaplandı

SVG'yi PNG'ye dönüştürmek kalite kaybına neden olur mu?

Hayır, doğru boyutta dışa aktarırsanız olmaz. PNG pikselleri vektör matematiğinden üretilir; bu nedenle sonuç, o çözünürlükte SVG kadar keskindir. Tek gerçek kayıp esnekliktir: PNG bir kez belirlenen piksel boyutunda sonsuza dek sabit kalır.

PNG'yi tekrar SVG'ye dönüştürebilir miyim?

Temiz bir şekilde hayır. İzleme (tracing), orijinal yolları geri yüklemez, piksel gridini yaklaşık olarak taklit eder; bu yüzden asla kayıpsız değildir. Düz renkli logolar kabul edilecek düzeyde izlenirken, fotoğraflar ve gradyanlar kötü izlenir. Orijinal SVG'nizi ana dosya olarak saklayın, böylece izlemeye hiç gerek kalmaz.

Hangi arka planı kullanmalıyım?

Farklı arka planlar üzerinde yer alacak her şey için şeffaf; PNG'nin alpha kanalı bunu yerel olarak destekler. Sadece hedef ortam şeffaflığı desteklemiyorsa katı bir arka plan (genellikle beyaz) doldurun.