Belajar SVG (1412)

Pada hari ini, kita akan membahas tentang SVG, sebelumnya apa itu SVG?

SVG adalah singkatan dari Scalable Vector Graphics, SVG biasa digunakan untuk membuat animasi, logo, ataupun game dalam sebuab website. SVG sudah mulai berkembang pada tahun 1999 dan banyak perusahaan besar yang ikut ambil bagian dalam perkembangan SVG, seperti Adobe, Apple, dan IBM, mereka mengambil bagian dalam mendefinisikan dan menciptakan jenis gambar baru ini. Pada tahun 2001, SVG mandapatkan facelift untuk menyertakan profil ponsel, kemampuan cetak, dan meningkatkan  pengaturan display. Pada awalnya, banyak designer web yang tidak tertarik dengan format ini karena tidak di support oleh Internet Explorer, sedangkan browser lain sudah menggunakan SVG.

Kelebihan SVG :

File SVG lebih kecil dan mudah di kompres dibandingkan dengan format lainnya. Grafis SVG dapat dicetak dengan resolusi yang tinggi. Gambar SVG dapat diperbesar karena mereka adalah gambar vektor, bukan bitmap. Ini berarti bahwa sebuah objek tidak terdiri dari piksel warna seperti yang digunakan di bitmap seperti JPG, GIF, dan PNG. Garis gambar vektor dihitung dengan matematika, dengan kata lain jalur tersebut dapat diperbesar tanpa kehilangan kualitas sama sekali.

SVG digunakan untuk menciptakan gambar. Biasanya kita menggunakan XML untuk mendeskripsikan gambar seperti apa yang akan terlihat nantinya dengan memanfaatkan atribut. SVG menggunakan elemen yang telah ditetapkan dalam proses design (Unsur-unsur yang sangat dasar). Contohnya seperti <line> untuk membuat garis. Kita menggunakan atribut untuk mendefinisikan koordinat seperti x dan y, warna, dan stroke. Berikut adalah script untuk membuat garis :

Hasil dari script tersebut adalah :

Pada script diatas, atribut yang digunakan untuk membuat line tersebut adalah yang ini

 x1 dan y1 adalah titik awal kita memulai line tersebut, sedangkan x2 dan y2 untuk menentukan titik akhir dari garis tersebut. stroke-width adalah lebar garis.

Pada script di atas, terdapat tag <g> untuk apa sih gunanya? Tag <g> digunakan untuk meng-groupkan atribut-atribut pada SVG. Sehingga memudahkan pemberian efek atau event pada element SVG.

Berikut adalah script untuk membuat grid atau tabel dengan SVG menggunakan <line>

 Maka hasilnya adalah :

Sampai disini dulu tutorial SVG-nya, kita akan membahas lagi tentang SVG pada kesempatan lainnya. Thanks for reading XOXO.