Ditulis oleh: Ditulis pada: 11/09/2016
SVG atau Scalable Vector Graphics adalah bahasa markup untuk menggambarkan aplikasi dua dimensi grafis dan gambar yang merupakan rekomendasi W3C dan didukung oleh semua browser modern untuk desktop dan ponsel.SVG memiliki ukuran file yang kecil dan terkompres dengan baik dan tetap tampil baik pada layar retina serta aman untuk di-zoom. Untuk itu, kenapa tidak kita manfaatkan SVG ini untuk kita gunakan pada ikon-ikon di blog. Dengan begitu blog kita akan lebih ringan karena tidak perlu memanggil css style library seperti halnya icon font.
Sebagai contoh, semua ikon pada blog https://kompiflexibleamp.blogspot.com menggunakan ikon SVG.
Lalu bagaimana cara menggunakan ikon SVG pada blog?
Untuk menggunakan ikon SVG pada ikon-ikon di blog, silahkan lakukan seperti di bawah ini.
Kita dapat secara mudah mendapatkan ikon-ikon SVG berbasis material design ikon untuk web di https://materialdesignicons.com. Terdapat ratusan ikon termasuk ikon-ikon sosial media untuk keperluan ikon di blog.
Kemudian silahkan klik pada ikon yang Anda pilih. Pilih toggle kode </> lalu pilih view SVG maka akan tampil kotak dengan kode seperti di bawah ini sebagai contoh.
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
Nah silahkan simpan kode SVG di atas di edit HTML. Misalkan kita akan menggunakan ikon "account" pada link profil kita seperti di bawah ini
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>
</span>
Maka akan tampak seperti di bawah ini
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>
Nah, agar gambar SVG ini lebih baik lagi keberadaannya di blog, maka kita pindahkan inline style-nya
style="width:24px;height:24px" ke style CSS blog menjadi seperti ini
.post-author svg {
width:24px;
height:24px;
}
Dengan kode CSS di atas juga kita bisa dengan mudah mengatur besar kecilnya ukuran ikonnya.
Dan jika kita ingin mengganti warna pada ikon-nya, kita gunakan css berikut.
.post-author svg path {
fill: white;
}
Dan jika ingin menggunakan SVG langsung pada CSS (misalkan sebagai background-image) lakukan seperti di bawah ini (menggunakan base64).
.post-author {
background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-repeat:no-repeat;
background-size:24px 24px;
background-position:top left;
background-color:transparent;
}
Jika ingin menggunakan ikon lain, tinggal ganti
viewBox='0 0 24 24' (jika berbeda) dan ganti juga d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z' dan warna ikon pada style='fill:white'Bagaimana, mudah bukan? Selamat mencoba....