SVG Ölçeklenebilir Vektör Grafikler Hakkında

Bu güne kadar BulutPress® ile oluşturduğunuz web sitenizde, mobil sabit menü alanında bulunan görselleri sadece PNG formatında yükleyebiliyordunuz. Ancak PNG formatı piksel tabanlı olduğundan, farklı çözünürlüklerdeki cihazlarda, özellikle de yüksek çözünürlüğe sahip iphone gibi cihazlarda bulanık görünmesine sebep oluyordu.

Yazılıma eklediğimiz yeni özellik sayesinde, farklı çözünürlüklerdeki cihazlarda görüntü kalitesi kaybı yaşamamak için SVG formatında ikonlar ekleyebilirsiniz.

Görselleri Photoshop ile SVG (ölçeklenebilir vektör grafik) formatına nasıl dönüştüreceğinizi ve BulutPress® sitenize nasıl yükleyeceğinizi anlatıyoruz.

BulutPress® ile oluşturduğunuz tüm web sitelerinizde özellikle logo modülünüzü sonra da mobil sabit menü içindeki görselleri SVG formatında yüklemenizi tavsiye ediyoruz.

SVG formatında görsel üretmek için photoshop kullanmak zorunda değilsiniz. Size daha önce bahsettiğimiz gibi, google arama motorunda "png to svg converter" şeklinde arama yapıp ücretsiz araçları kullanarak da PNG formatında olan görsellerinizi kullanarak SVG formatına dönüştürebilirsiniz. Bu eğitim videosunda sizlere Photoshop ile SVG dosyası oluşturmayı öğrediyoruz.

SVG veya Scalable Vector Graphics, web sayfalarında vektör tabanlı grafikleri tanımlamak için bir web standardıdır. XML'e dayalı SVG standardı, bir görünüm alanı içindeki yolları, şekilleri ve metni açıklamak için işaretleme sağlar. İşaretleme, görüntüleme için doğrudan HTML'ye gömülebilir veya bir .svg dosyasına kaydedilebilir ve diğer herhangi bir görüntü gibi eklenebilir.

SVG'yi elle yazabilirsiniz, ancak Illustrator veya InkScape gibi vektör grafik düzenleyicilerinde daha karmaşık grafikler tasarlanabilir ve SVG dosyalarına veya koduna aktarılabilir.

SVG Dosya Formatını Hangi Durumlarda Tercih Etmeliyiz?

SVG (Scalable Vector Graphics) dosya formatı, vektör grafikler için kullanılan bir dosya formatıdır. Bu tür grafikler, noktalar, çizgiler, eğriler ve şekiller gibi bileşenleri kullanarak oluşturulur ve herhangi bir boyutta büyütülebilirler. SVG dosyaları, web sitelerinde, mobil uygulamalarda ve diğer dijital ortamlarda kullanılabilirler.

SVG dosya formatını tercih etmeniz gereken durumlar şunlar olabilir:

• Web tasarım arayüzünde ve mobil uygulamalarda kullanmak istediğiniz grafikler, çok sayıda büyüklükte ve çözünürlükte kullanılması gerekecekse. Örneğin, bir logonun farklı boyutlarda web sitenizde ve mobil uygulamanızda kullanılması gerekebilir. SVG dosyaları, herhangi bir boyutta büyütülebilirler ve herhangi bir kayıp ya da kalite bozukluğu yaşanmaz.
• Grafiklerinizde hassasiyet istiyorsanız. Örneğin, bir çizim programı kullanarak oluşturduğunuz bir resimde, çizgilerin ve şekillerin kesinliğini koruyan SVG dosyası, hassasiyeti daha iyi koruyacaktır.
• Grafiklerinizi HTML ve CSS ile birlikte kullanmak istiyorsanız. SVG dosyaları, HTML ve CSS ile birlikte kullanılabilirler ve grafikleri web sitenizde ve mobil uygulamanızda dinamik hale getirmenizi sağlar.
• Arama motorları tarafından okunabilir grafikler kullanmak istiyorsanız, SVG dosyaları, arama motorları tarafından okunabilir ve indekslenebilirler.

SVG dosya formatının bazı dezavantajları da var. Örneğin, RGB renkler kullanmaz, ve bazı durumlarda performans düşebilir. Ayrıca, bazı özellikleri (örneğin: Drop shadow, Reflection, Gradient) çok iyi desteklemiyor. Bu yüzden senaryonuza ve ihtiyacınıza göre SVG dosya formatını tercih etmelisiniz.

SVG Dosya Formatının Tarihçesi Nedir?

SVG (Scalable Vector Graphics) dosya formatı, vektör grafikleri tanımlayan bir açık standarttır. Bu standart, World Wide Web Consortium (W3C) tarafından 1999 yılında tanıtılmıştır. SVG 1.0 sürümü, 2001 yılında resmileştirilmiştir.

SVG, web sitelerinde, mobil uygulamalarda ve diğer dijital ortamlarda kullanılmak üzere tasarlanmıştır. Özellikle, web sitelerinde kullanılan grafiklerin boyutları ve çözünürlükleri değişebilir ve buna uyum sağlamak için grafiklerin büyütülebilir olması gerekir. SVG, bu gereksinimi karşılamak için vektör grafikleri kullanır. Vektör grafikleri, noktalar, çizgiler, eğriler ve şekiller gibi bileşenleri kullanarak oluşturulur ve herhangi bir boyutta büyütülebilirler.

SVG dosya formatı, ilk çıktığı dönemde çok popüler olmamıştı. Ancak web teknolojilerinin gelişmesiyle birlikte, SVG dosya formatının kullanımı da artmıştır. Özellikle, CSS ve JavaScript gibi modern web teknolojileriyle birlikte kullanılması, SVG'nin çok yönlü bir grafik formatı haline gelmesini sağlamıştır.

SVG 1.0 sürümünden sonra birçok sürüm yayınlandı ve SVG 2.0 sürümü halen geliştirilmekte. SVG 2.0 sürümü, önceki sürümlerine göre daha iyi performans ve özellikler içermektedir. Örneğin, önceki sürümlerde desteklenmeyen bazı özellikler (örneğin : Filter, Mask) SVG 2.0 sürümünde desteklenmektedir. Bu sayede web sitesinin yüklenme hızı dramatik şekilde artmaktadır.

Sıfırdan SVG Dosyası Nasıl Oluşturulur?

SVG (Scalable Vector Graphics) dosyası oluşturmak için bir çizim programı kullanmanız gerekir. Bu tür programlar, vektör grafikler oluşturmak için kullanılan noktalar, çizgiler, eğriler ve şekiller gibi bileşenleri destekler. Örneğin, Adobe Illustrator, CorelDRAW ve Inkscape gibi çizim programları SVG dosyası oluşturmak için kullanılabilir.

Aşağıda, sıfırdan bir SVG dosyası oluşturma işleminin adımları verilmiştir:

1. Bir çizim programı kullanarak, dosya oluşturun. Örneğin, Adobe CC Illustrator kullanarak bir dosya oluşturun.
2. Çizim aracı kutusundan bir nokta, çizgi, eğri veya şekil seçin ve grafiğinizi oluşturun. Örneğin, bir dikdörtgen çizin.
3. Dosyayı kaydedin ve "SVG" dosya formatını seçin. SVG dosyası oluşturulmuş olacaktır.
4. Dosyayı açmak için bir tarayıcı veya SVG görüntüleyici kullanabilirsiniz. Örneğin, Google Chrome tarayıcısını kullanarak dosyayı açabilirsiniz.

Not: Bu adımlar genel bir yöntemdir ve çizim programınızdan ve kullandığınız sürümden bağımsız olarak değişebilir. Ayrıca, çizim programınızın kullanımı hakkında daha fazla bilgi edinmek için, programın kullanım kılavuzuna veya çevrimiçi kaynaklara bakabilirsiniz.

SVG Tercih Etmemiz İçin 5 Neden

1. Metin tabanlı format: SVG ögeleri, bir web sitesinin erişilebilirliğini büyük ölçüde artıran metin içerir. Ancak asıl avantajı, bu metnin arama motorları tarafından dizine eklenmesidir. Ve bir kullanıcı, Google aracılığıyla bir SVG dosyası bulabilir. Bu da SEO çalışmalarınıza olumlu yönde katkı sağlar.

2. Ölçeklenebilirlik: SVG görüntülerinin kalitesi çözünürlüğe bağlı değildir. Diğer biçimlerdeki görüntülerin veya simge yazı tiplerinin aksine, SVG'ler ekran boyutu ne olursa olsun her cihazda mükemmel netlikte görünür. Ölçeklenebilirlik aynı zamanda web sitesinde aynı görüntüyü farklı boyutlarda kullanırsanız tek bir SVG kullanmanız anlamına gelir. PNG'de olduğu gibi birden çok kopyasını oluşturmanız gerekmez. Bunun yerine, aynı görüntüyü gömer ve boyutunu doğrudan SVG kodunda tanımlarsınız.

3. Yüksek performans: Performansa öncelik veriyorsanız, SVG kullanmalısınız. SVG ile, bir görüntü dosyasına yüklemek için bir HTTP isteğine gerek yoktur. İndirilecek dosya olmadığı için sayfa daha hızlı yüklenir. Daha hızlı yükleme süresi, daha iyi web sayfası performansı ve daha yüksek arama motoru sıralaması anlamına gelir. Buna karşılık, kullanıcı deneyimini geliştirir.

4. Küçük dosya boyutu: Basit SVG dosyalarının boyutu, içerdiği renkler, katmanlar, degradeler, efektler ve maskelerle tanımlanır. Bir PNG'nin veya başka herhangi bir raster grafik dosyasının boyutu, içerdiği piksel sayısıyla tanımlanır. Bir PNG resmi ne kadar büyükse, boyutu o kadar ağır olur. Ancak bu, SVG simgeleri için geçerli değildir. Ayrıca, SVG'ler optimize edilebilir ve nasıl olduğunu bu makalenin ilerleyen kısımlarında anlatacağım.

5. Çok sayıda düzenleme ve canlandırma fırsatı: Raster görüntülerin aksine, vektör görüntüleri hem özel vektör çizim programlarında hem de doğrudan bir metin düzenleyicide düzenlenebilir. Ayrıca SVG simgelerinin renklerini veya boyutlarını doğrudan CSS aracılığıyla düzenleyebilirsiniz. SVG'leri canlandırmaya gelince, SMIL, Web Animations API, ​WebGL veya CSS animasyonu yardımıyla yapılabilir. SVG görüntülerinin CSS animasyonu hakkında daha fazla bilgi edinmek için aşağı kaydırın.

6. HTML, XHTML ve CSS ile entegrasyon: W3C'ye göre SVG, "X/HTML, CSS ve Javascript gibi diğer önde gelen açık Web platformu teknolojileriyle entegre olmak ve bunları genişletmek için" tasarlandı. Böylece, farklı görüntü formatlarından farklı olarak, bu format diğer belgeler ve teknolojilerle kolayca entegre edilebilir.

7. W3C Belge Nesne Modeli desteği: SVG için büyüyen topluluk desteği var. World Wide Web Konsorsiyumu (W3C), her zaman İnternet'in vektör görüntüler olmadan yapamayacağını iddia etmiştir. Bu kuruluş temel olarak SVG formatını oluşturdu ve günümüzde aktif olarak destekliyorlar.

SVG'nin Sakıncaları Nelerdir?

Çok sayıda küçük parça, SVG formatının kullanımını mantıksız hale getirir. Bir görüntü ne kadar çok parçadan oluşursa, boyutu o kadar ağırlaşır.

Resim doğrusalsa ve sadece birkaç renk içeriyorsa – SVG doğru bir çözümdür. Ancak, ayrıntılar önemliyse ve çok fazla varsa, PNG veya JPEG daha uygun olabilir.

Ayrıca, SVG'nin fotoğraflar için kullanılamayacağını unutmayın. Web sitenizde bir fotoğraf kullanıyorsanız, SVG en iyi seçenek değildir. Kesinlikle piksel tabanlı JPG gibi görüntü kullanmanız gerekir.

SVG Görüntüleri Nasıl Optimize Edilir?

Bir vektör formatını işlerken, fazladan bazı SVG kodları yazmamız gerekir. Nihai sonuç, farklı hizmetler kullanılarak optimize edilmelidir. Çoğu zaman, SVG'yi optimize etmek için bir Node.js aracı SVGO kullanırım. Kullanımı oldukça kolaydır ve görselleri başka web sitelerine yüklemenize gerek yoktur.