Logo tasarımcısından dosyaları istediniz, klasörde “logo.svg” adında bir dosya var. Çift tıkladınız, tarayıcı açıldı ve içinde logonuz göründü. Bunu Word’e sürüklediniz, çalışmadı; e-posta imzasına eklemek istediniz, olmadı. “Bu dosya neydi ki?” sorusu çok sık geliyor.
SVG’yi anlamak için önce bir görselin bilgisayarda iki farklı biçimde saklanabildiğini bilmek gerekiyor: piksel olarak ya da çizgi olarak. Bu fark, dosyanın ne kadar büyütülebileceğini, ne kadar yer kaplayacağını ve nerede kullanılabileceğini belirliyor.
Piksel nedir?
PNG ve JPG “piksel tabanlı” formatlar. Görüntü, küçük renkli karelerden oluşan bir ızgara. 1000 piksel genişliğinde bir fotoğrafta her karenin rengi ayrı ayrı kaydedilmiş. Bu, fotoğraf gibi karmaşık, tonlarla dolu görüntüler için ideal. Ama bir sorun var: görüntüyü büyüttüğünüzde kareler de büyüyor ve kenarlar tırtıklı, bulanık görünmeye başlıyor.
Küçük bir logoyu büyük bir tabelaya basmayı denediyseniz bu bulanıklığı görmüşsünüzdür. Piksel bilgisi büyütme sırasında yeniden üretilemiyor; bilgisayar ara pikselleri tahmin ediyor ve sonuç yumuşak, net olmayan bir görüntü.
Vektör nedir?
SVG, “vektör” formatı. Görüntü kareler değil, matematiksel tarifler olarak saklanıyor: “buradan şuraya bir eğri çiz, içini bu renkle doldur.” Bu yüzden logoyu ister bir kartvizit boyutuna küçültün, ister bir bina cephesi kadar büyütün, kenarlar keskin kalıyor. Bilgisayar her seferinde tarifi yeni boyuta göre yeniden çiziyor.
SVG’nin açılımı “Scalable Vector Graphics”, yani ölçeklenebilir vektör grafiği. Adı işini söylüyor. Aynı çalışma prensibi AI, EPS ve PDF (vektör içerikli) formatlarında da geçerli; SVG bunlardan web için tasarlanmış olanı.
Yan yana karşılaştırma
| Özellik | JPG | PNG | SVG |
|---|---|---|---|
| Yapı | Piksel | Piksel | Vektör |
| Büyütünce | Bulanıklaşır | Bulanıklaşır | Keskin kalır |
| Şeffaf arka plan | Yok | Var | Var |
| Fotoğraf için | En uygun | Uygun | Uygun değil |
| Logo ve ikon için | Zayıf | İyi | En iyi |
| Dosya boyutu (logoda) | Orta | Orta | Genelde çok küçük |
| Rengi kodla değiştirme | Hayır | Hayır | Evet |
Bu tabloda görüldüğü gibi, SVG her yerde kazanmıyor. Fotoğraflar için hâlâ JPG (ya da modern WebP) daha mantıklı. Ama logo, ikon, basit çizim ve grafikte SVG rakipsiz.
Şeffaf arka plan meselesi
PNG’nin de şeffaf arka planı var, o zaman neden SVG? Çünkü PNG’nin şeffaflığı, belirli bir çözünürlükte geçerli. 500 piksel genişliğindeki şeffaf PNG’yi bir afişe büyütürseniz kenarları yine bulanık olur. SVG’de şeffaflık vektörel; her boyutta temiz kenar sağlıyor.
Bir de yan yana kullanım var: logonuzun beyaz sürümünü koyu bir zemine, renkli sürümünü açık zemine koymak istiyorsunuz. SVG’de bu sürümler tek dosyadan renk değişimiyle üretilebiliyor; PNG’de her sürüm ayrı dosya olmak zorunda.
Dosya boyutu avantajı
Bir logo düşünün: birkaç şekil, bir iki renk. PNG bunu piksel piksel kaydettiğinde onlarca kilobayt tutabilir; SVG ise şekil tariflerini tuttuğu için genellikle birkaç kilobayt. Web sitenizin başlığındaki logo bu yüzden hız açısından fayda sağlıyor. Yüzlerce sayfası olan bir sitede bu tasarruf toplandığında fark hissediliyor.
Ancak SVG’nin de bir sınırı var: çok karmaşık, binlerce ayrıntılı çizimde dosya boyutu artabiliyor. Fotoğrafı SVG’ye çevirmeye kalkmak (izleme) hem büyük hem kötü sonuç verir.
Ne zaman hangisi?
Karar vermek için basit bir kural: görsel bir fotoğraf mı, çizim mi?
- Fotoğraf: JPG ya da WebP.
- Şeffaflık gereken piksel görsel (ekran görüntüsü, bir ürünün arka planı silinmiş hâli): PNG.
- Logo, ikon, basit illüstrasyon, grafik: SVG.
- Baskı için gönderilecek logo: SVG, PDF ya da EPS gibi vektör dosya.
- E-posta imzası: PNG (çoğu e-posta programı SVG’yi desteklemiyor).
Son madde önemli: SVG evrensel değil. Word, PowerPoint’in bazı sürümleri ve e-posta istemcileri SVG’yi düzgün göstermeyebilir; bu durumlarda aynı logonun PNG karşılığını kullanın. Logo dosya setinizde bu yüzden hem SVG hem PNG bulunmalı.
Sık karşılaşılan bir yanılgı: “PNG’yi SVG’ye çevirdim”
İnternette “PNG’yi SVG’ye çevir” diyen çok sayıda ücretsiz araç var. Bu araçlar çoğunlukla ya PNG’yi SVG kabuğunun içine gömüyor ya da otomatik izleme (trace) yapıyor. Gömme durumunda dosya adı SVG ama içeriği hâlâ piksel; büyütünce yine bulanıklaşıyor. Otomatik izlemede ise eğriler yaklaşık çıkıyor; ince yazılar bozuluyor, köşeler yuvarlanıyor. Basit, tek renkli ve büyük şekilli logolarda sonuç idare eder, ama ayrıntılı bir logoda kötü bir kopya elde edersiniz.
Doğru yol, logoyu bir tasarımcıya yeniden çizdirmek. Bu, otomatik dönüştürmeden daha pahalı görünse de tek seferlik bir iş ve sonrasında yıllarca sorunsuz kullanılan bir dosya seti veriyor.
Baskıda SVG mi PDF mi?
Matbaacılar genellikle PDF, EPS ya da AI dosyası ister; SVG, web odaklı olduğu için matbaa tarafında yaygın değil. Bunun sebebi, baskıda CMYK renk ve özel mürekkep (Pantone) bilgisinin gerekmesi; SVG ise ekran renk uzayında (RGB) çalışıyor. Bu yüzden “SVG’m var, matbaaya yeter” düşüncesi yanlış. Baskı için ayrı bir vektör dosya (CMYK ayarlı PDF) hazırlatın. Logo paketinizde hem web hem baskı sürümlerinin bulunması, ileride dosya arama derdinden kurtarıyor.
Bir SVG’nin içine bakmak
SVG aslında bir metin dosyası. Not Defteri ile açarsanız, içinde şekilleri tarif eden kodlar görürsünüz: renk kodları, yol koordinatları. Bu, geliştiricilerin SVG’yi doğrudan web sayfasının içine yazabilmesini sağlıyor. Renk değiştirme, animasyon, tıklanabilir alanlar ekleme gibi olanaklar bu yapıdan geliyor. Ayrıntısıyla ilgilenmeniz gerekmiyor ama dosyanın “bir görüntü değil bir tarif” olduğunu bilmek faydalı.
Ayrıca SVG dosyasının içine yanlışlıkla gömülü bir piksel görüntü olabiliyor: bazı programlar bir PNG’yi SVG kabuğunun içine koyup “SVG” diye kaydeder. Böyle bir dosya büyütünce yine bulanık çıkar. Dosyanın gerçek vektör olup olmadığını anlamak için tarayıcıda açıp iyice yakınlaştırın; kenarlar keskin kalıyorsa gerçek vektör.
Logo tasarımı sipariş ederken ne istemelisiniz?
Bir tasarımcıdan logo alırken şu dosyaları talep edin: renkli SVG, tek renkli (siyah ve beyaz) SVG, şeffaf PNG (birkaç boyutta), PDF ve mümkünse EPS. Yalnızca PNG ve JPG içeren bir teslim eksiktir; bu dosyalardan vektör üretmek zordur ve maliyet çıkarır. Vektör dosyanın önemine dair logo tasarımında SVG formatının önemi ve vektörel logo nedir yazılarımıza da bakabilirsiniz.
Elinizde yalnızca PNG logo varsa ve vektörel hâline ihtiyacınız varsa, yeniden çizim gerekebilir. Bu, çoğu zaman hızlı ve uygun bir iş. Logo dosyalarınızı düzene sokmak için iletişim sayfamızdan bize yazabilir ya da 0540 022 64 22 numarasından WhatsApp’la ulaşabilirsiniz; elinizdeki dosyaya bakıp ne yapılabileceğini söyleyelim.