Beranda › Blogger

Cara Memasang Icon SVG di Blogger

Tagarku
Cara Memasang Icon SVG di Blogger

Icon SVG adalah ikon berbasis Scalable Vector Graphics. Bedanya dengan JPG atau PNG, SVG berbentuk kode atau vektor, jadi lebih fleksibel untuk diatur.

Di Blogger, icon SVG bisa dipasang di menu, tombol, widget HTML, footer, atau bagian tertentu di template. Kamu bisa menempelkannya langsung di HTML, mengatur tampilannya lewat CSS, atau menjadikannya background lewat CSS.

Daftar Isi

Cara mendapatkan icon SVG

Kamu bisa mengambil kode icon SVG dari website penyedia icon, misalnya Material Design Icons.

Caranya seperti ini:

  1. Buka website:
    https://pictogrammers.com/library/mdi/
  2. Pilih icon yang ingin kamu pakai, lalu klik icon tersebut dan pilih View SVG.
  3. Salin kode SVG yang muncul. Kode ini nanti bisa kamu pasang di Blogger, baik lewat widget HTML/JavaScript, menu, tombol, footer, atau edit HTML template.

Cara pasang icon SVG

Ada beberapa cara memasang icon SVG di Blogger. Pilih cara yang paling sesuai dengan kebutuhan kamu.

1. Pasang SVG langsung di HTML

Cara paling mudah adalah menempelkan kode SVG langsung ke bagian HTML yang ingin diberi icon.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M..."></path>
</svg>

Kalau icon yang kamu pakai berbentuk outline atau garis, biasanya kodenya memakai stroke, seperti ini:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path stroke="#000000" stroke-width="2" fill="none" d="M..."></path>
</svg>

Supaya tidak bingung, ini fungsi bagian pentingnya:

  • width dan height untuk mengatur ukuran icon.
  • fill untuk warna icon solid.
  • stroke untuk warna icon outline atau garis.
  • viewBox adalah area koordinat SVG, jadi jangan dihapus.
  • d="..." adalah bentuk atau path icon.
d="M..." hanya contoh. Ganti bagian itu dengan kode path SVG asli dari icon yang kamu ambil.

Intinya, icon solid biasanya diatur dengan fill, sedangkan icon outline biasanya diatur dengan stroke.

Kode SVG ini bisa kamu letakkan di bagian Blogger yang mendukung HTML, misalnya widget HTML/JavaScript, menu, tombol, footer, atau langsung di edit HTML template.

2. Pasang SVG di HTML lalu atur lewat CSS

Cara ini lebih rapi karena ukuran dan warna icon diatur lewat CSS. Jadi, HTML-nya tidak terlalu penuh dengan style.

<svg class="icon-svg" viewBox="0 0 24 24">
    <path d="M..."></path>
</svg>
.icon-svg {
  width: 24px;
  height: 24px;
}
.icon-svg path {
  fill: #000000;
}

Kalau icon yang dipakai berbasis stroke, gunakan CSS seperti ini:

.icon-svg path {
  stroke: #000000;
  stroke-width: 2;
  fill: none;
}

Sesuaikan dengan jenis icon-nya. Kalau icon memakai fill, atur warnanya dengan fill. Kalau icon memakai stroke, atur warnanya dengan stroke.

Hindari memakai CSS global seperti ini:

svg {}
svg path {}

Kode seperti itu bisa memengaruhi semua SVG di blog. Lebih aman gunakan class khusus seperti .icon-svg.

3. Pasang SVG sebagai CSS background/data URI

SVG juga bisa dipasang lewat CSS sebagai background-image, termasuk lewat pseudo-element seperti ::before dan ::after.

Cara ini cocok kalau kamu ingin menambahkan icon kecil di menu, tombol, atau elemen tertentu di template Blogger.

<span class="main-menu">Home</span>
.main-menu::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M...'/%3E%3C/svg%3E");
  background-color: #008c5f;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

Di sini, d='M...' masih contoh. Ganti dengan path SVG asli dari icon yang kamu pakai.

background-color hanya memberi warna latar elemen, bukan warna SVG. Warna SVG tetap diatur dari bagian fill atau stroke di dalam kode SVG.

SVG juga bisa dijadikan background langsung pada elemen.

<div class="icon-background"></div>
.icon-background {
  width: 40px;
  height: 40px;
  background-color: #008c5f;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M...'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

Kalau SVG dipakai di CSS, beberapa karakter perlu diubah ke format URL encoded.

Contohnya:

  • < menjadi %3C
  • > menjadi %3E
  • # menjadi %23

Jadi, warna seperti ini:

[KODE]

perlu ditulis menjadi:

[KODE]

Karakter seperti <, >, dan terutama # perlu di-encode agar SVG bisa terbaca dengan benar saat dipasang lewat CSS.

Posting Komentar