SVG nedir?
SVG (Scalable Vector Graphics), W3C'nin geliştirdiği ve ilk sürümü 2001'de standart olarak yayımlanan bir vektör grafik formatıdır. Bir SVG dosyası pikselleri değil, belirli bir koordinatta belirli renkte bir daire gibi şekil tanımlarını içerir. Bu tanımlar XML tabanlı düz metindir; bir metin düzenleyicide açıp okuyabilirsin.
Görüntü ekrana çizildiği anda istenen boyuta göre yeniden hesaplandığı için SVG, 16 piksellik bir simgede de dev bir afişte de aynı keskinlikte görünür. PNG ve JPG gibi piksel tabanlı (raster) formatlar ise büyütüldüğünde pikselleşir ya da bulanıklaşır.
Güçlü yanları
- Her boyutta keskin: Büyütüldüğünde pikselleşme olmaz; yüksek yoğunluklu ekranlarda da nettir.
- Basit grafiklerde küçük dosya: Logolar, simgeler ve düz çizimler çoğu zaman birkaç kilobayt tutar.
- Düzenlenebilir: Renkler ve şekiller kodla ya da CSS ile değiştirilebilir; aynı simge farklı renklerde kullanılabilir.
- Tarayıcı desteği: Güncel tarayıcıların tamamı SVG'yi doğrudan gösterir.
Zayıf yanları
- Fotoğraflar için uygun değil: Bir fotoğraftaki sayısız renk geçişini şekillerle tanımlamak verimsizdir.
- Karmaşık çizimlerde ağırlaşır: Çok sayıda şekil içeren SVG'ler hem büyür hem de yavaş çizilir.
- Yükleme kısıtları: SVG içinde betik bulunabildiği için birçok platform ve form SVG yüklemeyi kabul etmez.
- Dış kaynaklar: SVG'nin kullandığı yazı tipi ya da bağlantılı görseller başka bir cihazda bulunmayabilir.
Ne zaman kullanmalısın?
Logolar, simgeler, diyagramlar ve düz renkli çizimler için, özellikle web sitelerinde, SVG çok uygundur. Fotoğraflar için JPG, WebP veya AVIF kullan. Bir platform ya da program SVG kabul etmiyorsa dosyayı ihtiyacın olan çözünürlükte PNG'ye çevirmen gerekir. Site simgesi hazırlıyorsan favicon nasıl yapılır rehberi işine yarar.
Nasıl açılır ve dönüştürülür?
SVG dosyasını herhangi bir tarayıcıya sürükleyerek görüntüleyebilirsin. Dönüştürmek için:
- SVG → PNG: SVG'yi PNG (şeffaflık korunur), JPG ya da WebP'ye çevirir. SVG'nin kendi boyutunun 1, 2, 4 veya 8 katını seçebilir ya da piksel cinsinden özel bir genişlik girebilirsin; yükseklik orana göre hesaplanır. Genişlik ve yükseklik bilgisi olmayan SVG'ler 1024 piksel olarak çizilir. Tarayıcı güvenliği nedeniyle SVG'nin dışarıdan çağırdığı yazı tipleri ve görseller çıktıda görünmeyebilir.
- ICO oluştur: Logodan Windows veya site simgesi yapar.
- Favicon paketi: Siten için gereken simge boyutlarını ve HTML kodunu tek seferde üretir.
Dönüştürme tarayıcında yapılır; dosyan bir sunucuya yüklenmez.
Sık sorulan sorular
SVG'yi PNG'ye çevirirken hangi boyutu seçmeliyim?
Görseli kullanacağın en büyük boyutu düşün; yüksek yoğunluklu ekranlar için bunun iki katı iyi bir başlangıçtır. Sonradan daha büyük bir PNG gerekirse eldeki PNG'yi büyütmek yerine yeniden SVG'den üretmek her zaman daha net sonuç verir.
SVG'deki yazı tipi PNG'de neden farklı görünüyor?
SVG, yazıyı cihazda bulunan bir yazı tipiyle çizer. Kullandığın yazı tipi tarayıcıda yoksa yerine başka bir yazı tipi kullanılır. Tasarım programında yazıları şekle (outline) çevirip dışa aktarmak bu sorunu önler.
Fotoğrafı SVG'ye çevirebilir miyim?
Bu sitede böyle bir araç yok. Fotoğrafı vektöre çevirmek, şekilleri tahmin eden ayrı bir işlem gerektirir ve sonuç genellikle fotoğraf gibi görünmez; daha çok çizim ya da poster etkisi verir.