SVG hakkında yazılanların çoğu onu över: keskin, küçük, esnek. Doğru da. Ama bu övgü, formatı her yerde kullanma hevesine dönüşünce sorunlar çıkıyor. Bir müşterimiz bir kez bütün sitedeki fotoğrafları SVG’ye çevirtmeye çalışmıştı; “vektör her zaman iyidir” diye düşünmüştü. Sonuç, dört kat büyük dosyalar ve bozuk görünen portreler oldu.
Bir aracı iyi kullanmak, ne zaman kullanmayacağını bilmekten geçiyor. Aşağıda SVG’nin yanlış seçim olduğu altı durumu ve her birinde ne kullanılacağını sıralıyoruz.
1. Fotoğraflar
Fotoğraf, milyonlarca renk ve yumuşak geçişten oluşuyor. SVG’nin çalışma mantığı ise net şekiller ve düz renkli alanlar üzerine kurulu. Bir fotoğrafı SVG’ye “izleme” yöntemiyle çevirdiğinizde ya çok kaba, resim gibi değil illüstrasyon gibi bir görüntü elde edersiniz ya da o kadar çok küçük şekil üretilir ki dosya yüzlerce kilobayta, hatta megabayta çıkar.
Ne kullanmalı: JPG ya da modern WebP/AVIF. Fotoğraf sıkıştırma için tasarlanmış bu formatlar, aynı kaliteyi çok daha küçük dosyayla sunuyor.
2. E-posta imzaları ve bültenler
E-posta istemcileri SVG konusunda tutarsız. Bazıları görüntülüyor, bazıları güvenlik sebebiyle engelliyor, bazıları hiç desteklemiyor. İmzanızdaki logo alıcının tarafında kırık bir kutu olarak görünürse, markanızın ilk izlenimi bozulur.
Ne kullanmalı: PNG. Retina ekranlar için logoyu görüntülenecek boyutun iki katı çözünürlükte hazırlayıp küçültülmüş genişlikle yerleştirin. Genişliği örneğin 200 piksel olacaksa dosyayı 400 piksel yapın.
3. Sosyal medya profil ve paylaşım görselleri
Instagram, Facebook, LinkedIn ve benzeri platformlar yüklenen görselleri kendi sistemlerinde işliyor ve çoğu SVG dosyası kabul etmiyor. Bağlantı paylaşımlarında görünen küçük önizleme görselleri de aynı şekilde PNG ya da JPG bekliyor.
Ne kullanmalı: Platformun önerdiği boyutta PNG ya da JPG. Profil fotoğrafı için kare ya da yuvarlak kırpmaya uygun sade bir sürüm hazırlayın; yatay ve uzun logoyu yuvarlak alana sığdırmak okunurluğu bozuyor.
4. Çok karmaşık illüstrasyonlar
Binlerce küçük yol, gradyan ve gölge içeren bir çizim SVG olarak kaydedildiğinde hem büyük hem yavaş oluyor. Tarayıcı her şekli tek tek çizmek zorunda ve düşük güçlü telefonlarda sayfa takılabiliyor. Detaylı bir harita, kalabalık bir sahne ya da fotogerçekçi bir illüstrasyon bu gruba giriyor.
Ne kullanmalı: Sıkıştırılmış PNG ya da WebP. Ya da illüstrasyonu sadeleştirip SVG’de tutmak; bazen tasarımı basitleştirmek, hem hızı hem görüntüyü iyileştiriyor.
5. Baskıya doğrudan giden dosyalar
Baskı, CMYK renk uzayı ve bazen özel mürekkep gerektiriyor. SVG ekran için tasarlanmış; renk yönetimi ve baskı işaretleri gibi baskıya ait bilgiler taşımıyor. Matbaacıya SVG göndermek çoğu zaman “bunu PDF’e çevirebilir misiniz?” cevabı getiriyor.
Ne kullanmalı: Baskıya uygun PDF, EPS ya da AI. Yine vektör ama baskı için hazırlanmış. Baskı dosyalarının hazırlık ayrıntıları için marka rehberini matbaaya nasıl verirsiniz yazımıza bakabilirsiniz.
6. Güvenilmeyen kaynaklardan gelen dosyalar
SVG, kod içerebilen bir format. Kullanıcıların yüklediği SVG dosyalarını (örneğin bir forumda profil resmi olarak) kontrolsüz yayınlamak, güvenlik riski taşıyor. Tanımadığınız kaynaktan indirdiğiniz bir SVG’yi sitenize doğrudan koymayın; bir geliştiriciye temizletin.
Ne kullanmalı: Kullanıcı yüklemelerinde PNG ya da JPG kabul edin; SVG’yi yalnızca kendi ekibinizin ürettiği dosyalarda kullanın. Site yönetim panelinizde SVG yüklemesi varsayılan olarak kapalıysa, bu bilinçli bir güvenlik kararıdır.
Gri alan: ikonlar ve küçük illüstrasyonlar
Tüm bu uyarılara rağmen bazı durumlar netleşmiyor. Örneğin bir sitede kırk tane küçük ikon varsa, her biri ayrı SVG dosyası olarak yüklenirse kırk ayrı istek demektir. Bu, hızı düşürebilir. Böyle durumlarda ikonları tek bir “sprite” dosyasında toplamak ya da inline yapmak mantıklı olabilir. Bunlar teknik ayrıntılar ama sonuç basit: SVG’nin doğru olduğu bir yerde bile, nasıl kullanıldığı önemli.
Bir başka gri alan, gradyanlı logolar. SVG gradyanı destekliyor ama karmaşık gradyanlar bazı tarayıcılarda farklı görünebiliyor. Logonuz güçlü gradyanlar içeriyorsa, farklı tarayıcı ve cihazlarda görsel kontrol yapın. Sorun çıkarsa gradyanı sadeleştirmek ya da o kullanımda PNG sürümüne başvurmak çözüm olabilir.
Yanlış kararın maliyeti
SVG’yi yanlış yerde kullanmanın maliyeti çoğu zaman görünmez. Kırık görünen bir e-posta imzası, yüklenmeyen bir sosyal medya görseli, yavaşlayan bir sayfa; bunların hiçbiri bir hata mesajı vermiyor, sadece izlenimi zedeliyor. Yanlışlık fark edilene kadar haftalar geçebiliyor. Bu yüzden logo dosyalarınızı teslim alırken bir de kullanım notu isteyin: hangi dosya nerede kullanılacak? Tek sayfalık bu not, bu tür sessiz kayıpları önlüyor.
Özet tablo
| Durum | SVG uygun mu? | Alternatif |
|---|---|---|
| Logo, ikon, basit çizim (web) | Evet | – |
| Fotoğraf | Hayır | JPG / WebP |
| E-posta imzası | Hayır | PNG (2x) |
| Sosyal medya görselleri | Hayır | PNG / JPG |
| Çok karmaşık illüstrasyon | Genelde hayır | WebP / PNG |
| Matbaa | Hayır | PDF / EPS |
| Kullanıcı yüklemesi | Hayır | PNG / JPG |
Örnek: bir restoranın dosya seti
Bir restoranın logo paketi şöyle olabilir: web sitesi için renkli ve beyaz SVG, menü baskısı için CMYK ayarlı PDF, e-posta imzası için 2x PNG, sosyal medya profil görseli için kare PNG, tarayıcı simgesi için küçük PNG ya da ICO. Aynı logo, beş farklı dosyada ve her biri kendi işine göre. Bu set bir kez hazırlandığında “hangi dosyayı nerede kullanayım?” sorusu ortadan kalkıyor.
Bu dosya setini elinize teslim eden bir tasarımcı işini tam yapmıştır. Yalnızca “logo.png” gönderen biri ise işin yarısını size bırakmıştır. Logo dosyalarında hangi formatın ne işe yaradığını daha temelden anlamak için SVG’nin PNG ve JPG’den farkını anlattığımız yazıya bakabilirsiniz.
SVG’yi bırakmak zorunda mısınız?
Hayır; bu yazı SVG’ye karşı değil, doğru yerde kullanılmasından yana. Web sitenizdeki logo, ikonlar ve basit illüstrasyonlar için hâlâ en iyi seçenek. Sorun, bir formatı dogma hâline getirmek. “Her şey SVG olsun” ile “SVG hiç kullanmayalım” aynı derecede yanlış. Her görselin işine bakın: bu görsel nerede görünecek, kim görecek, hangi cihazda?
Web sitenizdeki görsellerin hangi formatta olduğundan emin değilseniz, sitenizi hız ve içerik açısından gözden geçirmek isterseniz iletişim sayfamızdan yazabilir ya da 0540 022 64 22 numarasına WhatsApp’la ulaşabilirsiniz. Görsel dosyalarınızı listeleyip hangilerinin format değişikliğiyle küçüleceğine birlikte bakalım.