Mengenal SVG Gradient, Simak Penjelasannya Disini!

Table of Contents

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.