Büyüleyici mobil içerikler oluşturmak, indirilen veri miktarını maksimum görsel etkiyle dengelemek anlamına gelir. 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.
Duyarlı tasarımın çeşitli ekran boyutlarını yönetmenin önemli bir parçası olduğunu hepimiz biliyoruz. SVG, farklı boyutlardaki ekranları kolayca yönetmek için ideal bir çözümdür.
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ına ve işe koyulmanız için bazı optimizasyon ipuçlarına değineceğiz.
Ölçeklendirmeyle ilgili temel bilgiler
Basit bir senaryoyla 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 çok faydalı 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 biçimi incelemek için kullandığımız cihazdan bağımsız olarak ölçeklenen 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. Hata! O kadar küçük ki, yüklenirken hiçbir mobil veri planı neredeyse örtüşecek. Bu da hızlı yüklenmesini ve kullanıcılarınız için ucuz ve hızlı olmasını sağlıyor!
SVG dosyalarının bir başka iyi yanı da, daha fazla küçültmek için GZIP biçiminde sıkıştırılabilmeleridir. 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.
En yeni cihazlardan bazılarına ait örnek dosyamızda, sıkıştırılmış vektör verilerini kullanarak 60 kat avantaj elde ediyoruz. 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 grafikleri 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. Bunu yapmanın kolay yollarından biri, 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 bariz bir şekilde, arka plan resmindeki tüm renklerin daha açık olmasını sağlamaktır. 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;
}
Böyle 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 ortaya çıkan düğme şöyle bir şeyle sonuçlanır:
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 ayarlamak, renk geçişini diyagonal olarak değiştirmemizi sağlar. Bu küçük kod değişikliği:
<linearGradient id="blueshiny" y2="1">
düğmemize farklı bir görünüm verir. Sonuçta aşağıdaki resme benzer bir görünüm elde ederiz.
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 boyanmasının sayfanın aşağısında yatay çizgilerle yapılması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, CSS renk geçişleri için de geçerlidir. Dolayısıyla yalnızca SVG ile ilgili bir durum değildir.
Bu yeni gradyan bilgisini gerçekten deneme amaçlı olduğumuzu düşünüyorsanız aşağıdaki kodu ekleyerek HTML5 logomuzun arkasına havalı 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, 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 renk tonu elde edilir.
İçeriği bir masaüstü tarayıcısında yükler ve aşırı en boy oranlarında yeniden boyutlandırırsanız, sayfanın üst/alt veya sol/sağ tarafında 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, doğrusal 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 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 çizgiyle çizilmiş çizimler için cephanelikte bir 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 yararlı 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 etkili bir yedek ile SVG içeriği çizmek ve canlandırmak üzere kullanışlı bir API sağlayan JavaScript kitaplığıdır.
- Slippery Rock Üniversitesi'nin SVG Kaynakları: Mükemmel bir SVG Primer bağlantısı içerir.