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 (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:
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 (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.
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:
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.
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.
Ç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.
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.
interAnaliz Yazılım Ltd. Şti. Tescilli Markasıdır.
©2014 / 2023
Her hakkı saklıdır.