Bir logoyu büyütmeye çalışıp görselin bulanıklaşıp piksellendiğini gördüyseniz bu sorunun ne kadar can sıkıcı olduğunu bilirsiniz. SVG tam olarak bunu çözmek için var. JPG ve PNG'den bütünüyle farklı çalışan bir görsel formatı ve bu farkı anlamak, her durumda doğru formatı seçmenin anahtarı.
SVG ne anlama geliyor?
SVG, Scalable Vector Graphics yani "ölçeklenebilir vektör grafikleri" anlamına gelir. HTML ve CSS özelliklerini belirleyen W3C tarafından standartlaştırılmış açık bir görsel formatıdır ve bütün modern tarayıcılarda yerel olarak desteklenir.
Görselleri renkli piksellerden oluşan bir ızgara olarak saklayan JPG ve PNG'nin aksine SVG, görseli metin biçiminde tanımlar; biçimleri, çizgileri, eğrileri ve renkleri matematiksel koordinatlarla anlatır. Bir SVG dosyası pratikte bir metin dosyasıdır — herhangi bir kod düzenleyicide açılıp düzenlenebilir.
SVG içeride nasıl çalışır?
SVG dosyaları, HTML'e benzer bir işaretleme dili olan XML ile yazılır. Örneğin SVG'de kırmızı bir daire şöyle tanımlanır:
Tarayıcı bu matematiksel talimatları okur ve pikselleri anlık olarak hesaplayarak görseli doğrudan ekrana çizer. SVG'nin 16x16 piksellik bir favicondan 10 metrelik bir bilbora kadar her boyutta, hiçbir kalite kaybı olmadan görüntülenebilmesinin nedeni budur.
SVG'nin avantajları neler?
- Kalite kaybetmeden ölçeklenir: dilediğiniz kadar büyütün ya da küçültün — görsel her çözünürlükte, Retina ve 4K ekranlar dahil, net kalır.
- Hafif dosyalar: SVG'deki yalın logolar ve ikonlar, özellikle büyük boyutlarda, PNG hâllerinden çok daha küçük olur.
- Kodla düzenlenebilir: renkleri, boyutları ve animasyonları görsel düzenleyiciye gerek kalmadan doğrudan CSS veya JavaScript ile değiştirebilirsiniz.
- Arama motorları tarafından dizine eklenir: içerik metin olduğu için Google, bir SVG'nin içindeki metni okuyup dizine ekleyebilir.
- Animasyon desteği: GIF ya da videoya ihtiyaç duymadan, doğrudan SVG içinde CSS ve SMIL animasyonları oluşturabilirsiniz.
- Erişilebilirlik: ekran okuyucular için SVG'ye başlık ve açıklama eklenebilir.
SVG'nin sınırları neler?
- Fotoğraflar için uygun değil: fotoğraflarda milyonlarca renk değişimi ve karmaşık gradyan bulunur. Bunları vektörle anlatmak devasa ve verimsiz dosyalar üretir — fotoğraflarda doğru seçim her zaman JPG.
- Karmaşık görseller ağırlaşır: çok sayıda biçim ve gradyan içeren ayrıntılı çizimler, büyük ve ekrana çizilmesi yavaş SVG'ler üretebilir.
- Elle düzenlemenin bir öğrenme eğrisi var: SVG'yi doğrudan kod üzerinden düzenlemek XML ve vektör matematiği bilgisi gerektirir. Illustrator veya Figma gibi araçlar bu işi kolaylaştırır.
💡 Pratik kural: logolar, ikonlar, çizimler, grafikler, haritalar ve birden çok boyutta gösterilmesi gereken her türlü tasarım için SVG kullanın. Fotoğraflar ve çok ayrıntılı, karmaşık gradyanlı görseller içinse JPG veya WebP tercih edin.
SVG, PNG ve JPG — hangisi ne zaman kullanılır?
| Özellik | SVG | PNG | JPG |
|---|---|---|---|
| Tür | Vektörel | Raster (piksel) | Raster (piksel) |
| Kayıpsız ölçeklenir | Evet | Hayır | Hayır |
| Şeffaflık | Evet | Evet | Hayır |
| Fotoğraflar için ideal | Hayır | Hayır | Evet |
| Logo ve ikonlar için ideal | Evet | Evet | Hayır |
| CSS/JS ile düzenlenebilir | Evet | Hayır | Hayır |
| Tarayıcılarda desteklenir | Evet | Evet | Evet |
Sitelerde ve uygulamalarda SVG nasıl kullanılır?
Bir web sayfasına SVG eklemenin üç temel yolu var:
- <img> etiketi olarak: en basit yol. SVG başka herhangi bir görsel gibi ele alınır, ancak CSS veya JavaScript ile yönlendirilemez.
- HTML içinde satır içi: SVG kodu doğrudan sayfanın HTML'ine yerleştirilir. CSS ve JS ile tam denetim sağlar — renkler, animasyonlar ve etkileşimler. Etkileşimli ikonlar için tercih edilen yaklaşım budur.
- CSS arka planı olarak:
background-image: url('ikon.svg')ile. Dekoratif ikonlar için kullanışlıdır, ancak JavaScript erişimi sınırlıdır.
Görseller SVG'ye nasıl dönüştürülür?
Bir fotoğrafı veya PNG'yi SVG'ye çevirmek, pikselleri geometrik biçimlere dönüştüren vektörleştirme adlı bir süreçle mümkündür. Sonuç; az renkli, kenarları belirgin ve yalın görsellerde — örneğin beyaz arka planlı logolarda — çok daha iyi olur. ImageTools'un Dönüştür aracıyla dosyalarınızı başlıca formatlar arasında, PNG ve JPG dahil, web uyumlu formatlara çevirebilirsiniz.
Görsellerinizi şimdi dönüştürün
Dosyalarınızı başlıca görsel formatları arasında hızlı ve ücretsiz biçimde, doğrudan tarayıcınızda dönüştürün.
Resmi dönüştürSVG, SEO için iyi mi?
Evet. SVG metin tabanlı bir format olduğu için Google içeriğini tarayıp dizine ekleyebilir. Ayrıca SVG logolar ve ikonlar genellikle PNG hâllerinden küçüktür; bu da sayfaları hızlandırır ve Core Web Vitals'ın devreye girmesinden bu yana Google'da doğrudan bir sıralama etkeni.
SVG'leri SEO için iyileştirmek istiyorsanız SVG kodunun içine title ve desc etiketlerini ekleyin; bunlar ekran okuyucular ve arama motorları için alternatif metin işlevi görür.