SVG dosya formatı, web sitelerinde iki boyutlu grafikler, çizelgeler ve illüstrasyonlar göstermeye yönelik popüler bir araçtır. Ayrıca bir vektör dosyası olduğundan, çözünürlüğünü kaybetmeden büyütülebilir veya küçültülebilir. SVG görüntülerinin temel özellikleri, avantajlarıyla dezavantajları ve SVG formatının nasıl geliştiği hakkında daha fazla bilgi edinin.
Scalable Vector Graphics (SVG), web dostu bir vektör dosyası formatıdır. JPEG'ler gibi piksel tabanlı raster dosyalarının aksine vektör dosyaları, bir ızgaradaki noktaları ve çizgileri temel alan matematiksel formüllerle görüntüleri saklar. Bu sayede SVG gibi vektör dosyaları, kaliteden ödün vermeden önemli ölçüde yeniden boyutlandırılabildiğinden logolar ve karmaşık çevrimiçi grafikler için idealdir.
SVG'leri web tasarımcıları arasında son derece popüler hale getiren sadece yeniden boyutlandırma yeteneği değildir. SVG'ler XML kodu ile yazılır. Bu da metin bilgilerini şekiller yerine düz metin olarak depoladıkları anlamına gelir. Böylece Google gibi arama motorları, anahtar kelimeler için SVG grafiklerini okuyabilir. Bu da bir web sitesinin arama sıralamalarında yukarı taşınmasına yardımcı olabilir.
SVG dosyasını .svg uzantısından kolayca tanıyabilirsiniz.
SVG dosyasının tarihi, World Wide Web Consortium'un (W3C) geliştiricilerin yeni bir vektör grafik formatı türü için önerilerini istediği 1990'ların sonuna dayanıyor. Altı rakip şirket öneri gönderdi ve bu önerilerin sunduğu veriler W3C'nin SVG formatını oluşturmasına yardımcı oldu.
SVG'lerin popülerlik kazanması biraz zaman aldı. İnsanların modern web tarayıcılarında SVG kullanımının avantajlarını görmeye başladığı 2017 yılına kadar bu dosya formatı için nispeten az destek vardı. Vektör dosyalarına yönelik çoğu tarayıcı ve çizim uygulaması bunları kolayca işleyebildiğinden SVG dosyaları, artık 2D web sitesi görüntüleri için yaygın olarak kullanılmaktadır.
Scalable Vector Graphics son yıllarda çok yol kat etti. Peki SVG'ler pratikte ne için kullanılıyor?
Tasarımcılar SVG'leri genellikle düğmeler gibi web sitesi simgelerini ve şirket logolarını göstermek için kullanır. Bu dosya türünün kaliteden ödün vermeden yukarı veya aşağı ölçekleme özelliği, birden çok yerde ve farklı boyutlarda görünmesi gereken grafikler için ideal olduğu anlamına gelir.
SVG dosyalarında XML kullanıldığından Google gibi arama motorları, metin ağırlıklı çizelgeleri ve grafikleri okuyabilir. Bu da arama motoru optimizasyonuna yardımcı olabilir. Google, SVG'lerdeki anahtar sözcükleri algılayabildiğinden, bir web sayfasını arama sonuçlarında daha yüksek bir sıraya yerleştirebilir. Ayrıca SVG'ler animasyonu desteklediğinden web sayfalarını daha ilginç hale getirmede kullanılabilir.
Daha fazla vektör dosyası keşfedin
Görüntülerinizi bu dosya formatında kaydetmeden önce SVG'nin avantajlarını ve dezavantajlarını araştırmanız önemlidir.
Bugünlerde Chrome ve Edge'den Safari ve Firefox'a kadar başlıca tarayıcıların tümü, Mac veya Windows'da olmanız fark etmeksizin SVG dosyalarını açmanızı sağlar. Tarayıcınızı başlatın ve görüntülemek istediğiniz dosyayı seçmek için Dosya > Aç'ı tıklatın. Dosyanız daha sonra tarayıcınızda görüntülenecektir.
SVG görüntülerini bilgisayarınızda yerleşik bir programla açmak da aynı derecede kolaydır. Dosya adını çift tıklattığınızda, dosyayı açacak programların bir listesi gösterilir veya otomatik olarak uyumlu bir programda açılır.
Adobe Photoshop'u kullanırken aşağıdaki adımları izleyin:
Yararlı bir not: Photoshop bir raster grafik düzenleyici olduğundan, birçok kişi SVG dosyalarını vektör grafik düzenleyici olan Adobe Illustrator'da oluşturmayı ve düzenlemeyi tercih eder.
SVG dosya formatı yalnızca statik görüntüler için değildir. Birçok çevrimiçi araçtan yararlanarak web grafiklerinize hareketli öğeler ekleyebilirsiniz. SVG animasyonları, bir infografikteki farklı slaytlar arasında geçiş yapılmasını sağlayan kaydırıcı gibi nispeten temel öğeleri içerebilir. İllüstrasyonların, saat kadranındaki akrep ve yelkovan gibi hareket etmesi sağlanabilir.
SVG dosyasını tespit etmenin en kolay yolu, uzantı kodunu kontrol etmektir. SVG dosyası, .svg dosyası olarak listelenir. Ayrıca SVG'ler gibi vektör görüntülerini bilgisayar ekranınızda %200 veya daha yüksek bir değere genişleterek de tespit edebilirsiniz. Bir vektör görüntüsü, pikselli veya bulanık hale gelmez ve temiz çizgileriyle düz renklerini korur.
SVG görüntüleri çoğunlukla web'de kullanılsa da çevrimiçi dünyanın ötesinde bir kullanımı da vardır. Örneğin, SVG dosyaları orijinal halinden farklı olarak boyutlandırıldığında bozulmadığından, tişört gibi kıyafetlerde baskı şablonu olarak kullanılabilir. Çok sayıda pikselden oluşturulan bir JPEG dosyası ise temiz bir şekilde aktarım yapamaz.
SVG dosyasının boyutu, içerdiği görüntü verilerine bağlıdır ancak genellikle diğer dosya türlerinin çoğundan daha düşüktür. Birçok yol ve bağlantı noktası içeren karmaşık grafikler, daha basit ve daha temiz tasarımlardan daha fazla depolama alanı kaplar. Dosyanızdaki karmaşık talimatların sayısını en aza indirmeye çalışın.
Özetle, SVG'ler vektör dosyalarıyken PNG'ler ise raster dosyalarıdır. Bir PNG dosyasını çok fazla genişletirseniz veya çok sıkıştırırsanız bulanık ve piksellenmiş hale gelir. SVG'ler hiç piksel içermediği için çözünürlüğünü asla kaybetmez. Ayrıca PNG'ler animasyonu desteklemez.
Web grafikleri ve logolar için popüler olan başka bir format hakkında daha fazla bilgi edinin.
JPEG dosyalarının neden karmaşık dijital fotoğraflara yönelik tasarlandığını öğrenin.
Apple'daki zihinlerden çıkmış bu yeni raster dosyası hakkında bilgi edinin.
Adobe Illustrator için geliştirilen ve yaygın olarak kullanılan bu vektör formatını keşfedin.
Web tasarım sektöründe hangi dosya formatı daha öndedir?
Yazdırma becerilerine yakından göz atın.
Muhteşem vektör resimleri ve illüstrasyonlar oluşturun.
7 gün ücretsiz, ardından ₺132,16/ay.
Basılı ve dijital yayıncılık için şık sayfa mizanpajları tasarlayın.
7 gün ücretsiz, ardından ₺132,16/ay.
Yaratıcı uygulamalardan oluşan koleksiyonun tamamına ve daha fazlasına sahip olun.
7 gün ücretsiz, ardından ₺187,62/ay.