Kullanıcıların ilgisini çeken mobil içerikler oluşturmak için indirilen veri miktarını görsel etkiyi en üst düzeye çıkaracak şekilde dengelemek gerekir. Vektör grafikleri, minimum bant genişliği kullanarak çarpıcı görsel sonuçlar elde etmenin mükemmel bir yoludur.
Birçok kişi, web'de vektör ve raster karışımı çizmenin tek yolunun kanvas olduğunu düşünür ancak bazı avantajları olan alternatifler de vardır. Vektör çizim elde etmenin mükemmel bir yolu, HTML5'in önemli bir parçası olan Ölçeklenebilir Vektör Grafikleri (SVG)'ni kullanmaktır.
Farklı ekran boyutlarıyla başa çıkmanın önemli bir parçasının duyarlı tasarım olduğunu hepimiz biliyoruz. SVG, farklı boyutlardaki ekranlarla kolayca başa çıkmak için idealdir.
SVG, vektör tabanlı çizgi çizimlerini sunmanın mükemmel bir yoludur ve bit eşlemelere mükemmel bir tamamlayıcıdır. Bit eşlemeleri, sürekli tonlu resimler için daha uygundur.
SVG'nin en kullanışlı özelliklerinden biri, çözünürlüğe bağlı olmamasıdır. Yani cihazınızda kaç piksel olduğunu düşünmeniz gerekmez. Sonuç her zaman tarayıcı tarafından ölçeklendirilir ve harika görünecek şekilde optimize edilir.
Google Drive'daki Çizimler uygulaması, Inkscape, Illustrator, Corel Draw gibi popüler içerik üretme araçları SVG oluşturur. Bu nedenle, içerik oluşturmanın birçok yolu vardır. SVG öğelerini kullanmanın bazı yollarını ve işe koyulmanız için bazı optimizasyon ipuçlarını inceleyeceğiz.
Ölçeklendirmeyle ilgili temel bilgiler
Basit bir senaryoya başlayalım. Web sayfanızın arka planında tam sayfa bir grafik kullanmak istiyorsunuz. Şirket logonuzun veya buna benzer bir öğenin her zaman arka planda tam ekran görünmesi gerçekten yararlı olur ancak elbette farklı ekran boyutları nedeniyle bunu güzel bir şekilde yapmak çok zordur. Bu nedenle, açıklamak için basit HTML5 logosuyla başlayacağız.
HTML5 logosu aşağıda gösterilmektedir. Tahmin edebileceğiniz gibi, bu logo bir SVG dosyası olarak oluşturulmuştur.
Logoyu tıklayıp herhangi bir modern tarayıcıda incelediğinizde, her boyuttaki pencereye mükemmel şekilde ölçeklendiğini göreceksiniz. Dosyayı en sevdiğiniz tarayıcıda açmayı deneyin, pencereyi yeniden boyutlandırın ve resmin her türlü yakınlaştırmada net olup olmadığını kontrol edin. Bunu bir bitmap resimle deneyecek olsak karşılaşabileceğimiz her ekran için birçok farklı boyut yayınlamamız veya korkunç derecede piksel piksel ölçeklendirilmiş resimlerle yetinmemiz gerekir.
Peki asıl sorun ne? Fark etmediyseniz bu, görüntüyü incelemek için kullandığımız cihazdan bağımsız olarak ölçeklendirilen tek biçimdir. Bu nedenle, ekran veya pencere boyutlarını bilmemize gerek kalmadan kullanıcılarımıza yalnızca bir öğe sunmamız yeterli.
Ancak dahası da var. HTML5 logosu yalnızca 1.427 bayttır. Bu boyut, yükleme sırasında mobil veri planınızdan çok az yer kaplar. Bu da yükleme süresini kısaltarak kullanıcılarınız için daha hızlı ve daha ucuz bir deneyim sunar.
SVG dosyalarının bir diğer avantajı, daha da küçültmek için GZIP sıkıştırması yapılabilmesidir. SVG'yi bu şekilde sıkıştırdığınızda dosya uzantısının ".svgz" olarak değiştirilmesi gerekir. Örneğin, HTML5 logosu sıkıştırıldığında yalnızca 663 bayta kadar küçültülebilir ve çoğu modern tarayıcı bunu kolayca işleyebilir.
Örnek dosyamızla en yeni cihazların bazılarında sıkıştırılmış vektör verilerini kullanarak 60 kat avantaj elde ettik. Ayrıca bu karşılaştırmaların PNG yerine JPEG ve SVG arasında yapıldığını unutmayın. Ancak JPEG, kayıplı bir biçim olduğundan SVG veya PNG'den daha düşük kalitede sonuçlar verir. PNG kullanırsak avantaj 80'den fazla olur. Bu da şaşırtıcı bir oran.
Ancak PNG ve JPEG'nin aynı şekilde üretilmediğini de belirtmek isteriz. Birçok optimizasyon ipucunda PNG yerine JPEG kullanmanızı önerilir ancak bu her zaman iyi bir fikir değildir. Aşağıdaki resimlere göz atın. Soldaki resim, HTML5 logosunun sağ üst kısmının 6 kat büyütülmüş PNG resmidir. Sağdaki resim aynıdır ancak JPEG ile kodlanmıştır.
JPEG'de dosya boyutunda tasarruf sağlamanın bir bedeli olduğunu görmek kolaydır. Keskin kenarlarda renk kusurları oluşur ve bu da retinanızın gözlük takmanız gerektiğini düşünmesine neden olabilir:-) Açıkçası, JPEG fotoğraflar için optimize edilmiştir ve bu nedenle vektör grafikler için o kadar iyi değildir. Her durumda, SVG sürümü kalite açısından PNG ile aynıdır. Bu nedenle, hem dosya boyutu hem de netlik açısından her açıdan kazanır.
Vektör Arka Planları Oluşturma
Bir vektör dosyasını sayfanın arka planı olarak nasıl kullanabileceğinize göz atalım. Bunun kolay bir yolu, CSS sabit yerleşimi kullanarak arka plan dosyanızı beyan etmektir:
<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 temiz kenarlara sahip şekilde güzelce boyutlandırıldığını fark edeceksiniz.
Ardından, arka plana bazı içerikler yerleştirmek isteriz.
Ancak gördüğünüz gibi, metni okuyamadığımız için sonuç pek ideal değil. Peki ne yapmalıyız?
Arka planı daha güzel görünecek şekilde ayarlama
Yapmamız gereken ilk şey, arka plan resmindeki tüm renkleri daha açık hale getirmektir. Bu, CSS opaklık özelliği kullanılarak veya SVG dosyasında opaklık kullanılarak kolayca elde edilebilir. Bunu yapmak için CSS içeriğinize şu kodu eklemeniz yeterlidir:
#bg {
opacity: 0.2;
}
Bu işlem sonucunda şuna benzer bir sonuç elde edersiniz:
Bu çözüm kolay olsa da mobil cihazlarda performans açısından sorun oluşturabilir. Mevcut mobil tarayıcıların çoğunda, opak nesnelere kıyasla opaklık özelliğinin kullanılmasıyla çizim yapmak ç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ştirilerek ve bu süreçte opaklık özelliğinden tamamen kaçınılarak soluk görünecek şekilde değiştirilmiş HTML5 logomuzu görebilirsiniz. Bu nedenle, aşağıdaki arka plan resmi opaklığı değiştirmenin sonucuyla aynı görünür ancak aslında çok daha hızlı boyanır ve bu süreçte CPU zamanını ve değerli pil ömrünü korur.
Temel bilgilere hakim olduğumuza göre diğer özelliklere geçelim.
Renk Geçişlerini Verimli Kullanma
Bir düğme oluşturmak istediğimizi varsayalım. Yuvarlak köşeleri olan bir dikdörtgen oluşturarak başlayabiliriz. Ardından, düğmeye güzel bir doku vermek için güzel bir doğrusal degrade ekleyebiliriz. Bunu yapmak için kullanılacak kod şu şekilde olabilir:
<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>
Sonuçta şuna benzer bir düğme elde edersiniz:
Eklediğimiz degradenin soldan sağa doğru gittiğini unutmayın. Bu, SVG'deki varsayılan degrade yönüdür. Ancak estetik ve performans gibi birkaç farklı nedenden dolayı daha iyisini yapabiliriz. Daha güzel görünmesi için renk geçişi yönünü değiştirmeyi deneyelim. Doğrusal renk geçişinde "x1", "y1", "x2" ve "y2" özelliklerini ayarlamak, dolgu renginin yönünü kontrol eder.
Yalnızca "y2" özelliğini ayarlayarak degradeyi çapraz olacak şekilde değiştirebiliriz. Bu küçük kod değişikliği:
<linearGradient id="blueshiny" y2="1">
düğmemize farklı bir görünüm verir. Sonuçta düğmemiz aşağıdaki resme benzer bir görünüme sahip olur.
Bu küçük kod değişikliğiyle degradeyi kolayca yukarıdan aşağıya doğru olacak şekilde de değiştirebiliriz:
<linearGradient id="blueshiny" x2="0" y2="1">
Bu işlem sonucunda aşağıdaki resimdeki gibi bir görünüm elde edersiniz.
Peki, gradyanın farklı açıları hakkında neden bu kadar çok konuşuluyor?
Son örnekte (yukarıdan aşağıya doğru degrade olan) çizim işleminin çoğu cihazda en hızlı olduğu ortaya çıkıyor. Dikey (yukarıdan aşağıya) renk geçişlerinin, tarayıcı kodu yazan grafik meraklıları arasında neredeyse düz renk kadar hızlı boyandığı çok az bilinen bir sırdır. (Bunun nedeni, bir nesnenin sayfanın aşağısında yatay çizgilerle boyanmasıdır. Çizim kodunun temelinde, rengin her satırda değişmediği anlaşılır ve bu nedenle optimize edilir.)
Bu nedenle, sayfa tasarımınızda degrade kullanmayı seçtiğinizde dikey degradeler daha hızlı olur ve yan etki olarak daha az pil tüketir. Bu hızlandırma, yalnızca SVG için değil, CSS renk geçişleri için de geçerlidir.
Bu yeni gradyan bilgisiyle gerçekten maceracı davranmak isterseniz aşağıdaki kodu ekleyerek HTML5 logomuzun arkasına havalı bir gradyan ekleyebilirsiniz:
<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, HTML5 logomuzun arka planına soluk bir dikey doğrusal degrade ekler. Böylece, düz renkli arka plan kadar hızlı çalışan, çok renkli ve ince bir ton elde edilir.
İçeriği masaüstü tarayıcıda yükleyip en yüksek en boy oranına göre yeniden boyutlandırırsanız üst/alt veya sol/sağ kenarlarda beyaz çubuklar görürsünüz. Yukarıda yapılan kod değişikliklerinden sonra ortaya çıkan arka plan şu şekilde görünür:
Kolayca Animasyon Oluşturma
Sayfanızın arka planı olarak SVG gradyanı kullanmanın ne gibi bir avantajı olduğunu merak ediyor olabilirsiniz. CSS renk geçişlerinde bunu yapmak mantıklı olabilir ancak SVG'nin avantajlarından biri, renk geçişinin DOM'da bulunmasıdır. Bu, komut dosyası ile değiştirebileceğiniz anlamına gelir ancak daha da önemlisi, içeriğinize ince değişiklikler eklemek için SVG'nin yerleşik animasyon özelliğinden yararlanabilirsiniz.
Örnek olarak, çizgisel renk geçişi tanımını aşağıdaki koda 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 sonucunu görmek için aşağıdaki resme göz atın.
Kod, 20 saniye süren sürekli bir döngüde, tanımladığımız tüm farklı renk duraklarından geçerek doğrusal renk geçişimizin renklerini değiştirir. Bu sayede degrade, hiç durmadan sürekli bir hareketle sayfanın yukarısına doğru hareket ediyormuş gibi görünür.
Bu yöntemin en güzel yanı, senaryo yazmanıza gerek olmamasıdır. Bu nedenle, bu sayfadan 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ı, süslü animasyonu gerçekleştirmek için minimum CPU yükü kullanılmasını sağlamak amacıyla resimle ilgili bilgisinden yararlanabilir.
Bir uyarımız var: Bazı tarayıcılar bu animasyon stilini hiç işlemez. 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 konu bu makalenin kapsamı dışındadır.
Unutmayın, sıkıştırılmamış bu SVG dosyası yalnızca 2.922 bayttır. Bu, kullanıcılarınızın ve veri planlarının memnun kalmasını sağlayarak bu kadar zengin bir grafik efekti sunmak için inanılmaz derecede küçük bir boyuttur.
Bundan sonra ne yapmalıyız?
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 doğal HTML ve CSS'nin genel olarak çok daha iyi çalıştığı bir diğer alan. Ancak çizgi çizilmiş posterler için araç olarak ideal bir seçim olabilir.
SVG grafiklerinin temel kullanım alanlarından birkaçına değindik. Bu kullanım alanları, minimum indirme boyutuyla tam ekran canlı grafikler sunan küçük içerikler oluşturmanın ne kadar kolay olduğunu gösteriyor. İçerikte yapılan küçük iyileştirmeler, çok az miktarda işaretlemeyle kolayca muhteşem grafiksel sonuçlar oluşturabilir. Bir sonraki makalede, SVG'ye yerleştirilmiş animasyonun daha basit ve güçlü efektler için nasıl kullanılabileceği hakkında daha fazla ayrıntıya değineceğiz ve mobil grafik sitenizi oluşturmak için doğru aracı seçmek amacıyla kanvasın SVG ile kullanımını karşılaştıracağız.
Diğer faydalı kaynaklar
- Inkscape, dosya biçimi olarak SVG kullanan açık kaynak bir çizim uygulamasıdır.
- Open Clip Art, binlerce SVG resmi içeren devasa bir açık kaynak klip resmi kitaplığıdır.
- 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 seçeneklerle SVG içeriği çizmek ve animasyonlu hale getirmek için kullanışlı bir API sağlayan bir JavaScript kitaplığıdır.
- Slippery Rock Üniversitesi'nin SVG Kaynakları: Mükemmel bir SVG Primer bağlantısı içerir.