Cara Mudah membuat UI Website Modern menggunakan SVG

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.

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, width dan 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 :

https://www.sololearn.com/Course/HTML/

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

https://blog.framework.id/serunya-menggunakan-svg-scalable-vector-graphic-de4f111343e9

https://www.jurnalweb.com/pengertian-sejarah-dan-keunggulan-svg/