Cara kustom ikon SVG

Penjelasan & pengertian tentang, apa itu SVG?

SVG merupakan singkatan dari Scalable Vector Graphics.
SVG menjelaskan sebuah bentuk grafik dengan basis vektor untuk Web yang mudah diskalakan.
SVG juga menjelaskan bentuk grafik dalam format XML. Sehingga SVG tergolong grafik XML murni.
Oleh karena itu grafik dengan format SVG tidak menghambat pemuatan halaman.
Selain itu, setiap elemen dan atribut dalam file SVG dapat dikustomisasi.

Kelebihan SVG

Berikut ini kelebihan penggunaan grafik / ikon SVG dibandingkan dengan format gambar lain (seperti JPEG dan GIF):

Gambar / ikon SVG dapat dibuat dan diedit dengan text editor apa saja.
Gambar / ikon SVG dapat dicari, diindeks, ditulis, dan dikompresi
Gambar / ikon SVG dapat diskalakan dengan mudah
Gambar / ikon SVG dapat dicetak dengan kualitas tinggi pada resolusi apa pun
Grafik SVG TIDAK kehilangan kualitas walaupun diperbesar atau diubah ukurannya
File SVG merupakan XML murni

Tag SVG

Untuk mengkustom grafik atau ikon svg, perhatikan terlebih dahulu struktur tag-nya. Apabila terdapat properti / atribut CSS didalam tag tersebut maka akan menjadi kendala untuk mengkustomnya menggunakan CSS. Dibawah ini struktur tag basic dari ikon SVG.

Struktur tag SVG

<svg viewBox=''>
<path='' d=''/>
</svg>

Apabila struktur tag SVG tidak terdapat atribut CSS seperti diatas maka bisa langsung dikustom melalui CSS.
Adanya properti & atribut CSS dalam tag SVG tergantung dari penyedia / host SVG tersebut.

Jika didalam tag SVG terdapat atribut CSS, hapus dan gantikan melalui pengaturan CSS.
Dibawah ini contoh SVG dengan atribut CSS didalamnya.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
</svg>

Atribut yang perlu dihapus didalam tag diatas adalah :

width:24px, mengatur dimensi panjang ikon.
height:24px, mengatur dimensi tinggi ikon.
& fill:currentColor, mengatur warna ikon.

CSS ikon SVG

Properti pada ikon SVG yang paling umum dikustom adalah : width; height; background dan color.
Dibawah ini demo cara kustom ikon SVG menggunakan CSS.

Mengatur dimensi ikon SVG

svg {
    width: 40px;
    height: 40px;
    }

Mengatur warna ikon SVG

svg {
    width: 40px;
    height: 40px;
    fill: blue;
    }

Mengatur latar belakang ikon SVG

svg {
    width: 40px;
    height: 40px;
    fill: blue;
    background: lightblue
    }

Catatan : Mengatur warna menggunakan nama warna, lihat di halaman Nama warna dalam HTML

Mengatur padding ikon SVG

svg {
    width: 40px;
    height: 40px;
    fill: blue;
    background: lightblue;
    padding: 10px
    }

Catatan : penggunaan padding pada ikon SVG menyusutkan dimensinya sehingga mengecil.
ubah value dari atribut width dan height untuk menyesuaikan dimensinya kembali.

Mengatur margin ikon SVG

svg {
    width: 60px;
    height: 60px;
    fill: blue;
    background: lightblue;
    padding: 10px;
    margin: 20px
    }

Catatan : Dimensi ikon diatas diubah menjadi 60px x 60px

Mengatur border ikon SVG

svg {
    width: 60px;
    height: 60px;
    fill: blue;
    background: lightblue;
    padding: 10px;
    margin: 20px
    border: 1px solid #ccc
    border-radius: 50%
    }

Praktik kustom ikon SVG

Coba edit / kustom ikon sesuai keinginan.
Klik tombol CSS untuk mengkustom kode CSS ikon.

See the Pen Kustom Ikon SVG by Handy Eko Cahyono (@handyeko) on CodePen.

⇐ Sebelumnya

Selanjutnya ⇒

Coding Blogger