SVG 2018'de Nasıl ve Neden Devralacak?
2018, SVG yılı olacak. Görüntü dosyası formatı son birkaç yıldır popülerlik ve kullanımda giderek artıyor, ancak 2018 gerçekten kırılacağı zamandır.
Yüksek çözünürlüklü ekranlara sahip kullanıcıların birleşimine ve şimşek hızlı yükleme süresine ihtiyacınız var. Ve SVG'ye geçiş büyük bir şey gibi görünse de; değil.
SVG'nin kullanımı ve uygulanması kolaydır ve mevcut dosyaları değiştirmeniz gerekmez; SVG olarak yeni resimler eklemeniz yeterlidir. İşte SVG söz konusu olduğunda bilmeniz gereken her şey.
Tasarım Kaynaklarını Keşfedin
SVG Web İçin Üretildi
Mozilla bunu şöyle anlatıyor:
SVG, vektör görüntülerini tanımlamak için XML tabanlı bir dildir. Temel olarak HTML gibi biçimlendirmedir, ancak resminizde görünmesini istediğiniz şekilleri ve bu şekillere uygulamak istediğiniz efektleri tanımlamak için birçok farklı öğeniz vardır. SVG, içeriği değil, grafikleri işaretlemek içindir. Spektrumun en basit ucunda, ve gibi basit şekiller oluşturmak için öğeler var. Daha gelişmiş SVG özellikleri arasında (bir dönüşüm matrisi kullanarak renkleri dönüştürme) (vektör grafiğinizin animasyonlu bölümleri) ve (görüntünüzün üstüne bir maske uygulayın.)
Web tasarımcıları için SVG'nin temel avantajları arasında, bir kod veya metin düzenleyicide basit SVG renderları oluşturma yeteneği bulunurken, karmaşık grafikler Adobe Illustrator gibi bir programda çizilebilir; SVG metnine erişilebilir; SVG'lerin stili ve senaryosu kolaydır; ve her boyutta iyi görünen bir vektör formatıyla oluşturuyorsunuz. SVG formatları modern tarayıcılar tarafından desteklenir, geleceğe dönük ve yüksek oranda sıkıştırılabilir özelliktedir.
Dezavantajlardan bazıları, SVG'lerin tasarlanmasının karmaşık hale gelebilmesi ve başlangıçta oluşturulması biraz daha zor olmasıdır. Diğer sorun, bazı bozulmuş tarayıcıların ne olduklarını anlamadıklarıdır.
SVG'yi daha iyi anlamanız mı gerekiyor? SVG için bir başlangıç kılavuzumuz var.
Tasarımcılar SVG'yi Nasıl Kullanıyor?
SVG'nin avantajlarından biri, onunla birçok farklı şey yapabilmenizdir. SVG aşağıdakiler için kullanılabilir:
- logolar
- Arka planlar, desenler ve dokular
- Animasyon
- Duyarlı görüntüler
- Simgeler
Tasarımcılar, vektör biçiminin uygulanabilir bir çözüm olduğu tasarımdaki herhangi bir öğe için SVG'yi kullanabilir. Diğer biçimlerin yanı sıra JPG, PNG ve GIF'in yerini alabilir.
Vektör Biçimleri Kuralı
Daha fazla vektör biçimi kullanma şansınız yüksek. SVG çözünürlükten bağımsızdır. Ve bu büyük bir bonus çünkü resimlerinizin her yerde harika görüneceğini biliyorsunuz.
SVG görüntüleri ile çalışmanın özellikle güzel yanı, bunları uygulamak için iş akışınızı gerçekten değiştirmek zorunda kalmamanızdır. Illustrator veya Sketch gibi bir yazılımda tasarlıyorsanız, son dışa aktarma dışındaki süreç aynıdır. Tek yakalama, muhtemelen herhangi bir metin öğesini Illustrator'da anahatlara dönüştürmek isteyeceğinizdir, ancak birçok insan bunu zaten yapıyor.
SVG dosyalarını hazırlarken hatırlamanız gereken bir anahtar nokta vardır. Bunları olabildiğince küçük tutmak için, ihtiyacınız olmayan gereksiz dosyaları sildiğinizden emin olun. Web'de SVG'nin öğeleri çizmek ve SVG dosyalarını en iyi şekilde kaydetmek için bazı harika ipuçları vardır.
Metin Tabanlı Format SEO İçin İyi
SVG kullanımı, arama motoru bilgili tasarımcılar için de bir miktar bonus ile birlikte gelir. SVG biçimlendirmede gerçek metin kullandığından, arama motorları görüntüleri daha iyi okuyabilir.
Evet, diğer resimlerle alternatif bilgiler ekleyebilirsiniz, ancak anahtar kelimeler için yalnızca çok fazla alan vardır. SVG ile daha arama dostu görüntüler oluşturabilir ve yükleyebilirsiniz. Google, bağımsız dosyalar dahil ve SVG'lerin doğrudan HTML'ye yerleştirildiği durumlarda tüm SVG içeriğini dizine ekler.
SVG Hafiftir
Ağır hızlı alabilen diğer vektör tabanlı dosya türlerinin aksine, SVG'ler koddur. Kod hızlı. Bu kadar basit. Şey ... neredeyse.
SVG olarak kaydettiğiniz süslü vektör çizimleri söz konusu olduğunda, çok ilerlemeden önce dosya boyutlarını kontrol edin. Şeffaflık eklendiğinde PNG formatları neredeyse katlanarak büyürken, SVG'ler görüntüdeki yol ve dolgu sayısına göre büyüme eğilimindedir.
SVG çok büyükse, onu ve bir JPG veya PNG'yi dışa aktarmayı düşünün. (Çelişkili görünse bile. Gerçek şu ki, çoğu tasarımcı, dosya türlerini görüntülerle birlikte kullanmaya devam edecek; geçmişte olduğundan daha fazla SVG kullanmayı umuyoruz.)
Düzenleme Kolay
Simgeleri veya logoları veya vektör çizim yazılımında herhangi bir şeyi çizmeye alışkınsanız, düzenleme işlemi hakkında hiçbir şey sizin için değişmez.
Ama SVG yazarsanız, bir tedavi içindesiniz. Sadece metin editörü ve patlamada kelimeyi veya koordinatları veya rengi değiştirin, değişiklik yapılır. Düzenlemeyi bundan daha kolay hale getirmek zor.
SVG ile Hareketsiz veya Animasyonlu Görüntüler Oluşturma
Sabit veya hareketli bir görüntüye sahip olmanıza izin veren diğer görüntü formatlarının çoğundan farklı olarak, SVG bunlardan birine izin verir. Hareketsiz bir görüntü veya animasyon oluşturabilirsiniz. Ve hepsi hemen hemen aynı şekilde çalışıyor. (Bu şık örnek, bir SVG yolu boyunca bir öğeye nasıl animasyon uygulanacağına dair bir öğreticidir!)
Bu küçük faydalar SVG'yi tasarımcıların zihinlerinde ön plana çıkarmaya yardımcı oluyor. Yeni bir araç veya teknik öğrenmek zorunda değilsiniz; SVG ile ihtiyacınız olan her şeye zaten sahipsiniz.
Sonuç
İşte 2018'in SVG'nin devralmaya başladığı yıl olmasının en büyük nedeni: pratik.
Yüksek çözünürlüklü ekran kullanan herkesle, vektör formatları gerçekten de yoludur. Her şey kusursuz bir şekilde ölçekleniyor ve pikselleşme hakkında endişelenmenize gerek yok. SVG'ler harika logolar (statik veya duyarlı), grafikler ve arka planlar, simgeler ve küçük resimler ve animasyonlar oluşturur. Dosyalar küçük ve hızlı yükleniyor ve web sitenizin tasarımında SVG'lerin uygulanması söz konusu olduğunda büyük bir öğrenme eğrisi yok.
SVG resimlerini kullanmaya hemen başlayabilirsiniz.
