SVG mi PNG mi? Logo, retina ve vektörün kırıldığı yerler

Vektör vs raster (bir cümleyle)

SVG şekilleri matematiksel olarak tarif eder: çizgi, eğri, dolgu. Büyütünce yeni pikseller hesaplanır; kenar keskin kalır. PNG sabit bir piksel ızgarasıdır. Büyütünce mevcut pikseller şişer; yumuşama veya tırtık görünür.

Logo ve ikonlar

Düz renkli, az detaylı marka işareti ve UI ikonu için SVG (veya en azından vektör kaynak) doğru varsayılandır: favicon’dan billboard’a aynı dosya mantığı ölçeklenir, dosya küçük kalır, koyu/açık temada CSS ile renk değişimi kolaydır.

Karmaşık illüstrasyon, gölge yığınları veya fotoğrafik doku için raster çoğu zaman daha öngörülebilirdir. Aşırı karmaşık SVG dosyaları hem boyutu hem uyumluluğu zorlaştırabilir.

Retina ve ekran yoğunluğu

PNG kullanıyorsanız 1x ve 2x (hatta 3x) varlıklar veya tek yüksek çözünürlük + CSS ile küçültme gerekir. Aksi halde telefonlarda logo yumuşak görünür. SVG’de bu sorun pratikte yoktur: tarayıcı cihaz piksel oranına göre çizer.

SVG’yi PNG’ye çevirirken retina için hedef CSS genişliğinin 2× pikselini seçin. Örnek: sitede logo 120px genişlikteyse dışa aktarım 240px (veya daha fazla) olsun. “SVG viewBox 24 birim” ile “PNG 24 piksel” aynı şey değildir — birimler karışmasın.

SVG ne zaman bozulur?

• Filtreler ve efektler. feGaussianBlur, karmaşık maskeler, bazı blend modları tarayıcıdan tarayıcıya veya rasterleştiricide farklı sonuç verir. Tasarım aracındaki görünüm ≠ web.
• Harici fontlar. Metin SVG içindeyse ve font yüklenmezse yedek fontla metin kayar. Kritik logoda metni path’e çevirmek yaygındır.
• Gömülü raster. SVG içine base64 PNG koymak “vektör” yanılsaması yaratır; büyütünce o gömülü kısım yine bozulur.
• E-posta ve ofis. Birçok e-posta istemcisi ve Word/PPT SVG’yi zayıf destekler. Paylaşım için PNG/JPG şart olabilir.
• Güvenlik politikaları. Bazı ortamlar inline SVG’yi kısıtlar; o zaman PNG daha az sürprizlidir.

Dışa aktarım boyutu nasıl seçilir?

1. Nerede kullanılacak? (favicon 32–48, navbar ~120–200 CSS px, App Store ikonu sabit px.)
2. Retina çarpanı ekle (web UI için genelde ×2).
3. Şeffaflık gerekiyorsa PNG; düz foto arka planı yoksa JPG düşünme.
4. Çıktıyı gerçek boyutta ( %100 zoom) kontrol et; %400 zoom ile “keskin” sanıp dosyayı şişirmeyin.

Kaynak her zaman vektör (SVG/AI) kalsın; PNG türevdir. Türevi kaybedebilirsiniz, kaynağı kaybetmeyin.

Hızlı karar

• Web sitesi / uygulama ikonu, ölçeklenebilir marka → SVG.
• E-posta imzası, Word, WhatsApp’a “logo at” → PNG.
• Filtreli, efektli, fotoğraflı kompozisyon → dikkatli SVG veya doğrudan PNG.
• Hem SVG hem PNG üretmek normaldir; tek format zorlamayın.