SVG'den PNG'ye Dönüştürmede Şeffaflık Sorunlarını Giderme

Bu rehber, SVG'den PNG'ye dönüştürme sonuçlarındaki sorunları belirlemeye odaklanır. Temel dönüştürme adımları için SVG dosyasını şeffaf arka planla dönüştürme rehberini kullanın.

Beyaz Arka Plan Her Zaman Şeffaflığın Kaybolduğu Anlamına Gelmez

PNG dosyasını şeffaflığı gösteren bir düzenleyicide açın veya renkli bir arka planın üzerine yerleştirin. Görüntüleyici, şeffaf piksellerin arkasını yalnızca beyaz gösteriyor olabilir. Beyaz alan görselin bir parçası olarak kalıyorsa SVG dosyasında opak bir arka plan dikdörtgeni, dolgulu bir şekil veya gömülü raster görsel olup olmadığını kontrol edin.

SVG'den PNG'ye dönüştürücü bu nesneleri kaldırmaz. Mümkünse kaynak SVG dosyasını düzenleyin. Raster bir görseli arka planından ayırmak için kullanılan Şeffaf arka plan oluşturucu ise sonucu ayrıca incelenmesi gereken ayrı bir işlemdir.

Etkinleştirmeniz Gereken Bir Şeffaflık Seçeneği Yoktur

Bu dönüştürücü tek bir SVG okur; piksel cinsinden genişlik, yükseklik ve PNG sıkıştırması sunar. Mevcut şeffaf alanlar, Şeffaflığı Koru veya Alfa Kanalı onay kutusuna gerek olmadan şeffaf kalabilir. Araçta arka plan rengi silici veya PNG-8/PNG-24 modu seçicisi yoktur.

Kenarları ve Eksik Öğeleri İnceleyin

Özel Durumlar

Her SVG görüntüleme motorunun aynı pikselleri ürettiğini varsaymak yerine indirilen PNG dosyasında her efekti kontrol edin. Gömülü bir fotoğrafın kaynak görseli düzenlenmedikçe kendi opak arka planı korunur. Bir vektör yolunun opaklık değeri, altındaki beyaz dikdörtgeni kaldıramaz.

Gömülü Raster Görseller İçeren SVG Dosyaları

SVG raster görseller içeriyorsa:

• Raster bölümler orijinal şeffaflığını korur
• Vektör bölümler normal biçimde dönüştürülür
• Gömülü görsellerin şeffaflık içerdiğini doğrulayın

Karmaşık Şeffaflık Efektleri

Şunları içeren SVG dosyalarında:

• Bulanıklaştırma efektleri
• Düşen gölgeler
• Karışım modları

Dönüşüm farklı sonuçlar verebilir. Test edin ve gerektiğinde ayarlayın.

Yarı Şeffaf Öğeler

Opaklık değerleri içeren SVG dosyalarında:

• Dosya boyutu artabilir
• Dönüşümden sonra görsel doğruluğu kontrol edin

Şeffaflığı Test Etme

Bu kontrolleri indirilen PNG dosyasına uygulayın. Orijinalin içine çizilmiş dama deseni normal görsel içeriğidir; görüntüleyicinin dama deseni ise bir gösterim yardımcısıdır. İkisini ayırt etmek için en az iki farklı renk üzerinde karşılaştırın. HTML örneğini kendi test sayfanızda kullanın.

Hızlı Test Yöntemi

1. PNG dosyasını bir görsel düzenleyicide açın
2. Dama desenli arka planı arayın (şeffaflık göstergesi)
3. Arkasına renkli bir katman ekleyin
4. Grafiğin doğru göründüğünü doğrulayın

Tarayıcı Testi

<div style="background: linear-gradient(45deg, #333, #666)">
  <img src="your-graphic.png" alt="Şeffaflık testi">
</div>

Beyaz bir kutu görünmediğinden emin olun.

Şeffaf PNG Dosyasını Optimize Etme

Gerçekten ihtiyaç duyulan boyutlarla başlayın. Kayıpsız PNG sıkıştırması, hangi piksellerin şeffaf olduğunu değil, kodlama için harcanan işlem miktarını değiştirir. Başka bir düzenleyicide renk paletini azaltmak dosya boyutunu küçültebilir, ancak renk geçişlerini ve yumuşak kenarları değiştirebilir. Boyutları değiştirmek pikselleri kaldırır veya yeniden örnekler.

Orijinal boyutlu bir kopya saklayın, her seferinde tek bir ayarı değiştirin ve indirilen dosyaları karşılaştırın. Her optimizasyondan sonra kenarları açık ve koyu arka planlarda inceleyin. Her grafikte geçerli olan sabit bir %20–50 veya %40–80 tasarruf yoktur. Kullanılacağı yer WebP kabul ediyorsa birinin her zaman daha küçük olduğunu varsaymak yerine ayrı bir WebP çıktısını PNG ile karşılaştırın.

Her Seferinde Tek Bir Değişikliği Karşılaştırın

Orijinal SVG dosyasını saklayın, yalnızca bir kaynak özelliğini veya çıktı boyutunu değiştirin ve yeni PNG dosyasını açık ve koyu arka planlarda karşılaştırın. Boyut alanları, her kenar için en fazla 8192 px kabul eder. Sıkıştırma, alfa düzeyini veya görsel kalitesini değil, PNG kodlaması için harcanan işlem miktarını değiştirir.

Boyutları ve Kenar Boşluklarını Alfa Kanalından Ayrı Kontrol Edin

Şeffaf bir logo, nesne tuvalin içinde çok küçük kaldığı için yine de yanlış görünebilir. SVG dosyasının viewBox değerini ve çizimin konumunu kaynak düzenleyicide inceleyin. Kenar boşluklarını orada ekleyin veya kaldırın; dönüştürücünün genişlik ve yükseklik alanları, görseli bir sınırlayıcı kutu içinde yeniden boyutlandırır ve tuval kenar boşluklarını düzenleme aracı sunmaz.

2× ekran görseli için amaçlanan görüntüleme boyutlarının iki katını hesaplayın ve aynı oranları koruyun. Her boyutu ayrı ayrı dışa aktarın ve inceleyin. logo@2x.png gibi bir dosya adı, ek ayrıntı oluşturan bir ayar değil, bir adlandırma kuralıdır.

<img src="logo.png" srcset="logo@2x.png 2x" alt="Şirket logosu">

Her iki dosya da web sitenizde bulunmalıdır. Gerçekte görüntülenen boyutu ve arka planı test edin; bu işaretleme iki görsele de şeffaflık eklemez. Logo her iki boyutta da hale içeriyorsa sürekli büyütmek yerine kaynak kenarlarını kontrol etmeye dönün.

Sık Sorulan Sorular

Daha güçlü sıkıştırma şeffaf kenarları düzeltir mi?

Hayır. Kaynak çizimi ve piksel boyutlarını kontrol edin. Sıkıştırma, kenar düzeltme ayarı değildir.

Burada bir düzeltmeyi tüm klasöre uygulayabilir miyim?

Hayır. Sayfa, her görevde tek bir SVG alır. Kaynak düzeltmelerini bir düzenleyicide hazırlayın, ardından her dosyayı ayrı ayrı dönüştürüp inceleyin.