Cara Membuat UI Website Modern dengan SVG | Warung Komputer
SVG (Scalable Vector Graphic) adalah format gambar yang menggunakan XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG merupakan format gambar yang dikembangkan oleh Word Wide Web Consortium (W3C) sejak tahun 1999.
Cara Membuat UI Website Modern dengan SVG
Keunggulan SVG
Ketika berbicara tentang file grafis, istilah JPEG, PNG dan GIF adalah yang paling dipahami oleh desainer web. Namun ada keuntungan tersendiri ketika menggunakan SVG, dimana file SVG lebih kecil dan mudah untuk di kompres dibandingkan format lainnya. Grafis SVG dapat dicetak dalam resolusi yang tinggi. Pengeditan SVG bahkan bisa dilakukan dengan alat atau aplikasi sederhana seperti Notepad. Gambar SVG bisa di perbesar (zoomable & scalable) karena mereka adalah gambar vektor, bukan bitmap. Ini berarti bahwa sebuah garis tidak terdiri dari piksel warna seperti yang digunakan gambar bitmap seperti JPG, GIF dan PNG.
Elemen SVG
Menggambar SVG dalam HTML dapat menggunakan tag elemen <svg></svg>. Tag tersebut dapat diatur dimensi dan posisinya menggunakan atribut viewbox. Nilai Atribut dari viewbox ini memiliki 4 buah nilai, yaitu min-x, min-y, widthdan height, menentukan dimensi dan posisi SVG ini dapat disesuaikan dengan kebutuhan. Namun kali ini kita ambil studi kasus membuat Header dari website.
<svg viewbox=" min-x min-y width height "></svg>
Mari kita coba membuat header suatu website dengan SVG, maka nilai dimensi yang diberikan :
<svg viewbox="0 0 800 500"></svg>
SVG ini dapat diilustrasikan sebagai lahan/area yang akan kita gambar, seperti halnya canvas sebagai media menggambar.
Elemen Path
<path d="" />
tag <path></path> bertugas untuk mendefinisikan sebuah path/jalur. Dalam tag path ini memiliki atribut d (<path d="" />) yang mengartikan define bagi tag path tersebut, atribut d tentunya memiliki macam nilai/value yang dapat mendefinisikan titik-titik vektor. Berikut macam nilai/value dari atribut d :
- M : moveto
- L : lineto
- H : Horizontal lineto
- V : Vertical lineto
- C : Curveto
- S : Smooth Curveto
- Q : Quadratic Bezier Curve
- T : Smooth Quadratic Bezier Curveto
- A : Elliptical Arc
- Z : Closepath
Namun pada studi kasus kita kali ini, hanya menggunakan L, M dan Q.
Membuat Header
Pembuatan header ini kita bisa ambil contoh pada Website officialnya Angular yang menggunakan SVG dalam pembutannya. 
Pertama kita definisikan tag elemen SVG yang memiliki nilai :
- posisi – x : 0
- posisi – y : 0
- width : 800
- height : 500
<svg viewbox="0 0 800 500"></svg>
Setelah mendefinisikan nilai dimensi dari elemen SVG, maka didalam tag tersebut kita definisikan tag path yang memiliki atribut d.
<svg viewbox="0 0 800 500">
<path fill="#50c6d8" d="
M 800 400
Q 200 300 0 270
L 0 0
L 800 0
" />
</svg>
Keterangan :
- Nilai kedua L (Lineto) tersebut mendefinisikan titik dikedua ujung yang berposisi di atas yang saling bersatu sehingga tercipta garis. Yang setiap L memiliki dua buah nilai (nilai pertama berskala y dan kedua berskala x).
- Nilai M (moveto) mendefinisikan titik ketiga yang menjadi media bertemunya kedua titik L sehingga terciptanya segitiga dan memiliki dua buah nilai (Nilai pertama mendefinisikan skala x dan nilai kedua berskala y).
- Nilai Q (Quadratic curve) bertugas memberikan lengkungan pada salah satu sisi dari tiga titik yang telah didefinisikan. Namun karena kasus kali ini menyesuaikan dengan website Angular maka hanya berbentuk diagonal.
Keterangan :
- Background biru tua merupakan elemen dari tag path
- Background biru muda merupakan elemen dari tag svg
Cukup sekian, penggunaan SVG dalam pembuatan Header pada website. Mohon maaf terdapat kekurangan dalam penyajian kata. Untuk lebih memahaminya pembaca dapat memanipulasi kasus diatas sesuai dengan keinginan.
Sumber
codepolitan.com
