Cara Membuat UI Website Modern dengan SVG

  1. Home
  2. Blog
  3. Cara Membuat UI Website Modern dengan SVG
Blog

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

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-xmin-ywidthdan 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 LM dan Q.

Membuat Header

Pembuatan header ini kita bisa ambil contoh pada Website officialnya Angular yang menggunakan SVG dalam pembutannya. Cara Membuat UI Website Modern dengan SVG

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 :

  1. 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).
  2. 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).
  3. 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

Warung Komputer menyediakan layanan Jasa Pembuatan Website, SEO, Digital Marketing dan Jasa Service Laptop/Komputer yang memiliki tenaga ahli professional dan berpengalaman.
blank

Warung Komputer | Your Trusted IT Partner
Telpon/WhatsApp : 0811-1014-930
Email : mail@warungkomputer.co.id
Website : warungkomputer.com

Artikel Terkait

blank
Google Resmi Umumkan Android 9 Pie
blank
Mengaktifkan Mode Picture in Picture di Google Chrome

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Kategori Artikel

Archives

Menu