Mengenal SVG Gradient, Simak Penjelasannya Disini!

A gradient is a smooth transition from one color to another.

SVG Gradient - Gradient adalah Transisi mulus dari warna ke warna yang lain, pada kali ini saya akan membahas mengenai Gradient SVG yang mana saya buat pada header page blog ini.

Apa itu SVG Gradien? 

Gradien SVG digunakan untuk memberikan transisi warna bertahap pada bentuk SVG atau teks. Ada dua jenis gradien SVG: gradien linear dan gradien radial. Gradien linear didefinisikan oleh titik awal dan titik akhir, dan transisi warna terjadi sepanjang garis lurus antara kedua titik ini. Gradien radial, di sisi lain, didefinisikan oleh titik pusat dan jari-jari, dan transisi warna terjadi dari titik pusat ke luar dalam pola lingkaran.

Kedua jenis gradien dapat memiliki beberapa stop warna, yang menentukan warna-warna tertentu yang akan digunakan dalam gradien dan di mana mereka harus ditempatkan sepanjang jalur gradien. Stop warna ditentukan menggunakan nilai warna dan nilai offset, yang mewakili persentase jarak sepanjang jalur gradien di mana warna harus diterapkan.

Gradien SVG didefinisikan menggunakan elemen <linearGradient> atau <radialGradient>, dan dapat diterapkan pada bentuk SVG atau teks menggunakan properti fill atau stroke.

Jenis - jenis Gradient SVG

Dalam SVG ada 2 jenis yaitu :

  • Linier
  • Radial

SVG Gradien Linier - <linearGradient>

Gradient linear terdiri dari satu atau beberapa warna yang diterapkan secara bertahap pada suatu bentuk SVG sepanjang garis lurus. Gradient linear didefinisikan oleh dua titik, yaitu titik awal dan titik akhir, dan transisi warna terjadi sepanjang garis yang membentang antara kedua titik tersebut.

Gradien Linier ini sendiri dapat di definisikan sebagai gradient horizontal, vertikal atau sudut :

  • Gradient Horizontal ketika y1 dan y2 itu sama sedangkan x1 dan x2 berbeda
  • Gradient Vertikal ketika y1 dan y2 berbeda dan x1 dan x2 itu sama
  • Gradient Sudut ketika y1 dan y2 berbeda sedangkan x1 dan x2 berbeda

Contoh Kode Gradient Linier

Gradient Horizontal

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Gradient Vertikal

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Gradient Sudut

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Penjelasan Singkat :

  • Atribute id dari tag <linierGradient> ini digunakan sebagai gradient yang akan digunakan
  • Atribute tag x1, x2, y1, y2 adalah akhir dan awalan gradient tersebut
  • Untuk warnanya sendiri bisa terdiri dari dua warna atau bahkan lebih, dan setiap warna itu sendiri di akhiri dengan tag <stop> sedangkan untuk atribute offset menentukan dimana warna tersebut akan di mulai

Semoga bermanfaat penjelasan singkat ini.

2 comments

  1. wah jadi tambah pinter nih mantap... kayaknya lebih bisa dipahami kalau dengan contoh, pakai jsfiddle aja
    1. Makasih mas, ini aja masih belajar ya awal nya otak atik template jadi penasaran sama kode nya serch di google
1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.