SVG dosyası nedir?
SVG formatının ne olduğunu, vektörel yapısını, web sitelerindeki hız avantajını ve piksellere bağlı kalmadan nasıl keskin kaldığını bu rehberle keşfedin. Ücretsiz SVG dönüştürücüleri dahil.
Ölçeklenebilir Vektör Grafikleri anlamına gelen SVG, iki boyutlu grafikleri matematiksel koordinatlarla tanımlayan açık standartlı bir görsel dosya biçimidir. Dünya Çapında Ağ Birliği (W3C) tarafından 2001 yılında geliştirilen bu format, piksel tabanlı raster görsellerin çözünürlük arttıkça bulanıklaşma sorununu kökten çözmek amacıyla tasarlanmıştır. Geleneksel görseller sabit piksel ızgaraları kullanırken SVG, geometrik şekilleri çizgiler ve noktalar yardımıyla tanımlar. Böylece bir simgeyi ya da logoyu ister akıllı saat ekranında ister dev bir reklam panosunda görüntüleyin, dosya hiçbir görsel ayrıntı ve keskinlik kaybı yaşamadan kusursuzca ekrana yansıtılır.
Teknik açıdan bakıldığında SVG, standart bir piksel matrisi yerine XML tabanlı düz metin komutları barındırır. Dosya içinde yer alan etiketler; daire, çokgen, yol, dolgu ve kontur gibi öğelerin matematiksel konumlarını belirler. Doğal alfa kanalı desteği sayesinde kusursuz şeffaflık sunarken, CSS ve JavaScript komutlarıyla ya da SMIL standartlarıyla doğrudan canlandırılabilir. Piksel sıkıştırma algoritmaları yerine metin optimizasyonu ve gzip tabanlı SVGZ yöntemiyle dosya boyutu küçültülür. Ayrıca renk sınırlaması bulunmaz; sRGB ve modern geniş renk uzaylarındaki tüm tonları degradeler ve filtre efektleriyle birlikte eksiksiz olarak işleyebilir.
Günümüzde SVG, modern web sitelerinin arayüz tasarımlarında, kullanıcı deneyimi bileşenlerinde ve mobil uygulamalarda standart görsel formatı haline gelmiştir. Tüm güncel masaüstü ve mobil web tarayıcıları SVG dosyalarını yerel olarak ayrıştırıp ekrana çizebilir. Vektör tabanlı grafik düzenleyiciler, masaüstü yayıncılık uygulamaları ve lazer kesim makineleri de üretim aşamasında bu dosyalarla doğrudan çalışır. Web üzerinde logo, simge seti ve dinamik grafik tabloları üretirken tercih edilen bu biçim, responsive web tasarımının vazgeçilmez bir yapı taşıdır ve her ekran yoğunluğunda aynı performansı korur.
Teknik künye
| Uzantı | .svg, .svgz |
|---|---|
| MIME türü | image/svg+xml |
| Sıkıştırma | Yok; XML metni (.svgz gzip’lidir) |
| Şeffaflık | Var |
| Animasyon | Var (SMIL ve CSS ile) |
| Tipik dosya boyutu | Logoda birkaç KB; karmaşık çizimde büyür |
| Tarayıcı ve sistem desteği | Her modern tarayıcı; ofis ve baskı yazılımlarında değişken |
| Geliştiren / yıl | W3C, 2001 |
Ne zaman kullanılır?
- Web sitenizde her ekran çözünürlüğünde ve yüksek yoğunluklu ekranlarda keskin kalması gereken logo, buton ve simgeleri yayınlarken SVG formatını seçmelisin.
- CSS veya JavaScript yardımıyla doğrudan etkileşime giren, rengi değişen ya da hareket eden dinamik web animasyonları tasarlarken bu formatı tercih etmelisin.
- Lazer kesim makineleri, folyo kesiciler ve dijital çiziciler için kesin koordinat ve yol verisi içeren teknik vektör çizimleri hazırlarken bu formatı kullanmalısın.
- Kullanıcı yakınlaştırdığında piksellenmemesi gereken interaktif haritalar, teknik şemalar ve veri görselleştirme grafikleri oluştururken SVG tercih edilmelidir.
Ne zaman kullanılmaz?
- Milyonlarca farklı renk geçişi ve karmaşık piksel detayları içeren gerçek fotoğraflar için SVG yerine WebP, JPG veya AVIF formatını seçmelisin.
- On binlerce karmaşık yol ve yoğun degrade içeren dijital sanatsal illüstrasyonlarda tarayıcı performansını düşürmemek adına PNG veya WebP tercih etmelisin.
- Yalnızca temel piksel görüntüleyicisi barındıran eski ofis yazılımlarında veya sınırlı e-posta istemcilerinde uyumluluk sorunu yaşamamak için şeffaf arka planlı PNG kullanmalısın.
Bu formatla ilgili araçlarımız
SVG dosyalarını girdi ya da çıktı olarak kullanan 9 araç. Hepsi tarayıcında çalışır, dosyan sunucuya yüklenmez.
Bu formata çeviren araçlar
Bu formattan çeviren araçlar
Bu formatı düzenleyen araçlar
Sık karşılaşılan sorunlar
SVG dosyasını tarayıcıda veya başka bilgisayarda açtığımda metinler farklı yazı tipiyle bozuk görünüyor.
SVG içindeki metinler hedef sistemde bulunmayan özel bir font ailesine başvuruyor olabilir. Çizim uygulamanızda dışa aktarım yapmadan önce metinleri yola (outline/path) dönüştürmeli veya ilgili web fontunu CSS ile doğrudan dosya içerisine gömmelisiniz.
Web sitesine yüklediğim SVG dosyası güvenlik uyarısı veriyor veya kabul edilmiyor.
SVG dosyaları XML yapısında metin tabanlı olduğu için kötü amaçlı script etiketleri barındırabilir ve güvenlik sistemleri bunu engeller. Dosyayı bir metin editöründe açarak gereksiz JavaScript komutlarını ve harici bağlantı etiketlerini temizledikten sonra yeniden yüklemelisiniz.
SVG dosyamın boyutu basit bir çizim olmasına rağmen beklenmedik şekilde çok büyük çıkıyor.
Dosya içine yanlışlıkla gömülmüş yüksek çözünürlüklü raster pikseller, gizli katmanlar veya aşırı hassas koordinat ondalıkları bulunuyor olabilir. Vektör olmayan gömülü pikselleri silip koordinat hassasiyetini 1 veya 2 basamağa indirerek dosya boyutunu yaklaşık yüzde 70 küçültebilirsiniz.
SVG dosyasını sosyal medya platformlarına veya mesajlaşma uygulamalarına doğrudan görsel olarak yükleyemiyorum.
Birçok sosyal medya platformu güvenlik ve işleme standartları nedeniyle doğrudan SVG yüklemesine izin vermez. Bu platformlarda paylaşım yapabilmek için dosyanızı hedef çözünürlükte şeffaf bir PNG veya yüksek kaliteli JPG formatına dönüştürmelisiniz.
Sık sorulan sorular
SVG dosyası ekranda büyütüldüğünde pikselleşir veya kalitesi bozulur mu?
Hayır, SVG pikseller yerine matematiksel formüller ve geometrik koordinatlar kullandığı için 16x16 pikselden 4000x4000 piksele kadar her ölçekte keskin kalır.
SVGZ uzantısı nedir ve standart SVG dosyasından ne farkı vardır?
SVGZ, standart XML yapısındaki SVG dosyasının gzip algoritmasıyla sıkıştırılmış halidir ve dosya boyutunu ortalama yüzde 50 ile 80 oranında azaltarak ağ trafiğinden tasarruf sağlar.
SVG formatı animasyon ve hareketli grafikleri destekler mi?
Evet, SVG dosyaları yerel SMIL etiketleri, CSS kuralları veya JavaScript kodları yardımıyla hiçbir kare hızı sınırı olmaksızın akıcı biçimde canlandırılabilir.
Fotoğrafları SVG formatına dönüştürmek dosya boyutunu küçültür mü?
Hayır, fotoğraf gibi karmaşık pikselleri vektöre dönüştürmek milyonlarca gereksiz yol noktası yaratır, dosya boyutunu onlarca megabayta çıkarır ve cihazı yavaşlatır.
SVG dosyalarını açmak ve düzenlemek için ücretli bir yazılım gerekir mi?
Hayır, SVG dosyalarını Chrome, Firefox, Safari gibi tüm güncel tarayıcılarda doğrudan görüntüleyebilir, herhangi bir ücretsiz metin editörüyle kodlarını anında düzenleyebilirsiniz.