Ölçeklenebilir Vektör Grafikleri kullanmanın yararları
Ölçeklendirilebilir Vektör Grafikleri veya SVG, bugün web sitesi tasarımında önemli bir rol oynar. Web tasarım çalışmalarınızda şu anda SVG kullanmıyorsanız, bunu yapmaya başlamanızın bazı nedenleri ve bu dosyaları desteklemeyen eski tarayıcılar için kullanabileceğiniz geri dönüşler de olabilir.
çözüm
SVG'nin en büyük yararı çözünürlük bağımsızlığıdır. SVG dosyaları piksel tabanlı raster görüntüleri yerine vektör grafikleri olduğundan, herhangi bir görüntü kalitesini kaybetmeden yeniden boyutlandırılabilirler. Bu, özellikle çok çeşitli ekran boyutlarında ve cihazlarda iyi görünmesi ve iyi çalışması gereken duyarlı web siteleri oluştururken yararlıdır.
SVG dosyaları, yanıt veren web sitenizin değişen boyut ve düzen gereksinimlerini karşılamak için yukarı veya aşağı ölçeklendirilebilir ve herhangi bir adımda kaliteden ödün vermeyen grafikler hakkında endişelenmeniz gerekmez.
Dosya boyutu
Duyarlı web sitelerinde raster görüntülerin (JPG, PNG, GIF) kullanılması ile ilgili zorluklardan biri, bu görüntülerin dosya boyutudur. Raster görüntüler, vektörün yaptıklarını ölçeklemediğinden, piksel tabanlı resimlerinizi görüntülenecekleri en büyük boyuta göndermeniz gerekir. Bunun nedeni, her zaman bir görüntüyü daha küçük yapabilmeniz ve kalitesini koruyabilmenizdir, ancak görüntüleri büyütmek için de aynı şey geçerli değildir. Sonuç olarak, bir kişinin ekranında göründüğünden çok daha büyük resimlere sahip olmanız gerekir; bu, gereksiz bir şekilde çok büyük bir dosyayı indirmeye zorlandıklarını gösterir.
SVG bu sorunu ele alıyor. Vektör grafikleri ölçeklendirilebildiğinden, bu görüntülerin ne kadar büyük görüntülenmesi gerektiğine bakılmaksızın çok küçük dosya boyutlarına sahip olabilirsiniz. Bu sonuçta bir sitenin genel performansı ve indirme hızı üzerinde olumlu bir etkiye sahip olacaktır.
CSS Şekillendirici
SVG kodu da bir sayfanın HTML'sine doğrudan eklenebilir. Bu, satır içi SVG olarak bilinir. Satır içi SVG kullanmanın yararlarından biri, grafikler aslında tarayıcınız tarafından kodunuza göre çizildiğinden, bir görüntü dosyasını almak için bir HTTP isteğinin yapılmasına gerek olmamasıdır. Diğer bir avantaj ise, inline SVG'nin CSS ile biçimlendirilebilmesidir.
SVG simgesinin rengini değiştirmek mi gerekiyor? Bu görüntüyü bir çeşit düzenleme yazılımında açmak ve dosyayı dışa aktarmak ve tekrar yüklemek yerine, SVG dosyasını birkaç satırlık CSS ile değiştirebilirsiniz.
Vurgulu durumları veya belirli tasarım gereksinimlerini değiştirmek için SVG grafiklerindeki diğer CSS stillerini de kullanabilirsiniz. Bir sayfaya biraz hareket ve etkileşim eklemek için bu grafikleri bile canlandırabilirsiniz.
Animasyonlar
Satır içi SVG dosyaları CSS ile biçimlendirilebileceğinden, bunlarda da CSS animasyonlarını kullanabilirsiniz. CSS dönüşümleri ve geçişleri, SVG dosyalarına bazı yaşam eklemek için iki kolay yoldur. Flash'ta Flash benzeri deneyimleri bir sayfada, bugün web sitelerinde Flash kullanarak gelen olumsuzluklara boyun eğmeden alabilirsiniz.
SVG kullanımı
SVG kadar güçlü olan bu grafikler, web sitenizde kullandığınız diğer tüm görüntü formatlarının yerini alamaz. Derin renk derinliği gerektiren fotoğraflar yine de bir JPG veya bir PNG dosyası olmalıdır, ancak simgeler gibi basit görüntüler SVG olarak çalıştırılmak için mükemmel şekilde uygundur.
SVG ayrıca şirket logoları, grafikler ve grafikler gibi daha karmaşık çizimler için de uygun olabilir. Tüm grafikler, ölçeklenebilir olmanın, CSS ile stillenebilir ve bu makalede listelenen diğer avantajlardan yararlanacak.
Eski Tarayıcılar için destek
SVG için güncel destek modern web tarayıcılarında çok iyidir. Bu grafikler için gerçekten desteklemeyen tek tarayıcılar, Internet Explorer'ın eski sürümleri (Sürüm 8 ve aşağısı) ve Android'in birkaç eski sürümü. Sonuç olarak, göz atma popülasyonunun çok küçük bir yüzdesi hala bu tarayıcıları kullanıyor ve bu sayı küçülmeye devam ediyor. Bu, SVG'nin bugün web sitelerinde oldukça güvenli bir şekilde kullanılabileceği anlamına gelir.
SVG için bir geri dönüş sağlamak istiyorsanız, Filament Grubundan Grumpicon gibi bir araç kullanabilirsiniz. Bu kaynak SVG görüntü dosyalarınızı alır ve eski tarayıcılar için PNG yedeklemeleri oluşturur.
1/27/17 tarihinde Jeremy Girard tarafından düzenlendi