Dynamic Blinkie Text Generator at TextSpace.net

Feedburner

I heart FeedBurner

Rabu, 13 Desember 2017

Mengenal SVG

Butuh grafik untuk website kamu? Butuh grafik yang tampilannya bisa diubah secara dinamis sesuai kebutuhan? Atau butuh grafik yang akan dianimasikan? Kalau kamu menjawab iya untuk salah satu pertanyaan tersebut, berarti kamu layak menilik SVG lebih lanjut sebagai salah satu aset grafik untuk website kamu. Melalui artikel ini, kita akan mengenal SVG sekaligus mempelajari bagaimana ia bisa digunakan untuk meningkatkan aspek visual dari sebuah website.
SVG (Scalable Vector Graphic) adalah sebuah format gambar. Sesuai namanya, ia menampung data dari sekumpulan vector atau kumpulan koordinat. Selanjutnya, sebuah file SVG akan mendeklarasikan bagaimana koordinat-koordinat ini terhubung, bentuk apa yang dihasilkan, apa warnanya, dan seterusnya. Kita bisa membuka sebuah file SVG dengan editor teks untuk melihat apakah isinya dan mengamati strukturnya.
Sebagai contoh, berikut adalah contoh gambar SVG berikut isi di dalamnya
Gambar bintang dengan tipe berkas SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
<path fill="#F8D64E" d="m48,234 73-226 73,226-192-140h238z"/>
</svg>
Berkas SVG di atas membuat bintang dengan menghubungkan beberapa titik yang ditentukan oleh atribut d milik properti path. Atribut SVG kemudian diisi dengan beberapa perintah:
  • m menyatakan move. m48,234 berarti path dimulai dari titik x=48 dan y=234
  • h menyatakan horizontal, atau menggambar garis horizontal
  • z menyatakan untuk kembali ke titik awal
Selama membuat path garis akan digambar dari titik awal, dan terus mengikuti urutan titik yang dinyatakan dalam berkas.
Format SVG berbeda dengan format gambar berbasis bitmap seperti BMP, JPG, PNG, dan sebagainya. Perbedaan utamanya adalah SVG tidak akan berkurang kualitas ketajamannya apabila ukurannya diperbesar. Ini karena sifatnya sebagai penampung vector tadi, di mana yang diatur bukanlah berapa jarak antar vector melainkan bagaimana hubungan di antara mereka. Hal ini berbeda dengan format BMP yang sudah menyimpan terlebih dahulu ukuran gambar, baru menentukan warna di setiap pixel pada gambar.
Sebuah berkas SVG bisa dibuat dengan menggunakan aplikasi menggambar yang sekaligus menjadi penyunting vector. Beberapa nama yang terkenal misalnya Adobe Illustrator, Sketch, Inkscape dan lainnya. Dari sini, kita bisa mengekspor gambar yang dibuat menjadi berkas dengan tipe SVG. Poin bonus untuk SVG, karena aplikasi-aplikasi ini lazim digunakan oleh desainer, sebagai developer, kita bisa bekerja sama dalam tim dengan lebih mudah. Desainer bisa menggambar untuk menghasilkan SVG, dan selanjutnya developer mampu memanipulasi berkas tersebut sesuai kebutuhan. Jika diinginkan, developer bisa mengubah isi dari sebuah berkas SVG hanya dengan editor teks, tanpa membuka aplikasi penyunting gambar.
Fleksibilitas SVG akan nampak saat ia dipasang dalam halaman web. Saat digunakan di dalam browser, berkas SVG akan dimuat dan setiap elemen di dalamnya bisa diakses sebagai DOM. Tentu saja, ini adalah sebuah faedah yang besar, karena developer jadi bisa mengubah properti setiap elemen baik dengan CSS maupun JavaScript. Ingin mengganti warna? Memperkecil ukuran gambar? Atau bahkan menjalankan fungsi tertentu saat sebuah bagian di gambar diklik? Semua bisa dilakukan melalui kode. Secara kerjasama tim, tentu ini besar sekali manfaatnya, karena aset gambar tidak perlu dikembalikan ke desainer untuk mengaplikasikan perubahan yang bisa ditangani oleh kode.
Sebagai contoh, gambar bintang tadi bisa kita manipulasi dengan menambahkan class di dalam path miliknya. Kemudian, dengan CSS, kita bisa mengakses dan mengganti properti fill milik path tersebut.
<!-- html ->
<body>  
    <svg width="240" height="240"><path id="star" fill="#F8D64E" d="m48,234 73-226 73,226-192-140h238z" class="default"/>
    </svg>    
</body>
/* CSS */
.active {
  fill: #004566;
}
.default {
  fill: #00bb45;
}
Tentu saja, tidak sulit membayangkan untuk melakukan ini secara dinamis. Kita bisa menggunakan JavaScript untuk mengganti class milik berkas SVG tadi.
Karena fleksibilitasnya sebagai DOM, belakangan ini, SVG menjadi sebuah format gambar yang penggunaannya meningkat pesat. Berbagai library lahir untuk mempermudah pengaplikasian SVG untuk berbagai kebutuhan. Sebagai contoh, untuk melakukan visualisasi data, ada d3.js yang pada dasarnya bekerja dengan memanipulasi SVG untuk membuat berbagai chart dan diagram, mulai dari diagram batang, pie chart, hingga peta. Saat ini, d3.js sudah menjadi library de facto untuk melakukan visualisasi data di web dan untuk mendapatkan manfaat lebih banyak dari penggunaannya, tentu kita jadi perlu mempelajari SVG lebih lanjut.
Selain itu, ada juga library Snap.svg yang akan mempermudah dalam membuat animasi menggunakan aset SVG yang sudah ada. Penggunaannya pun mudah. Snap akan memilih nama aset SVG, selanjutnya kita cukup menentukan properti apa yang ingin dianimasikan, serta bagaimana transisi akan dilakukan. Tutorial singkat di halaman dokumentasi Snap menunjukkan dengan jelas bagaimana langkah tersebut dilakukan.
Melalui paparan singkat ini, kita telah melihat bagaimana berkas SVG dibuat, dimuat di browser serta dimanipulasi menggunakan CSS, JavaScript ataupun menggunakan library lain. Dengan menggunakan SVG, kita bisa mendapatkan aset visual yang akan selalu nampak tajam di berbagai ukuran layar, sempurna untuk website di era responsive design. Fleksibilitas SVG ini membuatnya menarik untuk digunakan.

Sumber : https://blog.framework.id/serunya-menggunakan-svg-scalable-vector-graphic-de4f111343e9
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)