Membuat konten seluler yang memukau berarti menyeimbangkan jumlah data yang didownload dengan dampak visual yang maksimal. Grafik vektor adalah cara yang bagus untuk memberikan hasil visual yang memukau menggunakan bandwidth minimal.
Banyak orang menganggap kanvas sebagai satu-satunya cara untuk menggambar campuran vektor dan raster di web, tetapi ada alternatif yang memiliki beberapa keunggulan. Cara yang bagus untuk mendapatkan gambar vektor adalah melalui penggunaan Scalable Vector Graphics (SVG) yang merupakan bagian penting dari HTML5.
Kita semua tahu bahwa desain responsif adalah bagian besar dalam menangani berbagai ukuran layar, dan SVG ideal untuk menangani layar ukuran yang berbeda dengan mudah.
SVG adalah cara yang bagus untuk menampilkan gambar garis berbasis vektor dan merupakan pelengkap yang bagus untuk bitmap, yang lebih cocok untuk gambar tone kontinu.
Salah satu hal yang paling berguna tentang SVG adalah tidak bergantung pada resolusi, yang berarti Anda tidak perlu memikirkan jumlah piksel yang Anda miliki di perangkat, hasilnya akan selalu diskalakan dan dioptimalkan oleh browser agar terlihat bagus.
Alat pembuat konten populer seperti aplikasi Gambar di Google Drive, Inkscape, Illustrator, Corel Draw, dan banyak lagi menghasilkan SVG sehingga ada banyak cara untuk membuat konten. Kita akan membahas beberapa cara menggunakan aset SVG, serta beberapa tips pengoptimalan untuk membantu Anda memulai.
Dasar-dasar penskalaan
Mari kita mulai dengan skenario sederhana - Anda ingin grafik sehalaman penuh sebagai latar belakang halaman web Anda. Akan sangat berguna jika logo perusahaan Anda, atau apa pun seperti layar penuh itu, selalu ada di latar belakang, tetapi tentu saja hal itu sangat sulit dilakukan dengan baik dengan berbagai ukuran layar yang ada. Jadi, untuk mengilustrasikannya, kita akan memulai dengan logo HTML5 yang sederhana.
Logo HTML5 ditampilkan di bawah - dan seperti yang Anda duga, logo ini berasal dari file SVG.
Klik logo dan lihat di browser modern apa pun, Anda akan melihat bahwa logo tersebut diskalakan dengan baik ke jendela berukuran apa pun. Cobalah membukanya di browser favorit Anda, ubah ukuran jendela dan amati bahwa gambarnya terlihat jelas pada pembesaran apa pun. Jika kita mencoba menggunakan gambar bitmap, kita harus menyajikan berbagai ukuran untuk setiap layar yang dapat kita temui, atau terpaksa menampilkan gambar dengan skala yang sangat piksel.
Jadi, apa masalahnya? Jika Anda belum menyadarinya, ini adalah satu-satunya format yang diskalakan secara independen dari perangkat yang kita gunakan untuk melihatnya. Jadi, kita hanya perlu menayangkan satu aset kepada pengguna, tanpa perlu mengetahui ukuran layar atau jendela mereka.
Namun, tunggu dulu, masih ada lagi - logo HTML5 hanya berukuran 1.427 byte. Wow, ukurannya sangat kecil sehingga hampir tidak akan mengurangi paket data seluler saat memuatnya, sehingga cepat dimuat dan murah serta cepat untuk pengguna Anda.
Hal menarik lainnya tentang file SVG adalah file tersebut dapat dikompresi GZIP untuk memperkecilnya lebih lanjut. Saat Anda mengompresi SVG dengan cara tersebut, ekstensi file harus diubah menjadi '.svgz'. Untuk logo HTML5, ukurannya menyusut menjadi hanya 663 byte saat dikompresi - dan sebagian besar browser modern menanganinya dengan mudah.
Dengan file contoh di beberapa perangkat terbaru, kita melihat sesuatu seperti keunggulan 60x menggunakan data vektor yang dikompresi. Selain itu, perhatikan bahwa perbandingan ini dilakukan antara JPEG dan SVG, bukan PNG. Namun, JPEG adalah format lossy yang menghasilkan kualitas lebih rendah daripada SVG atau PNG. Jika kita menggunakan PNG, keuntungannya akan lebih dari 80x, yang luar biasa.
Namun, tentu saja PNG dan JPEG tidak dibuat sama. Sejumlah tips pengoptimalan menyarankan Anda untuk menggunakan JPEG, bukan PNG, tetapi hal itu tidak selalu merupakan ide yang bagus. Lihat gambar di bawah. Gambar di sebelah kiri adalah gambar PNG bagian kanan atas logo HTML5 yang diperbesar 6x. Gambar di sebelah kanan adalah hal yang sama, tetapi dienkode dengan JPEG.
Sangat mudah untuk melihat bahwa ukuran file yang disimpan dalam JPEG memiliki biaya, dengan artefak warna di tepinya yang tajam - mungkin membuat retina Anda berpikir perlu kacamata:-) Agar adil, JPEG dioptimalkan untuk foto, dan itulah sebabnya tidak bagus untuk seni vektor. Bagaimanapun, versi SVG memiliki kualitas yang sama dengan PNG sehingga lebih cocok di semua akun - baik ukuran file maupun kejelasannya.
Membuat Latar Belakang Vektor
Mari kita lihat cara menggunakan file vektor sebagai latar belakang halaman. Salah satu cara mudahnya adalah dengan mendeklarasikan file latar belakang menggunakan pemosisian tetap CSS:
<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>
Anda akan melihat bahwa berapa pun ukuran layar, gambar akan berukuran dengan baik dengan tepi yang bersih dan tajam.
Kemudian, tentu saja, kita ingin menempatkan beberapa konten di atas latar belakang.
Namun, seperti yang dapat Anda lihat, hasilnya kurang ideal karena kita tidak dapat membaca teks. Jadi, apa yang harus kita lakukan?
Menyesuaikan latar belakang agar terlihat lebih bagus
Hal yang jelas perlu kita lakukan adalah membuat semua warna di gambar latar belakang lebih terang. Hal ini mudah dicapai dengan menggunakan properti opasitas CSS - atau menggunakan opasitas dalam file SVG itu sendiri. Anda dapat melakukannya dengan menambahkan kode ini ke konten CSS:
#bg {
opacity: 0.2;
}
Tindakan ini akan memberi Anda hasil seperti ini:
Meskipun mudah, solusi ini kemungkinan akan menjadi poin masalah performa di perangkat seluler. Untuk sebagian besar browser seluler yang ada, penggunaan properti opasitas dapat jauh lebih lambat untuk digambar dibandingkan dengan objek buram.
Solusi yang lebih baik
Mengubah warna dalam konten SVG asli jauh lebih baik daripada menyetel opasitas dengan CSS. Berikut adalah logo HTML5 yang dimodifikasi agar terlihat pudar dengan mengubah warna yang digunakan, dan dalam prosesnya menghindari properti opasitas sepenuhnya. Jadi, gambar latar di bawah terlihat identik dengan hasil dari perubahan opasitas, tetapi sebenarnya akan digambar jauh lebih cepat dan menghemat waktu CPU serta menghemat masa pakai baterai yang berharga dalam prosesnya.
Sekarang setelah kita memiliki pemahaman yang baik tentang beberapa hal mendasar, mari kita beralih ke beberapa fitur lainnya.
Menggunakan Gradien secara Efisien
Misalnya, kita ingin membuat tombol. Kita dapat memulai dengan membuat persegi panjang dengan sudut membulat yang bagus. Kemudian, kita dapat menambahkan gradien linear yang bagus untuk memberi tombol tekstur yang bagus. Kode untuk melakukannya dapat terlihat seperti ini:
<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>
Tombol yang dihasilkan akan terlihat seperti ini:
Perhatikan bagaimana gradien yang telah kita tambahkan berjalan dari kiri ke kanan. Ini adalah arah gradien default di SVG. Namun, kita dapat melakukan yang lebih baik, karena beberapa alasan: estetika dan performa. Mari kita coba ubah arah gradien agar terlihat sedikit lebih bagus. Menetapkan atribut 'x1', 'y1', 'x2', dan 'y2' pada gradien linear akan mengontrol arah warna isi.
Dengan menetapkan atribut 'y2' saja, kita dapat mengubah gradien menjadi diagonal. Jadi, perubahan kode kecil ini:
<linearGradient id="blueshiny" y2="1">
memberi tampilan yang berbeda untuk tombol, yang akhirnya terlihat seperti gambar di bawah.
Kita juga dapat dengan mudah mengubah gradien untuk berpindah dari atas ke bawah dengan perubahan kode kecil ini:
<linearGradient id="blueshiny" x2="0" y2="1">
dan akhirnya akan terlihat seperti gambar di bawah.
Jadi, apa yang dimaksud dengan semua diskusi tentang berbagai sudut gradien yang saya dengar Anda tanyakan?
Ternyata, contoh terakhir - yang memiliki gradien yang berjalan dari atas ke bawah adalah yang paling cepat digambar di sebagian besar perangkat. Ini adalah rahasia yang sangat sedikit diketahui di antara para penggemar grafis yang menulis kode browser bahwa gradien vertikal (atas ke bawah) digambar hampir secepat warna solid. (Alasannya adalah bahwa menggambar objek dilakukan dalam garis horizontal di halaman - dan inti kode gambar memahami bahwa warna tidak berubah di setiap baris, sehingga mengoptimalkannya).
Jadi, saat Anda memilih untuk menggunakan gradien dalam desain halaman, gradien vertikal akan lebih cepat dan menggunakan lebih sedikit baterai sebagai efek samping. Kecepatan ini juga berlaku untuk gradien CSS, jadi ini bukan hanya tentang SVG.
Jika merasa sangat berani dengan pengetahuan gradien baru ini, kita mungkin dapat menambahkan gradien keren di belakang logo HTML5 dengan menambahkan kode di bawah:
<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>
Kode di atas menambahkan gradien linier vertikal pudar ke latar belakang logo HTML5 untuk memberikan semburat warna-warni halus yang berjalan cepat - secepat latar belakang warna solid.
Jika Anda memuat konten di browser desktop dan mengubah ukuran ke rasio aspek yang ekstrem, Anda akan melihat bilah putih muncul di sisi atas/bawah atau kiri/kanan. Bagaimanapun, setelah perubahan kode yang dilakukan di atas, latar belakang yang dihasilkan akan terlihat seperti ini:
Animasikan dengan Mudah
Sekarang Anda mungkin bertanya-tanya apa gunanya menggunakan gradien SVG sebagai latar belakang halaman. Memang mungkin masuk akal untuk melakukannya dengan gradien CSS, tetapi salah satu keunggulan SVG adalah gradien itu sendiri berada di DOM. Ini berarti Anda bisa memodifikasinya dengan skrip, tapi yang lebih penting lagi Anda bisa memanfaatkan kemampuan animasi SVG bawaan untuk menambahkan perubahan kecil ke konten Anda.
Sebagai contoh, kita akan mengubah logo HTML5 yang berwarna-warni dengan mengubah definisi gradien linear ke kode di bawah:
<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>
Lihat gambar di bawah untuk melihat hasil dari perubahan di atas.
Kode ini mengubah warna gradien linear melalui berbagai perhentian warna yang telah kita tentukan dalam siklus berkelanjutan yang memerlukan waktu 20 detik untuk dijalankan. Efeknya adalah gradien terlihat seperti bergerak ke atas halaman dalam gerakan berkelanjutan yang tidak pernah berhenti.
Kelebihannya adalah tidak diperlukan skrip! Itulah sebabnya aplikasi ini berjalan sebagai gambar yang direferensikan dari halaman ini, tetapi juga mengurangi beban kerja pada CPU seluler dengan menghilangkan kebutuhan akan skrip.
Selain itu, browser itu sendiri dapat memanfaatkan pengetahuannya tentang proses menggambar untuk memastikan overhead CPU minimal digunakan untuk melakukan animasi yang menarik.
Ada satu peringatan: beberapa browser sama sekali tidak menangani gaya animasi ini, tetapi dalam hal ini Anda masih akan mendapatkan latar belakang berwarna bagus, tetapi tidak akan berubah - hal ini dapat diatasi dengan menggunakan skrip (dan requestAnimationFrame), tetapi itu sedikit di luar artikel ini.
Satu hal lagi yang perlu diperhatikan, file SVG yang tidak dikompresi ini hanya berukuran 2.922 byte - sangat kecil untuk memberikan efek grafis yang kaya, sehingga pengguna dan paket data tersebut tetap puas.
Ke mana kita akan pergi dari sini?
Ada banyak kasus saat SVG kurang ideal, foto dan video lebih baik direpresentasikan dalam format lain. Teks adalah contoh lain, di mana HTML dan CSS native berfungsi jauh lebih baik secara umum. Namun, sebagai alat dalam arsenal untuk karya seni yang digambar garis, alat ini bisa menjadi pilihan yang ideal.
Kami telah menyinggung beberapa penggunaan mendasar dasar untuk grafik SVG, yang menunjukkan betapa mudahnya membuat konten kecil yang memberikan grafis layar penuh yang jelas dengan jumlah download minimal. Peningkatan kecil pada konten dapat dengan mudah membuat hasil grafis yang luar biasa dengan jumlah markup yang kecil. Dalam artikel berikutnya, kita akan mempelajari beberapa detail lebih lanjut tentang bagaimana animasi yang dibangun ke SVG dapat digunakan untuk efek yang lebih sederhana dan kuat, serta membandingkan penggunaan kanvas dengan SVG untuk memilih alat yang tepat dalam pembuatan situs grafis seluler Anda.
Referensi bagus lainnya
- Inkscape adalah aplikasi gambar open source yang menggunakan SVG sebagai format filenya.
- Open Clip Art, library gambar klip open source yang berisi ribuan gambar SVG.
- Halaman SVG W3C yang berisi link ke spesifikasi, referensi, dll.
- Raphaël adalah library JavaScript yang menyediakan API yang mudah untuk menggambar dan menganimasikan konten SVG dengan penggantian yang bagus untuk browser lama.
- Referensi SVG dari Slippery Rock University - menyertakan link ke Panduan SVG yang bagus.