SVG'nin Pratik Başlangıç Kılavuzu
Biçim özellikle yeni olmasa da, SVG görüntüleri web sitelerinin tasarımında giderek daha popüler hale geliyor. Tüm büyük web tarayıcıları biçimi destekler ve SVG, düşünme ve web için görüntü oluşturma şeklimizi değiştirir.
Neden bu kadar popüler? Ve bir SVG dosyasındaki fark nedir? Bugün, bu dosya türünü kullanmaya başlamak için yanıtlar ve bilmeniz gereken her şey var. (Küçük bir bonus olarak, bu yayındaki tüm resimler Creative Market'ten SVG'de mevcuttur.)
Envato Elements'i keşfedin
SVG nedir?
Ölçeklenebilir Vektör Grafikleri veya SVG, web için geliştirilmiş vektör tabanlı bir görüntü biçimidir. (Bir önceki Design Shack makalesinde vektör ve raster formatları hakkında daha fazla bilgi edinebilirsiniz.)
Kullanıcıların her pikseli görebildikleri yüksek çözünürlüklü ekranlar sayesinde format popülerlik kazanmıştır (varsa). SVG bir vektör biçimi olduğundan, görüntü boyutuna bakılmaksızın aynı şekilde ve mükemmel ayrıntıyla oluşturulur.
İşaretleme dili ilk olarak 1999'da W3C olarak bilinen World Wide Web Konsorsiyumu tarafından geliştirilmiştir. W3C, SVG'yi “iki boyutlu grafik uygulamalarını ve görüntülerini tanımlamak için bir biçimlendirme dili ve bir dizi ilgili grafik komut dosyası arabirimi olarak tanımlar. .” Tüm modern tarayıcılar tarafından desteklenir - bu nedenle SVG dosyalarının düzgün işlenip işlenmeyeceği konusunda endişelenmenize gerek yoktur ve cihaz türünden bağımsız olarak çalışır.
Pratik uygulamalar
Peki, SVG'yi bu kadar popüler yapan nedir ve neden daha fazla tasarımcı kullanıyor? Basitçe, çünkü işe yarıyor.
SVG dosyaları küçük ve ölçeklenebilirdir. Biçim şekiller için en uygun olsa da, çeşitli pratik uygulamalara sahiptir. Marka logoları, ikonlar, kullanıcı arayüzü elemanları ve diğer birçok tasarım biti SVG formatında çalışabilir. En büyük bonus bunların vektör olmasıdır. Böylece bir SVG görüntüsü hemen hemen her boyutta kullanılabilir. (En ufak dosyalar yalnızca çok büyük olabilir.)
SVG dosyalarının kullanımı ve kontrolü de kolaydır. Bir SVG yalnızca statik bir görüntü olarak kaydedilmez, aynı zamanda görüntüyü daha da eğlenceli hale getirmek için etkileşim ve filtreler de ekleyebilirsiniz. (SVG dosyaları canlandırılabilir ve renklendirilebilir.)
İşte SVG kullanımı için birkaç pratik uygulama:
- Logolar veya resimler
- Arka plan resmi olarak
- Düğme gibi bir nesne olarak
- haritalama
- Grafikler veya çizimler
Genel bir kural olarak, SVG zaman içinde gelişebilen veya değişebilen görüntüler veya cihaz türüne göre veya animasyon veya diğer dinamik efektler içeren görüntüler için en uygundur. Logolar, eskizler, şekiller, grafikler ve çizelgeler gibi görseller veya diğer basit görüntüler için formatı kullanın.
SVG Kullanmanın Artıları
Peki neden güvenilir JPG veya GIF'den SVG'ye geçesin? Bu biçimin projelerinizde en iyi kullanım olmasının birçok nedeni vardır. (Üstelik baskı için SVG kullanma potansiyeli bile vardır.)
- SVG bir vektör biçimidir. Bu, görüntü boyutlarının genellikle cihaza göre değiştiği duyarlı tasarımı düşünürken tek başına önemlidir. SVG, bir dosyanın tüm işi yapabileceği kadar küçüktür ve daha büyük ekranlarda kalite kaybı yoktur.
- SVG görüntüleri ve davranışları XML ile tanımlanır, yani görüntüler dizine eklenebilir, kodlanabilir ve sıkıştırılabilir.
- SVG görüntüsüyle, çeşitli tasarım teknikleri dahil olmak üzere başka herhangi bir görüntüyle yapabileceğiniz hemen hemen her şeyi yapabilirsiniz. Filtreler, karışım modları, frez efektleri, renk, kırpma ve maskeleme, gölge düşürme ve istediğiniz diğer teknikleri eklemek kolaydır.
- SVG dosyalarına erişilebilir.
- SVG açık web standartlarıyla çalışır.
- Metin tabanlı kod kullanarak veya çizdiğiniz görüntü ile SVG oluşturabilirsiniz. Bu, ihtiyacınıza ve farklı alanlardaki uzmanlık seviyenize bağlı olarak biraz özgürlük sağlar.
- Dosya boyutları küçüktür ve küçültülebilir. Bu, diğerlerinden daha büyük olabilecek grafiklerin yüklenme sürelerini arttırmadığı anlamına gelir. (Her zaman bir bonus.)
SVG Kullanmanın Eksileri
Muhtemelen tüm avantajları okuduktan sonra SVG'de satılırsınız, değil mi? Ancak dikkate alınması gereken birkaç olumsuzluk var.
- Internet Explorer 8 veya daha eski sürümler gibi eski tarayıcılar SVG'yi desteklemez. Muhtemelen bir çözüm bulabilirsiniz (ya da umursamayabilirsiniz), ancak resimlerinizi görmeyen bazı kullanıcılar olabileceğini bilmelisiniz.
- SVG, fotoğraf gibi karmaşık görüntüler için çalışmaz. Sadece şekiller ve çizgiler için tasarlanmış bir formattır.
SVG için sırada ne var?
SVG'nin geleceği daha yeni başlıyor. Kabul edilen bir mobil görüntü formatı (ve standart) olarak SVG'nin kullanımı ve geliştirilmesi yalnızca büyümeye devam edecektir.
W3C'ye göre, “SVG 2 şu anda geliştirilme aşamasındadır ve SVG'ye yeni kullanım kolaylığı özellikleri ekleyecek, ayrıca HTML, CSS ve DOM ile daha yakından bütünleşecek ve tüm tarayıcılar tarafından desteklenmeyen özellikleri kaldıracaktır.”
Diğer eklemeler de atılıyor. Baskı donanım şirketleri, SVG'yi baskı işlemleri için daha iyi kullanmanın yollarını arıyor ve Adobe ve Canon gibi endüstri liderlerinin desteğine sahip. Haritalama ve CBS'de kullanım da genişleyerek daha iyi haritalama ve yakınlaştırma özellikleri sağlar.
Gerçekten düşünmeye başladığınızda, SVG'yi web üzerindeki ve basılı tasarımdaki projelerde nasıl kullanacağınız ve uygulayabileceğiniz neredeyse sonsuz bir fırsat var. (Bu, vektör tabanlı formatın güzelliklerinden biridir.)
SVG Kaynakları
Artık SVG hakkında biraz daha heyecanlandığınıza ve projeleriniz için neden ve nasıl yararlı olabileceğini görebildiğinize göre, başlamanıza yardımcı olacak bir kaynak listemiz var.
- Adobe Illustrator ile Web için SVG'yi dışa aktarma
- SVG'yi Doğrudan HTML Sayfalarına Gömme
- SVG Video Serisi ile Çalışıyor ve Çalışıyor
- SVG Profilleri
- CSS Hileleri: SVG Kullanımı
Sonuç
Projeleriniz için zaten SVG kullanıyor musunuz? Değilse, değişikliği yapmaya hazır mısınız?
SVG neredeyse her gün popülerlik kazanıyor ve açık kaynaklı bir araç olduğu için bu değişiklikler ve ilerlemeler hemen sizin için okunuyor. Herhangi bir satıcıya veya ürüne bağlı değilsiniz ve modern web'de tamamen uyumlu görüntüler oluşturabilirsiniz.
Stok fotoğraf yaratıcı pazarın izniyle .
