Membuat konten seluler yang memukau berarti menyeimbangkan jumlah data yang didownload dengan dampak visual maksimal. Grafik vektor adalah cara yang bagus untuk memberikan hasil visual yang menakjubkan dengan menggunakan {i>bandwidth<i} minimal.
Banyak orang menganggap kanvas sebagai satu-satunya cara untuk menggambar campuran vektor dan raster di web, tetapi ada alternatif yang memiliki beberapa keuntungan. Cara terbaik untuk membuat gambar vektor adalah melalui penggunaan Scalable Vector Graphics (SVG) yang merupakan bagian penting dari HTML5.
Kita semua tahu desain responsif adalah bagian penting dalam menangani berbagai ukuran layar, dan SVG ideal untuk menangani berbagai ukuran layar dengan mudah.
SVG adalah cara yang bagus untuk menyajikan gambar garis berbasis vektor dan merupakan pelengkap yang bagus untuk bitmap, format kedua lebih cocok untuk gambar dengan warna kontinu.
Salah satu hal paling berguna tentang SVG adalah tidak bergantung pada resolusi, artinya Anda tidak perlu memikirkan berapa banyak {i>pixel<i} yang ada pada perangkat Anda, hasilnya akan selalu diskalakan dan dioptimalkan oleh browser agar terlihat bagus.
Alat bantu populer untuk penulis seperti aplikasi Gambar di Google Drive, Inkscape, Illustrator, Corel Draw, dan banyak lagi, menghasilkan SVG, jadi ada banyak cara untuk menghasilkan konten. Kita akan membahas lebih jauh mengenai beberapa cara untuk menggunakan aset SVG, ditambah beberapa tips pengoptimalan untuk membantu Anda memulai.
Dasar-dasar penskalaan
Mari kita mulai dengan skenario sederhana - Anda ingin grafik halaman penuh menjadi latar belakang halaman web Anda. Akan sangat berguna bila Anda memiliki logo perusahaan, atau layar penuh seperti itu di latar belakang, tapi tentu saja, hal itu akan sangat sulit jika diterapkan pada berbagai ukuran layar. Jadi untuk mengilustrasikan, kita akan mulai dengan logo HTML5 yang sederhana.
Logo HTML5 ditunjukkan di bawah ini - dan seperti yang Anda tebak, itu berasal dari file SVG.
Klik logo tersebut dan lihatlah di browser modern apa pun dan Anda akan melihat bahwa logo dapat diskalakan dengan indah ke berbagai ukuran jendela. Coba buka file di browser favorit Anda, ubah ukuran jendelanya dan amati bahwa gambar jelas pada perbesaran apa pun. Jika kita mencobanya dengan gambar bitmap, kita harus menyajikan berbagai ukuran untuk setiap layar yang bisa kita lihat, atau dipaksa untuk memasang gambar dengan skala piksel yang mengerikan.
Jadi apa masalahnya? Jika Anda tidak menyadarinya, inilah satu-satunya format yang diskalakan secara terpisah dari perangkat yang kita gunakan untuk mengamatinya. Jadi, kita hanya perlu menyajikan satu aset kepada pengguna, tanpa perlu mengetahui ukuran layar atau jendela mereka sudah jelas.
Tapi tunggu, masih ada lagi - logo HTML5 hanya 1.427 byte! Astaga, ukuran itu sangat kecil sehingga paket data seluler tidak akan rusak saat dimuat, sehingga mempercepat pemuatan dan membuatnya murah serta cepat bagi pengguna Anda!
Hal lain yang menarik tentang file SVG adalah file tersebut dapat dikompresi dengan GZIP untuk lebih kecil. Ketika Anda mengompresi SVG dengan cara seperti itu, ekstensi file harus diubah menjadi '.svgz'. Pada kasus logo HTML5, logo ini akan menyusut menjadi hanya 663 byte saat dikompresi - dan sebagian besar browser modern dapat menanganinya dengan mudah!
Dengan file contoh pada beberapa perangkat terbaru, kita melihat keunggulan 60x menggunakan data vektor terkompresi! Selain itu, perlu diperhatikan bahwa perbandingan ini sedang dibuat 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 dan luar biasa!
Tapi tentu saja PNG dan JPEG tidak dibuat sama. Ada sejumlah tip pengoptimalan yang memberi tahu Anda untuk menggunakan JPEG sebagai ganti PNG, tetapi itu tidak selalu merupakan ide yang bagus. Lihat gambar di bawah ini. Gambar di sebelah kiri adalah gambar PNG bagian kanan atas logo HTML5 yang diperbesar 6x. Gambar di sebelah kanan adalah gambar yang sama, tetapi dienkode dengan JPEG.
Sangat mudah untuk melihat bahwa penghematan ukuran file dalam JPEG membutuhkan biaya, dengan artefak warna di ujung tajam - mungkin membuat retina Anda berpikir bahwa ini membutuhkan kacamata:-) Agar adil, JPEG dioptimalkan untuk foto, dan itulah sebabnya JPEG tidak bagus untuk seni vektor. Bagaimanapun, versi SVG sama dengan kualitas PNG sehingga unggul di semua akun - baik ukuran file maupun kejelasan.
Membuat Latar Belakang Vektor
Mari kita lihat bagaimana Anda dapat menggunakan file vektor sebagai latar belakang laman. Salah satu cara mudah 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 layarnya, gambar berukuran bagus dengan tepi yang bersih dan tajam.
Lalu tentu saja, kita ingin menempatkan beberapa konten di latar belakang.
Namun seperti yang Anda lihat, hasilnya kurang ideal karena kita tidak dapat membaca teksnya. Jadi, apa yang kita lakukan?
Menyesuaikan latar belakang agar terlihat lebih bagus
Hal yang perlu kita lakukan adalah membuat semua warna di gambar latar menjadi lebih terang. Hal ini mudah dicapai dengan menggunakan properti opasitas CSS - atau menggunakan opasitas dalam file SVG itu sendiri. Anda dapat melakukannya hanya dengan menambahkan kode ini ke konten CSS:
#bg {
opacity: 0.2;
}
Itu akan memberi Anda hasil seperti ini:
Meskipun mudah, solusi ini mungkin akan menjadi titik masalah kinerja pada perangkat seluler. Untuk sebagian besar browser seluler yang ada, penggunaan properti opasitas bisa jauh lebih lambat untuk menggambar dibandingkan dengan objek buram.
Solusi yang lebih baik
Memodifikasi warna dalam konten SVG asli jauh lebih baik daripada menyetel opasitas dengan CSS. Berikut adalah logo HTML5 yang dimodifikasi agar terlihat memudar dengan mengubah warna yang digunakan, dan dalam proses menghindari properti opasitas sama sekali. Jadi, gambar latar di bawah ini akan terlihat identik dengan hasil perubahan opasitas, tetapi sebenarnya akan lebih cepat dan menghemat waktu CPU serta menghemat masa pakai baterai.
Jadi, sekarang kita telah memiliki pemahaman yang baik tentang beberapa hal mendasar, mari beralih ke beberapa fitur lainnya.
Menggunakan Gradien Secara Efisien
Katakanlah kita ingin membuat sebuah tombol. Kita bisa mulai dengan membuat persegi panjang dengan sudut membulat yang bagus. Kemudian kita bisa menambahkan gradien linier yang bagus untuk memberikan tekstur yang bagus pada tombol. Kode untuk melakukannya bisa 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 memiliki hasil seperti ini:
Perhatikan bagaimana gradien yang telah kita tambahkan bergerak dari kiri ke kanan. Ini adalah arah gradien default di SVG. Tapi kita bisa melakukan yang lebih baik, karena beberapa alasan berbeda: estetika dan kinerja. Mari kita coba mengubah arah gradien agar terlihat lebih bagus. Menyetel atribut 'x1', 'y1', 'x2', dan 'y2' pada gradien linier mengontrol arah warna isian.
Menyetel atribut 'y2' saja memungkinkan kita mengubah gradien menjadi diagonal. Jadi perubahan kode kecil ini:
<linearGradient id="blueshiny" y2="1">
memberi tampilan berbeda untuk tombol, yang akhirnya terlihat seperti gambar di bawah ini.
Kita juga dapat dengan mudah mengubah gradien dari atas ke bawah dengan perubahan kode kecil ini:
<linearGradient id="blueshiny" x2="0" y2="1">
dan ujungnya akan terlihat seperti gambar di bawah ini.
Jadi, ada apa dengan diskusi tentang berbagai sudut gradien yang Anda dengar?
Ternyata contoh terakhir - yang dengan gradien berjalan dari atas ke bawah adalah yang tercepat untuk digambar di kebanyakan perangkat. Ini merupakan rahasia yang belum banyak diketahui di antara para pecinta grafis yang menulis kode browser bahwa gradien vertikal (dari atas ke bawah) menggambar hampir secepat warna solid. (Alasannya adalah pengecatan objek dilakukan dalam garis horizontal di bawah halaman - dan nyali kode gambar memahami bahwa warna tidak berubah di setiap baris, sehingga mereka mengoptimalkannya).
Jadi, bila Anda memilih untuk menggunakan gradien pada desain laman Anda, gradien vertikal akan lebih cepat dan menggunakan lebih sedikit baterai sebagai efek samping. Percepatan ini juga berlaku untuk gradien CSS, jadi ini bukan hanya tentang SVG.
Jika kita merasa benar-benar ingin berpetualang dengan pengetahuan gradien baru ini, maka kita mungkin bisa menambahkan gradien keren di belakang logo HTML5 kita dengan menambahkan kode di bawah ini:
<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 yang memudar ke latar belakang logo HTML5 kami untuk memberikan semburat multi-warna halus yang berjalan cepat - secepat latar belakang warna solid.
Jika Anda memuat konten di browser desktop dan mengubah ukuran menjadi rasio aspek yang ekstrem, Anda akan melihat bilah putih muncul di sisi atas/bawah atau kiri/kanan. Bagaimanapun, setelah perubahan kode yang dibuat di atas latar belakang yang dihasilkan akan terlihat seperti ini:
Buat Animasi dengan Mudah
Sekarang Anda mungkin bertanya-tanya apa gunanya menggunakan gradien SVG sebagai tampilan latar untuk laman Anda. Memang masuk akal untuk melakukannya dengan gradien CSS, namun salah satu keuntungan dari SVG adalah bahwa gradien itu sendiri berada di DOM. Ini berarti Anda bisa memodifikasinya dengan skrip, tetapi yang lebih penting lagi, Anda bisa memanfaatkan kemampuan animasi bawaan SVG untuk menambahkan perubahan kecil ke materi.
Sebagai contoh, kita akan memodifikasi logo HTML5 yang berwarna-warni dengan mengubah definisi gradien linier ke kode di bawah ini:
<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 linier melalui semua perhentian warna yang berbeda yang telah kita tentukan dalam siklus berkelanjutan yang membutuhkan waktu 20 detik untuk dijalankan. Efeknya adalah gradien terlihat seperti bergerak ke atas halaman dalam gerakan berkelanjutan yang tidak pernah berhenti.
Kelebihan dari metode ini adalah tidak memerlukan skrip! Itu sebabnya objek ini dijalankan sebagai gambar yang direferensikan dari halaman ini, tetapi juga mengurangi beban kerja pada CPU seluler dengan meniadakan penggunaan skrip.
Browser juga dapat memanfaatkan pengetahuannya tentang proses menggambar untuk memastikan overhead CPU minimal digunakan untuk membuat animasi yang menarik.
Ada satu peringatan: beberapa browser tidak menangani gaya animasi ini sama sekali, tetapi dalam hal ini, Anda akan tetap mendapatkan latar belakang berwarna bagus, tetapi tidak akan berubah - ini dapat diatasi dengan menggunakan skrip (dan requestAnimationFrame) tetapi ini sedikit di luar artikel ini.
Satu hal lagi yang perlu diperhatikan adalah file SVG yang tidak dikompresi ini hanya berukuran 2922 byte - sangat kecil untuk memberikan efek grafis yang kaya, sehingga membuat pengguna dan paket data Anda tetap senang dalam prosesnya.
Mau ke mana?
Ada banyak kasus di mana SVG kurang ideal, foto dan video lebih terwakili dalam format lain. Teks adalah salah satu jenisnya, dengan HTML dan CSS native berfungsi jauh lebih baik secara umum. Namun, sebagai alat perlengkapan untuk ilustrasi gambar garis, AI generatif bisa menjadi pilihan yang ideal.
Kami telah menyentuh beberapa penggunaan mendasar untuk grafik SVG, yang menunjukkan betapa mudahnya membuat konten kecil yang menyediakan grafik yang jelas dengan layar penuh dengan jumlah download yang minimal. Peningkatan kecil pada konten dapat dengan mudah memberikan hasil grafis yang luar biasa dengan markup dalam jumlah kecil. Dalam artikel berikutnya, kita akan mempelajari beberapa detail lebih lanjut tentang bagaimana animasi yang dibangun di dalam SVG dapat digunakan untuk memberikan efek yang lebih sederhana dan canggih, serta membandingkan penggunaan kanvas dengan SVG untuk memilih alat yang tepat untuk menulis situs grafis seluler Anda.
Referensi lain yang bermanfaat
- Inkscape adalah aplikasi menggambar open source yang menggunakan SVG sebagai format filenya.
- Open Clip Art, koleksi gambar klip open source yang sangat besar 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 digunakan untuk menggambar dan menganimasikan konten SVG dengan penggantian yang andal untuk browser lama.
- Referensi SVG dari Slippery Rock University - berisi link ke SVG Primer yang bermanfaat.