SVG Dosyası Ne İçin Kullanılır ve Geliştiriciler Bunları Neden Kullanmalı?

SVG'lerin benimsenmesi ve uyarlanması, şüphesiz son yıllarda tasarım ve geliştirici topluluğunun başına gelen en sevdiğim şeylerden biri.

Bir tasarımcı olarak, geliştirme devri sırasında her zaman meydana gelen birçok baş ağrısının aspiriniydiler.

Bugün SVG'lerin ne olduğuna ve neden onları kullanmaya başlamanız gerektiğine ve kendiniz bir tasarımcı olmasanız bile nasıl başlamanız gerektiğine bir göz atacağım.

Ve doğrudan iyi şeylere geçmek istiyorsanız, henüz kullanmadıysanız SVG'leri neden kullanmanız gerektiğinin ana nedenleri burada.

Ölçeklenebilir Vektör Grafikleri Kullanmanız İçin 7 Neden

1. SVG'ler ölçeklenebilirdir ve herhangi bir çözünürlükte mükemmel piksel oluştururken JPEG'ler, PNG'ler ve GIF'ler olmaz.
2. SVG'ler vektör görüntüleridir ve bu nedenle dosya boyutu genellikle bitmap tabanlı görüntülerden çok daha küçüktür.
3. Gömülü SVG'ler CSS kullanılarak şekillendirilebilir.
4. Doğrudan işaretlemeye anahtar kelimeler, açıklamalar ve bağlantılar eklemenize izin veren SEO dostudur.
5. SVG'ler HTML'ye gömülebilir; bu, önbelleğe alınabilecekleri, doğrudan CSS kullanılarak düzenlenebilecekleri ve daha fazla erişilebilirlik için dizine eklenebilecekleri anlamına gelir.
6. Onlar geleceğin kanıtı. SVG'ler süresiz olarak ölçeklenebilir, yani 8K ve ötesi gibi daha yeni görüntüleme teknolojilerinde her zaman piksel mükemmelliğine dönüştürülür.
7. SVG'ler doğrudan veya CSS veya JavaScript kullanılarak canlandırılabilir, bu da web tasarımcılarının bir siteye etkileşim eklemesini kolaylaştırır.

SVG Nedir ve SVG Ne İçin Kullanılır?

Bir saniye teknik konuşalım. SVG, “Ölçeklenebilir Vektör Grafikleri” anlamına gelir ve XML tabanlı bir vektör görüntü formatıdır.

SVG görüntüleri ağırlıklı olarak web'de bulunur ve JPEG, PNG ve WebP görüntü türleriyle karşılaştırılabilir kullanımları olsa da DNA'ları son derece farklıdır.

En basit haliyle, kaputun altında bir SVG dosyası şöyle görünür:

 <svg xmlns="http://www.w3.org/2000/svg"> <rect width="250" height="250" fill="#0000FF"/> </svg>

Bu SVG dosyası 250 piksel genişliğinde mavi bir kare oluşturacaktır.

Peki SVG'ler nasıl farklıdır?

JPEG, PNG ve GIF gibi geleneksel görüntü türleri bitmap tabanlıdır (veya raster tabanlıdır), yani belirli bir miktarda pikselden oluşurlar. Tipik olarak bu, bu tür bir görüntüyü artırmaya veya azaltmaya başladığınızda, tırtıklı çizgiler, bulanık eserler ve pikselli bir karmaşa ile karşı karşıya kaldığınız anlamına gelir.

Ayrıca, Google tarafından geliştirilen ve JPEG, PNG ve GIF dosya biçimlerinin tamamını tekil ve daha esnek bir çözüm olarak değiştirmeyi amaçlayan WebP'nin daha yeni görüntü türüne de sahibiz. WebP'yi tartışmak, bu makaleyi yardımcı olmaktan çok kafa karıştırıcı yapacakmış gibi hissediyorum, çünkü bu tamamen farklı bir konu ve başka bir makalede ele almaktan mutluluk duyacağım.

Kısacası, WebP görüntü türü, çok daha küçük dosya boyutları oluşturmak ve web'de farklı görüntü türleri kullanma ihtiyacını ortadan kaldırmak için oluşturuldu. Şu anda Safari tarafından desteklenmiyor ve henüz web'de önemli bir ilgi görmedi.

Google Developers sitesi aracılığıyla WebP hakkında daha fazla bilgi edinebilir veya WebP sıkıştırmasının yanı sıra WP Offload Media kullanarak WebP görüntülerinin nasıl sunulacağını biraz daha ayrıntılı olarak tartışan kendi Ian Jones'umuz tarafından yazılan bu makaleyi okuyabilirsiniz.

Doğru, yola geri dön…

Peki SVG formatının bitmap tabanlı görüntülerden farkı nedir? Çözünürlükten bağımsız oldukları anlamına gelen vektör tabanlıdırlar. SVG görüntüleri piksellerden ziyade şekillerden oluşur. Bu, kaliteden ödün vermeden süresiz olarak ölçeklenebilecekleri anlamına gelir. Büyülü.

Tamam, ne oldukları hakkında bu kadar yeter. Neden onları kullanmalıyız?

SVG'lerin Müthiş Avantajları

Piksel-Mükemmel Ölçekleme!

Bunu daha önce detaylandırdım, ancak bir PNG veya JPEG görüntüsü üzerinde bir SVG kullanmanın belki de en büyük avantajını hızlı bir şekilde düşünmeliyiz.

SVG grafikleri süresiz olarak ölçeklenir ve her çözünürlükte süper keskin kalır.

Düşünülecek yiyecek: Bu gerçeğe rağmen, bir gezinme çubuğu simgesi gibi az miktarda ayrıntı içeren küçük SVG'ler, bir vitrin afişinde veya bir reklam panosunda kullanılmak üzere şişirildiğinde yerinde görünmeyebilir veya çok basit görünebilir. Her durum farklıdır, ancak bir SVG'yi ölçekleyip ölçeklendirmemeye karar verirken bağlam ve iyi bir göz önemlidir.

Daha Küçük Dosya Boyutları

Bu da bir başka önemli avantajdır. Vektör görüntülerinin doğası gereği, dosya boyutunu belirleyen veriler kullanılan katmanlar, efektler, maskeler, renkler ve degradelerdir.

Buna karşılık, bitmap tabanlı görüntüler, kullanılan renklerin yanı sıra görüntüdeki her pikseli kaydeder. Kuşkusuz, bundan biraz daha karmaşık, ancak bundan çıkarılması gereken şey, çoğunlukla, bitmap tabanlı bir görüntü dosyasının bir SVG karşılığına göre daha pahalı olacağıdır.

Bunun da ötesinde, SVG dosyalarınızı gzip ile sıkıştırarak boyutunu küçültebilirsiniz. Bu, gzip sıkıştırması etkinleştirilmişse sunucudan veya CDN'den daha az bayt gönderilmesi gerektiği anlamına gelir.

CSS Kullanarak Bir SVG'ye Stil Verebilirsiniz

Doğru. Bu da, renk değişikliği gibi küçük bir değişiklik yapmak için herhangi bir tasarım yazılımında yolunuzu bilmeniz gerekmediği anlamına gelir. Aslında, herhangi bir web tasarımı veya ön uç geliştirmesi yaptıysanız, bir şekle degrade eklemekte veya bir konturun kalınlığını artırmakta zorluk çekmezsiniz.

SEO Dostu

Bu yazının başında belirttiğim gibi, SVG'ler XML tabanlıdır; bu, içeriğin arama motorları için daha tanınabilir olmasını sağlamak ve genel erişilebilirliği geliştirmek için anahtar kelimelerin, açıklamaların ve bağlantıların eklenebileceğini belirtir.

Bitmap tabanlı görüntülerle, SEO için yalnızca "başlık" ve "alt" niteliklerine sahipsiniz.

SVG'ler HTML'ye Gömülebilir

Sunucudan harici bir kaynak olarak indirilmesi gereken diğer görüntü türlerinin aksine, SVG'ler HTML koduna gömülebilir. Peki bu neden avantajlı?

Bu, erişilebilirlik için harika olan aranabilecekleri ve dizine eklenebilecekleri anlamına gelir. CSS kullanarak bu SVG'nin stilini de değiştirebilirsiniz. Ayrıca, HTML sayfalarınızı önbelleğe alıyorsanız, bu, gömülü SVG'lerin de otomatik olarak önbelleğe alınacağı anlamına gelir.

SVG'ler Geleceğin Kanıtıdır

Bence bu, özellikle ölçeklenebilirlik söz konusu olduğunda, oldukça gözden kaçan bir şey. SVG'den önce, piksel yoğunluğunun tasarım topluluğunda sıcak bir konu olduğu, yeni cep telefonları ve tabletlerin güzel ve zengin ekranlarla sahneye çıktığı bir zamanı hatırlıyorum.

Bütün bunlar harikaydı. Ancak bu, web sitelerinde kullanılan çoğu JPEG veya PNG resimlerinin artık yeterince yüksek çözünürlükte olmadığı ve elde taşınan cihazlarda çöp gibi göründüğü anlamına geliyordu.

Çözüm? İki katı çözünürlükte görüntünün başka bir örneğini oluşturun ve “@2x” olarak etiketleyin. Şimdi görüntü, en son iPhone'da güzel ve net görünüyordu.

Mantıklı olsaydınız, kullanıcının çözünürlüğünü de önceden tespit ettiniz ve dosya boyutu açısından daha pahalı olduğu için yalnızca gerekirse “@2x” görüntüsünü sundunuz.

Konunun dışına çıkıyorum, ancak daha yüksek piksel yoğunluğuna sahip yeni ekranlar hem tasarımcılar hem de geliştiriciler için ek baş ağrıları oluşturuyordu. Bir SVG'nin doğası gereği, ileri teknoloji cihazlar 8K ve üzeri çözünürlüklere ulaştığından bunun artık komplikasyon yaratmadığı anlamına geliyordu.

Canlandırılabilirler

SVG'lerin gerçekten mükemmel olduğu yer burasıdır. SVG'leri doğrudan bir metin düzenleyiciyle düzenleme yeteneğine sahip olmak, animasyonlanabilecekleri anlamına gelir, bu da sitenize biraz etkileşim eklemeyi çok kolaylaştırır. Bu animasyonlar istediğiniz kadar basit veya karmaşık olabilir. HTML'ye benzer şekilde, SVG'ler de DOM (belge nesne modeli) tarafından temsil edilir, yani JavaScript ile de manipüle edilebilirler.

SVG'leri canlandırmakla ilgileniyorsanız, SVG'lerinizi hayata geçirmek için Airbnb'nin popüler Lottie animasyon çerçevesini nasıl kullanacağınıza ilişkin bir kılavuzla birlikte bu konuyu başka bir makalede ele aldım.

İşte WP Migrate DB Pro markamıza dayalı olarak söz konusu makale için yaptığım örnek bir animasyon.

Kalemi Gör
Deliciousbrains (@deliciousbrains) tarafından MDB Kuş Animasyonu
CodePen'de.

En iyi kısım? Dosya boyutu ufacık bir 11 Kilobayt!

SVG'nin Dezavantajları

Hiçbir sey mükemmel değildir. Ve potansiyel olarak SVG'ler yerine raster görüntüleri tercih etmeniz gereken birkaç örnek var.

Karmaşık Görüntü

Fotoğraflarla uğraşıyorsanız, şüphesiz bitmap tabanlı bir görüntü seçmelisiniz. Zaten bir SVG fotoğrafıyla karşılaşacağınız pek çok örnek yoktur, bu nedenle bu kararı vermeniz pek olası değildir.

Benzer şekilde, karmaşık bir SVG'nin o kadar çok şekil, renk, degrade ve maske içerdiği ve aslında dosya boyutunda bir JPEG veya PNG eşdeğerinden daha ağır basmaya başladığı bazı durumlar vardır. Bununla çok sık karşılaşmadım, ama bu kesin bir olasılık.

Bir bitmap görüntüsü kullanmanız gerekiyorsa, görüntünüz saydamlık içeriyorsa PNG, içermiyorsa JPEG kullanmayı unutmayın. JPEG görüntüleri saydamlığı desteklemez ve bu nedenle fotoğraflara daha uygundur. Alternatif olarak, bu makalenin başında kısaca tartışıldığı gibi, tüm bitmap tabanlı görüntüler için WebP'yi kullanarak yukarıdakileri basitleştirebilirsiniz.

optimizasyon

Bu, Adobe Illustrator veya Inkscape gibi bir tasarım uygulamasında SVG'ler oluştururken bazı TLC'ye dayanır. Boş grup klasörleri ve kullanılmayan gereksiz katmanlar, genel dosya boyutuna gereksiz gereksiz dosyalar ekleyebilir. Ek olarak, eski SVG'ler genellikle işaretlemede bol miktarda çöp içerir ve gerekenden çok daha pahalıdır. Bu tür komplikasyonları önlemek için tasarım sürecinde dışa aktardığımda tüm SVG'lerimi bir küçültücü aracılığıyla çalıştırıyorum.

SVG dosyalarını optimize etmek için Node.js aracı da dahil olmak üzere birçok optimizasyon aracı vardır. Ve yorumlarda SVGOMG adlı bu düğüm olmayan çözümü paylaşan Jordan'a teşekkür ederiz.

SVG'ler, doğru şekilde oluşturulmamış veya optimize edilmemişse, eşdeğer PNG'den çok daha ağır basabilir. Ancak genellikle dosya boyutu daha küçük olacaktır. PNG eşdeğerinin dosya boyutunun iki katı olan tek bir SVG ile karşılaşırsanız, ertelemeyin.

Tarayıcı Desteği

Bu eskisi kadar büyük bir sorun değil. Ancak, herhangi bir nedenle Chrome veya Firefox karşıtıysanız veya Internet Explorer gibi çok eski web tarayıcılarını desteklemeniz gerekiyorsa, SVG ile bazı uyumluluk sorunlarıyla karşılaşabilirsiniz.

Bununla birlikte, SVG'leri kullanmaya devam edebilir ve JPEG veya PNG yedeklerini bir failsafe olarak uygulayarak bu komplikasyonu önleyebilirsiniz.

SVG Simgeleri Arkadaşınızdır

Simgeler, bu dosya biçiminin tüm avantajlarının gerçekten ortaya çıktığı yerdir. Tasarım ve geliştirme sürecini büyük ölçüde basitleştiren çeşitli renk ve boyutlarda birden fazla simge artık gerekli değildir. Bunu daha fazla ifade etmek için, SVG'ler ortaya çıkmadan önce hayatın nasıl olduğunu tekrar ziyaret etmek istedim…

Hafıza Yolunda Bir Yolculuk

SVG'ler bir şey olmadan önce, simgeler hem tasarımcılar hem de geliştiriciler için dürüst olmak gerekirse biraz acı vericiydi. Çoğu zaman, bir ürün 20'den fazla simgeye sahip olacaktır ve her simge etkin bir durum (genellikle birincil renk), etkin olmayan/devre dışı bir durum ve bazen de ek durumlar (ör. fareyle üzerine gelme durumu) gerektirir.

Daha önce tartışıldığı gibi, bitmap görüntüleri CSS kullanılarak düzenlenemez, bu nedenle her simge durumu kendi dosyasını gerektiriyordu.

Ayrıca, daha yüksek piksel yoğunluklu ekranlar bir şey haline geldiğinde, daha yüksek çözünürlüklü ekranlar için görüntü varlıklarımızın “@2x” ve “@3x” versiyonlarını oluşturmamız gerektiğinden de bahsetmiştim.

Bu bilgilerle pratik bir şey yapma niyetim yoktu, ancak bu bölümü yazarken, bitmap sürümleri üzerinde bir simge seti SVG kullanarak ne kadar dosya boyutunu telafi edebileceğimi incelemeye karar verdim.

Materyal Tasarımından 3 farklı renkte ihtiyacım olan bir kalp SVG ikonum var. Bunlar aktif durum, pasif durum ve devre dışı durum.

Simgemizin aktif durumunu kullanarak, CSS stilini ayarlayarak diğer 2 simge durumunu da üretebiliriz. Bu nedenle, 3 simgenin tümünü oluşturmak için yalnızca bir SVG dosyasına ihtiyacımız var!

Bu simgelerin bitmap sürümlerini oluşturmak için her simge durumu için bağımsız bir dosyaya ihtiyacımız olacak.

Ek olarak, bitmap sürümlerinin her tür cihazda keskin görünmesini sağlamak için, temel çözünürlüğün boyutlarının iki ve üç katına (sırasıyla “@2x” ve “@3x”) bu simgelerden oluşan bir set oluşturmamız gerekir.

Bu, aynı sonuçları elde etmek için kullanabileceğimiz tek SVG dosyasının aksine, yönetmemiz için bize 9 PNG simgesi bırakır.

SVG tek bir kilobayta karşılık gelirken PNG simgelerinin tümü 29 KB'a kadar hesaplar.

Elbette, 29KB kulağa önemli gelmiyor, ancak bu tek bir simgeye atıfta bulunuyor. Kullanacak 30 simgemiz olsaydı, dosya boyutundaki fark daha karmaşık hale gelir…

SVG: 1KB * 30 = 30KB.

PNG: 29KB * 30 = 870KB.

Bu, tek SVG'ye göre %2900'lük bir artış. Tabii ki, bunlar ortalamalar, ancak yine de boyutta muazzam bir artış.

Umarım bu, özellikle simge setleri ile SVG'lerin kullanımının ve yönetiminin ne kadar basit olduğunu göstermiştir.

Deneyimden yola çıkarak, PNG'ler yerine SVG simgelerini seçerken genel dosya boyutunda genellikle en az %50'lik bir azalma bekleyebilirsiniz. Özellikle SVG simgelerinizi optimize ediyorsanız ve bunların her tür çözünürlükte veya ekranda mükemmel şekilde görüntülenmesini istiyorsanız.

SVG Sprite'ları

Hem lezzetlibrains.com'da hem de spinupwp.com'da bir sürü SVG kullanıyoruz ve bir sayfa yüklemesinde yalnızca bir kez yüklenebilen bir SVG dosyası klasöründen bir hareketli grafik oluşturmak için düzgün bir SVG iş akışı kullanıyoruz. Her SVG dosyası için HTTP isteği. Bu Gulp görevini varlık oluşturma görevimizin bir parçası olarak tüm SVG'leri bir klasörde bir araya getirmek, gereksiz pürüzlerden arındırmak ve her bir SVG'yi <symbol> olarak bir PHP dosyasında formüle etmek için kullanıyoruz:

 gulp.task( 'svg', function() { return gulp.src( 'assets/svg/*.svg' ) .pipe( svgmin( { plugins: [ { removeViewBox: false }, { removeUselessStrokeAndFill: true }, { removeEmptyAttrs: false }, { removeUnknownsAndDefaults: false }, { cleanupIDs: false }, { removeUselessStrokeAndFill: true } ] } ) ) .pipe( rename( { prefix: 'icon-' } ) ) .pipe( svgstore( { inlineSvg: true } ) ) .pipe( rename( 'svgs.php' ) ) .pipe( gulp.dest( 'template-parts' ) ); } );

Ardından bu görevin verdiği svgs.php dosyasını <body> etiketinin başına temamıza ekliyoruz:

add_action('wp_body_open', function() {
get_template_part('şablon-parçaları/svgs');
});

Ve devasa SVG'yi CSS ile gizleyin, böylece harekete geçinceye kadar tamamen gizlenir:

 body > svg { display: none; }

Şimdi eğlenceli kısma. Örneğin, hareketli grafiğimize <symbol> olarak eklenen /assets/svgs/logo.svg olarak bir SVG olarak logomuz var, bu nedenle logoyu oluşturmak için bunu temamızın şablon dosyalarındaki HTML'mize ekleyebiliriz:

 <svg><use xlink:href="#icon-logo" /></svg>

Bu oldukça şaşırtıcı!

Ücretsiz SVG Simgeleri Nereden Alınır?

SVG'leri ve simge setlerini almak için kullandığım birkaç farklı kaynak burada. Bazıları, simgenin nasıl kullanıldığına bağlı olarak yazara kredi vermenizi gerektirir, bu yüzden bunun bilincinde olun.

düz simge
Malzeme Tasarım Simgeleri
Simgeler8
Ücretsiz Simgeler
Simge Mağazası

Özet

Umarım, bu noktada, henüz yapmadıysanız neden SVG dosya türünü kullanmayı düşünmeniz gerektiğine dair önemli kanıtlar sunmuşumdur. Yönetmeleri daha kolaydır, web sayfalarınızın yüklenme hızını artırırlar ve daha yüksek PPI (inç başına piksel) ile yeni bir çözünürlüklü ekran piyasaya her çıktığında güncelleme gerektirmezler.

Ek olarak, Photoshop veya Sketch (veya bir vektör OG iseniz CorelDRAW) gibi bir tasarım uygulamasına ihtiyaç duymadan veya bunları nasıl kullanacağınızı bilmeden SVG'lerinizi canlandırabilir ve stilinde değişiklikler yapabilirsiniz.

SVG için paylaşmak istediğiniz başka harika ipuçlarınız veya kullanımlarınız var mı? Gelecekteki bir gönderide tartışmamı istediğiniz başka tasarım sorularınız mı var? Aşağıdaki yorumlar bölümünde bize bildirin.