Göz kamaştıran mobil içerikler oluşturmak, indirilen veri miktarı ile maksimum görsel etki arasında bir denge kurmak anlamına gelir. Vektör grafikler, minimum bant genişliği kullanarak etkileyici görsel sonuçlar elde etmenin harika bir yoludur.
Birçok kişi tuvali web'de vektör ve kafes karışımı çizmenin tek yolu olarak düşünür, ancak bazı avantajları olan alternatifler de vardır. Vektör çizimi yapmanın harika bir yolu, HTML5'in önemli bir parçası olan Ölçeklenebilir Vektör Grafikleri (SVG) kullanmaktır.
Duyarlı tasarımın, değişen ekran boyutlarının büyük bir parçası olduğunu biliyoruz ve SVG'nin farklı boyuttaki ekranları kolayca yönetmek için ideal olduğunu biliyoruz.
SVG, vektör tabanlı çizimleri sunmak için harika bir yöntemdir ve bit eşlemleri mükemmel bir şekilde tamamlar, kesintisiz tonlu resimler için daha uygundur.
SVG ile ilgili en yararlı şeylerden biri, çözünürlükten bağımsız olmasıdır. Yani cihazınızda kaç pikseliniz olduğunu düşünmenize gerek kalmaz, sonuç her zaman ölçeklenir ve tarayıcı tarafından optimize edilerek harika bir görünüm elde edilir.
Google Drive'daki Çizim uygulaması, Inkscape, Illustrator, Corel Draw ve daha birçok uygulama gibi popüler yazma araçları SVG oluşturur. Dolayısıyla, içerik oluşturmanın birçok yolu vardır. SVG öğelerini kullanmanın bazı yollarını inceleyeceğiz ve başlamanıza yardımcı olacak bazı optimizasyon ipuçlarını inceleyeceğiz.
Ölçeklendirmenin temelleri
Basit bir senaryoyla başlayalım: Tam sayfa grafiğinin web sayfanızın arka planı olmasını istiyorsunuz. Şirket logonuzun veya arka planda tam ekran gibi bir özelliğin her zaman kullanılması çok kullanışlı olurdu, ancak elbette farklı ekran boyutlarıyla birlikte bunu yapmak da oldukça zordur. Örnek olarak, mütevazı HTML5 logosuyla başlayalım.
Aşağıda HTML5 logosu gösterilmektedir. Sizin de tahmin ettiğiniz bu logo bir SVG dosyasıdır.
Logoyu tıklayın ve herhangi bir modern tarayıcıda görüntüleyin. Logonun her boyuttaki pencereye sorunsuzca ölçeklendiğini göreceksiniz. Favori tarayıcınızda açmayı deneyin, pencereyi yeniden boyutlandırın ve görüntünün herhangi bir büyütmede net olduğundan emin olun. Bunu bir bit eşlem resmiyle denersek, karşılaştığımız her ekran için çok farklı boyutlarda içerik sunmamız ya da korkunç pikselleştirilmiş ölçeklendirilmiş resimler kullanmak zorunda kalırdık.
Peki en önemli nokta ne? Fark etmemiş olsaydınız, birlikte bakmak için kullandığımız cihazdan bağımsız olarak ölçeklenen tek biçim budur. Bu nedenle, ekran veya pencere boyutlarının ne kadar düzgün olduğunu bilmek zorunda kalmadan kullanıcılarımıza yalnızca bir öğe sunmamız yeterli oluyor.
Bekleyin, hepsi bu kadar. HTML5 logosu sadece 1.427 bayt! Tüh! Bu kadar küçük bir mobil veri planı yüklenirken neredeyse hiçbir mobil veri planına zarar vermez. Bu da yüklemenin hızlı olmasını ve kullanıcılarınız için ucuz ve hızlı olmasını sağlar!
SVG dosyalarının bir başka güzel yönü de, daha da küçültmek için GZIP'nin sıkıştırılabilmesidir. SVG'yi bu şekilde sıkıştırdığınızda dosya uzantısının ".svgz" olarak değiştirilmesi gerekir. HTML5 logosunda, sıkıştırıldığında 663 bayta kadar küçülür ve çoğu modern tarayıcı bunu kolaylıkla işleyebilir!
En son cihazlardan bazılarındaki örnek dosyamızda, sıkıştırılmış vektör verileri kullanıldığında 60 kat avantaj gibi bir fayda görüyoruz! Ayrıca, bu karşılaştırmaların PNG yerine JPEG ve SVG arasında yapıldığını unutmayın. Ancak JPEG, SVG veya PNG'den daha düşük kaliteye neden olan kayıplı bir biçimdir. PNG kullanırsak 80 kattan daha büyük avantaj elde edebiliriz.
Ama elbette PNG ve JPEG eşit değildir. Bazı optimizasyon ipuçlarında PNG yerine JPEG kullanmanız önerilir ancak bu her zaman çok iyi bir fikir değildir. Aşağıdaki resimlere göz atın. Soldaki resim, HTML5 logosunun sağ üst kısmının 6x büyütülmüş bir PNG resmidir. Sağdaki resim aynı ancak JPEG ile kodlanmış.
JPEG'de dosya boyutu kaydetmenin bir maliyeti olduğu açıktır. Keskin kenarlardaki renk bozuklukları nedeniyle muhtemelen retinanız gözlüğe ihtiyaç duyar:-) Adil olmak gerekirse JPEG fotoğraflar için optimize edilmiştir ve bu nedenle vektör resimler için iyi değildir. Her durumda, SVG sürümü PNG ile aynı kalitededir. Bu nedenle, hem dosya boyutu hem de netlik açısından tüm hesaplarda kazançlı çıkar.
Vektör Arka Planları Oluşturma
Bir sayfanın arka planı olarak vektör dosyasını nasıl kullanabileceğinize bir göz atalım. Kolay bir yöntem, arka plan dosyanızı CSS sabit konumlandırmasını kullanarak bildirmektir:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Ekranın boyutu ne olursa olsun, resmin net ve net kenarlarla güzel bir şekilde boyutlandırıldığını göreceksiniz.
Daha sonra, elbette arka plana bazı içerikler yerleştirmek istiyoruz.
Ancak görebileceğiniz gibi, metni okuyamadığımız için sonuç ideal olmaktan uzaktır. Peki, ne yapmamız gerekir?
Arka plan daha güzel görünecek şekilde ayarlanıyor
Yapmamız gereken şey, arka plan resmindeki tüm rengin daha açık olmasını sağlamaktır. Bu, CSS opaklık özelliğini veya SVG dosyasının kendisinde şeffaflık özelliğini kullanarak kolayca gerçekleştirilebilir. Bu kodu CSS içeriğinize ekleyerek bu işlevin çalışmasını sağlayabilirsiniz:
#bg {
opacity: 0.2;
}
Bu durumda şöyle bir sonuç elde edersiniz:
Bu çözüm kolay olsa da mobil cihazlarda performansta sorun yaratabilir. Mevcut mobil tarayıcıların çoğu için opaklık özelliğinin kullanımı, opak nesnelere kıyasla çok daha yavaş olabilir.
Daha iyi bir çözüm
Orijinal SVG içeriğindeki rengi değiştirmek, CSS ile opaklığı ayarlamaktan çok daha iyidir. Burada, kullanılan renkler değiştirildiğinde soluk görünecek şekilde değiştirilmiş ve opaklık özelliğinden tamamen kaçınılmış olan HTML5 logomuzu görebilirsiniz. Dolayısıyla, aşağıdaki arka plan resmi, opaklığın değiştirilmesiyle elde edilen sonuçla aynı görünmektedir, ancak resim çok daha hızlı boyanır ve işlem sırasında CPU süresinden tasarruf etmemiz ve değerli pil ömründen tasarruf etmemiz sağlanır.
Bazı temel bilgileri gayet iyi kavradığımıza göre şimdi başka özelliklere geçebiliriz.
Renk Geçişlerini Verimli Şekilde Kullanma
Bir düğme oluşturmak istediğimizi düşünelim. Köşeleri güzel yuvarlatılmış bir dikdörtgen oluşturarak başlayabiliriz. Ardından, düğmeye güzel bir doku kazandırmak için hoş bir doğrusal renk geçişi ekleyebiliriz. Bunun için kullanılacak kod aşağıdaki gibi görünebilir:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
Elde edilen düğmenin sonucu şuna benzer:
Eklediğimiz renk geçişinin soldan sağa nasıl gittiğine dikkat edin. Bu, SVG'deki varsayılan gradyan yönüdür. Ancak estetik ve performans gibi birkaç farklı nedenden ötürü daha iyisini yapabiliriz. Daha iyi görünmesi için gradyan yönünü değiştirmeyi deneyelim. Çizgisel renk geçişi üzerinde "x1", "y1", "x2" ve "y2" özelliklerinin ayarlanması, dolgu renginin yönünü kontrol eder.
Sadece "y2" özelliğini ayarlamak, renk geçişini çapraz olarak değiştirebilmemizi sağlar. Bu nedenle, bu küçük kod değişikliği:
<linearGradient id="blueshiny" y2="1">
düğmemiz için bize farklı bir görünüm veriyor. Düğme, aşağıdaki resimde olduğu gibi sonuçlanıyor.
Ayrıca, şu küçük kod değişikliğiyle gradyanı yukarıdan aşağıya doğru gitmek üzere kolayca değiştirebiliriz:
<linearGradient id="blueshiny" x2="0" y2="1">
ve sonuç aşağıdaki resim gibi görünür.
Peki, gradyanın farklı açıları hakkındaki tüm konuşmaları neden bu kadar soruyorsunuz?
Son örneğin, renk geçişinin yukarıdan aşağıya doğru ilerlediği en hızlı çizim olduğu ortaya çıktı. Dikey (yukarıdan aşağıya) renk geçişlerinin neredeyse tek bir renk kadar hızlı boyanmasını sağlayan tarayıcı kodu yazan grafik meraklıları arasında çok az bilinen bir sır. (Bunun nedeni, bir nesnenin boyanmasının, sayfanın aşağısındaki yatay çizgiler halinde yapılmasıdır. Çizim kodu, rengin her satırda değişmediğini anlayarak bunu optimize eder).
Bu nedenle, sayfa tasarımınızda renk geçişlerini kullanmayı seçtiğinizde, dikey renk geçişleri daha hızlı olur ve yan etki olarak daha az pil tüketir. Bu hızlandırma, CSS renk geçişleri için de geçerli olduğundan yalnızca SVG işi değildir.
Bu yeni gradyan bilgisiyle ilgili olarak gerçekten maceracı olduğumuzu düşünürsek, aşağıdaki kodu ekleyerek HTML5 logomuzun arkasına güzel bir gradyan ekleyebiliriz:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
Yukarıdaki kod, hızlı ve düz renkli bir arka plan kadar hızlı çalışan, çok renkli, hafif bir renk tonu vermek için HTML5 logomuzun arka planına soluk dikey bir doğrusal gradyan ekler.
İçeriği bir masaüstü tarayıcısında yükler ve aşırı en boy oranlarına göre yeniden boyutlandırırsanız üst/alt veya sol/sağ kenarlarda beyaz çubuklar görürsünüz. Yine de, sonuçta oluşan arka planın üzerinde yapılan kod değişikliklerinin ardından şöyle görünecektir:
Kolayca Animasyon Yapın
Şimdiye kadar, sayfanızın arka planı olarak SVG renk geçişini kullanmanın ne anlamı olduğunu merak ediyor olabilirsiniz. Aslında bunu CSS gradyanlarıyla yapmak mantıklı olabilir, ancak SVG'nin avantajlarından biri renk geçişinin DOM içinde bulunmasıdır. Bu, içeriği komut dosyasıyla değiştirebileceğiniz, daha da önemlisi, içeriğinize ince değişiklikler eklemek için SVG'nin yerleşik animasyon özelliğinden yararlanabileceğiniz anlamına gelir.
Örnek olarak, çizgisel renk geçişi tanımını aşağıdaki kodla değiştirerek renkli HTML5 logomuzu değiştireceğiz:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Yukarıdaki değişikliklerin sonuçlarını görmek için aşağıdaki resme bakın.
Kod, tanımladığımız tüm farklı renk duraklarıyla, çalışması 20 saniye süren sürekli bir döngü halinde doğrusal renk geçişimizin renklerini değiştirir. Bunun etkisi, renk geçişinin sayfada hiç durmayan bir sürekli hareket ediyormuş gibi görünmesidir.
İşin güzel yanı, komut dosyasının gerekli olmamasıdır! Bu nedenle, söz konusu sayfada referans verilen bir resim olarak çalışır ancak komut dosyası ihtiyacını ortadan kaldırarak mobil CPU'daki iş yükünü de azaltır.
Ayrıca tarayıcının kendisi, boyama konusundaki bilgisinden yararlanarak gösterişli animasyonda CPU ek yükünün minimum düzeyde kullanılmasını sağlayabilir.
Dikkat edilmesi gereken bir nokta var: Bazı tarayıcılar bu animasyon tarzını hiç işlemez. Ancak bu durumda, güzel renkli bir arka plan elde edersiniz, ancak arka plan değişmez. Bu sorun, komut dosyası (ve requestAnimationFrame) kullanılarak çözülebilir, ancak bu makaleden biraz daha ileride bir çalışma vardır.
Unutulmaması gereken bir diğer nokta da, bu sıkıştırılmamış SVG dosyasının yalnızca 2.922 bayt olmasıdır. Bu boyut, böylesine zengin bir grafik efekti sağlamak için inanılmaz derecede küçük olduğundan, süreç boyunca kullanıcılarınızın ve söz konusu veri planlarınızın mutlu olmasını sağlar.
Nereden nereye?
SVG'nin ideal olmadığı, fotoğraf ve videoların diğer biçimlerde daha iyi temsil edildiği birçok durum vardır. Metin de diğer bir öğedir. Yerel HTML ve CSS genellikle çok daha iyi çalışır. Ancak, çizimler için cephaneliğinizdeki bir araç olarak ideal seçim olabilir.
SVG grafiklerinin birkaç temel temel kullanımına değindik. Burada, minimum indirme miktarıyla tam ekran canlı grafikler sağlayan küçük içeriklerin ne kadar kolay olduğunu gösterdik. İçerikte yapılacak küçük geliştirmeler, çok küçük miktarlarda işaretlemeyle muhteşem grafik sonuçları oluşturabilir. Bir sonraki makalede, SVG içinde oluşturulan animasyonun daha basit ve güçlü efektler için nasıl kullanılabileceği ve mobil grafik sitenizi yazmak için doğru aracı seçmek amacıyla tuval kullanımının SVG ile nasıl karşılaştırılacağı ile ilgili daha fazla ayrıntıya göz atacağız.
Diğer faydalı kaynaklar
- Inkscape, dosya biçimi olarak SVG'yi kullanan açık kaynaklı bir çizim uygulamasıdır.
- Binlerce SVG resmi içeren büyük bir açık kaynak küçük resim kitaplığını Küçük Resim'i açın.
- Spesifikasyonların, kaynakların vb. bağlantılarını içeren W3C SVG Sayfası
- Raphaël, eski tarayıcılar için mükemmel yedek ile SVG içeriği çizmek ve canlandırmak için kullanışlı bir API sağlayan bir JavaScript kitaplığıdır.
- Slippery Rock Üniversitesi'nden SVG Kaynakları - Harika bir SVG Primer'a bağlantı içerir.