Gradasi Warna Ikon SVG

linearGradient | Cara Membuat Gradasi Warna SVG
Daftar Isi Artikel []
Gradient SVG Icon - Panduan singkat membuat warna gradasi dengan linearGradient di setiap ikon SVG (Scalable Vector Graphics).

Membuat Warna Gradient Pada Ikon SVG

Warna gradient pada icon svg bisa dibuat dengan cara menambahkan definisi linearGradient di dalamnya.

linearGradient

<!-- Gradient SVG Fill Color -->
<svg viewBox='0 0 24 24'>
  <path fill='url(#gradientIcon)' d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
  <defs>
    <linearGradient id='gradientIcon' x1='0%' y1='0%' x2='100%' y2='0%'>
      <stop offset='0%' stop-color='teal'/>
      <stop offset='100%' stop-color='cyan'/>
    </linearGradient>
  </defs>
</svg>
  • Elemen <defs> digunakan untuk menyimpan objek grafis yang akan digunakan secara bersamaan di lain waktu.
  • <linearGradient> harus bersarang dalam tag <defs>, serta mempunyai atribut ID dengan nilai unik.
  • Atribut x1, x2, y1,y2 pada <linearGradient> mendefinisikan posisi mulai dan berakhirnya gradasi.
  • Nilai default dari atribut x1, x2, y1,y2 adalah 0%, 100%, 0%, 0% (Horisontal).
  • Gradien menjadi horisontal ketika nilai y1 = y2 dan x1 ≠ x2.
  • Gradien menjadi vertical ketika nilai x1 = x2 dan y1 ≠ y2.
  • Gradien sudut dapat dibuat ketika semua gradientUnits (x1,y1,x2,y2) memiliki nilai yang berbeda.
  • Elemen <stop> digunakan untuk menentukan warna yang dipakai sebagai gradien, bisa ditulis lebih dari dua kali.
  • Atribut offset digunakan untuk menentukan di mana warna gradien mulai dan berakhir.
  • Atribut stop-color bernilai module suatu warna.
Potongan kode diatas mendefinisikan warna gradien Teal dan Cyan dari kiri ke kanan (horisontal).

Membuat Template Gradient Untuk SVG

Jika memakai banyak ikon SVG, kemudian ingin memberi warna gradasi setiap ikon dengan warna yang berkelompok dan/atau berbeda, ada baiknya kumpulkan elemen <lineargradient> dalam satu definisi.

Jadi nantinya, fungsi gradasi tersebut bisa dipakai berulang sesuai dengan kebutuhan tanpa harus membuat definisi baru pada setiap ikon. Kode ini bisa dipasang di dalam tag <body> pada template.
<!-- Gradient Template -->
<svg width='0' height='0'>
<!- nilai width dan height diatur 0 agar tidak ada ruang kosong yang terlihat -->
  <defs> 
    <!-- To Right -->
    <linearGradient id='svgGradientGreen' x1='0%' y1='0' x2='100%' y2='0'> 
      <stop offset='0%' stop-color='teal'/>
      <stop offset='100%' stop-color='cyan'/> 
    </linearGradient> 
    
    <!-- To Left -->
    <linearGradient id='svgGradientRed' x1='100%' y1='0' x2='0%' y2='0'> 
      <stop offset='0%' stop-color='red'/>
      <stop offset='100%' stop-color='pink'/> 
    </linearGradient>
    
    <!-- To Top -->
    <linearGradient id='svgGradientPurple' x1='0' y1='0%' x2='0' y2='100%'> 
      <stop offset='0%' stop-color='purple'/>
      <stop offset='100%' stop-color='ocean'/> 
    </linearGradient> 
    
    <!-- To Bottom -->
    <linearGradient id='svgGradientOrange' x1='0' y1='100%' x2='0' y2='0%'> 
      <stop offset='0%' stop-color='yellow'/>
      <stop offset='100%' stop-color='orange'/> 
    </linearGradient>
    
    <!-- 45deg -->
    <linearGradient id='svgGradientBlack' gradientTransform='rotate(45)'> 
      <stop offset='0%' stop-color='black'/>
      <stop offset='100%' stop-color='grey'/> 
    </linearGradient>
    
    <!-- -45deg -->
    <linearGradient id='svgGradientWhite' gradientTransform='rotate(-45)'> 
      <stop offset='0%' stop-color='#fff'/>
      <stop offset='100%' stop-color='#ccc'/> 
    </linearGradient>
  </defs> 
</svg>

Memakai definisi gradient pada selector class agar bisa dipanggil berulang.
<style>
.svgGradientHijau path {
  fill: url(#svgGradientGreen);
}
.svgGradientMerah path {
  fill: url(#svgGradientRed);
}
.svgGradientUngu path {
  fill: url(#svgGradientPurple);
}
.svgGradientOren path {
  fill: url(#svgGradientOrange);
}
.svgGradientHitam path {
  fill: url(#svgGradientBlack);
}
.svgGradientPutih path {
  fill: url(#svgGradientWhite);
}
</style>

Memanggil definisi dan CSS Gradient SVG yang sudah dibuat
<!-- Blogger Color -->
<svg viewBox='0 0 24 24'>
  <path fill='#ff5722' d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>

<!-- Gradient Icon Teal Cyan (To Right) -->
<svg class='svgGradientHijau' viewBox='0 0 24 24'>
  <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>

<!-- Gradient Icon Red Pink (To Left) -->
<svg class='svgGradientMerah' viewBox='0 0 24 24'>
  <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>

<!-- Gradient Icon Purple Ocean (To Top) -->
<svg class='svgGradientUngu' viewBox='0 0 24 24'>
  <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>

<!-- Gradient Icon Orange Yellow (To Bottom) -->
<svg class='svgGradientOren' viewBox='0 0 24 24'>
  <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>

<!-- Gradient Icon Black Grey (45deg) -->
<svg class='svgGradientHitam' viewBox='0 0 24 24'>
  <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>

<!-- Gradient Icon #fff #ccc (-45deg) -->
<svg class='svgGradientPutih' viewBox='0 0 24 24'>
  <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>
DEMO Ikon SVG Gradient
Artikel ini sangatlah singkat dan sederhana, untuk lebih lengkap, jelas, dan akurat, baca:
  1. https://www.w3schools.com/graphics/svg_grad_linear.asp
  2. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
Lanjut ke Gradient Animation SVG.
  1. Hendry Adriansyah

    2/7/19

    mending ini atau favicon?

    • Dian Sandi Utama

      2/7/19

      Yang saya tau, Favicon itu ibarat emblem dari sebuah web blog. Favicon bisa dilihat pada address bar suatu laman web.

      Pada artikel ini, saya membahas tentang SVG Icon dalam HTML. Jadi saya rasa, artikel ini tidak ada kerkaitan sedikitpun dengan Favicon.