Cara Membuat & Menggunakan Icon SVG Untuk Ikon Blog

Cara Membuat & Menggunakan Icon SVG Untuk Ikon Blog - SVG merupakan singkatan dari Scalable Vector Graphics yang digunakan untuk mendefinisikan sebuah grafis dan gambar yang ditampilkan dalam bentuk icon

Daftar Isi

Cara Membuat & Menggunakan Icon SVG Untuk Ikon Blog - SVG merupakan singkatan dari Scalable Vector Graphics yang digunakan untuk mendefinisikan sebuah grafis dan gambar yang ditampilkan dalam bentuk icon. Jadi SVG ini sangat baik digunakan sebagai pengganti icon-icon blog atau website yang biasanya menggunakan pihak ketiga untuk menampilkan sebuah icon di blog. Salah satu layanan icon gratis yang banyak digunakan adalah dari Font Awesome, meskipun sama-sama menggunakan layanan pihak ketiga namun untuk SVG sendiri lebih ringan dan tidak mengganggu loading blog.

Berbeda dengan Font Awesome, yang dalam pengaplikasiannya harus memasang script font dari layanan ini, bahkan icon dalam bentuk Unicode yang disediakan oleh Font Awesome juga sama-sama menggunakan script, kecuali untuk kode Unicode umumnya yang bisa berdiri sendiri. Script dari Font Awesome inilah yang mengurangi loading blog, sekalipun menggunakan script manipulasi atau menguraikan kode CSS dan HTML pada font ini tetap membuat loading blog agak lambat. Atau dalam penggunaan icon dari Font Awesome ini diperkecil tetap mempengaruhi loading blog.

Berbeda dengan SVG, meski memiliki ukuran file yang kecil dan dapat diatur sesuai keinginan, tampilan dari icon SVG ini tetap baik dan tidak pecah. Untuk itu, agar tampilan dan loading blog tetap aman, alangkah baiknya untuk menggunakan icon SVG didalam blog kita masing-masing. Untuk penggunaannya, Beberapa ikon SVG sudah kami pasang pada blog ini dan sudah tidak menggunakan icon dari Font Awesome seperti sebelumnya.

Dalam penggunaannya, icon SVG tidak menggunakan dalam bentuk format gambar apapun tapi dalam bentuk format kode HTML SVG seperti berikut ini:

<svg height="34" viewBox="0 0 24 24" width="34" xmlns="http://www.w3.org/2000/svg">
<path d="M21,11C21,16.55 17.16,21.74 12,23C6.84,21.74 3,16.55 3,11V5L12,1L21,5V11M12,21C15.75,20 19,15.54 19,11.22V6.3L12,3.18L5,6.3V11.22C5,15.54 8.25,20 12,21M14.8,11V9.5C14.8,8.1 13.4,7 12,7C10.6,7 9.2,8.1 9.2,9.5V11C8.6,11 8,11.6 8,12.2V15.7C8,16.4 8.6,17 9.2,17H14.7C15.4,17 16,16.4 16,15.8V12.3C16,11.6 15.4,11 14.8,11M13.5,11H10.5V9.5C10.5,8.7 11.2,8.2 12,8.2C12.8,8.2 13.5,8.7 13.5,9.5V11Z" fill="#ff0000"/>
</svg>

Jadi dengan menggunakan kode seperti diatas, maka penggunaan icon SVG ini sangat meringankan loading blog.

Penggunaan icon SVG pada blog ini sendiri juga tidak terlepas dari perubahan template yang digunakan pada blog ini. Untuk pertama kalinya, blog ini mengganti template blog dengan template update terbaru dari Kompi Flexible v8. Untuk lengkapnya bisa dibaca di

Cara Membuat & Menggunakan Icon SVG Untuk Ikon Blog

Untuk membuat icon SVG tentunya kami tidak bisa, bahkan sebelum membuat artikel ini kami mencari tutorial cara membuat icon SVG, ternyata sangat sulit. Nah daripada mempersulit diri lebih baik menggunakan layanannya saja yang sudah menyediakan berbagai icon SVG siap pakai. Untuk menggunakan icon SVG untuk icon blog, silahkan akses dulu layanannya di https://materialdesignicons.com. Material Design Icons ini menyediakan ratusan ikon blog dan website termasuk ikon-ikon sosial media yang sangat lengkap.

Untuk menggunakan icon SVG ini, silahkan buka dulu link Material Design Icons diatas, lalu klik salah satu icon yang ingin Anda gunakan. Setelah icon di klik akan muncul tampilan seperti berikut ini:

Klik kode </>

Pilih View SVG

Salin kode SVG HTML. Pilih yang bagian kolom SVG File seperti berikut:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
<path fill="#000000" d="M9,7H13A2,2 0 0,1 15,9V15A2,2 0 0,1 13,17H9V7M11,9V15H13V9H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
</svg>

Dan jadikan seperti ini:

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M9,7H13A2,2 0 0,1 15,9V15A2,2 0 0,1 13,17H9V7M11,9V15H13V9H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" fill="#000000"/>
</svg>

Untuk mengganti ukuran icon SVG, ganti ukuran pada kode height:24px width:24px; sesuai keinginan Anda. Dan untuk mengganti warna dari icon SVG, ganti kode warna pada fill="#ff0000".

Selain menggunakan kode CSS Inline diatas, besar kecil dan warna icon SVG juga bisa menggunakan kode CSS. Untuk mengganti besar kecil icon gunakan kode CSS seperti berikut ini:

.element svg {
   width:24px;
   height:24px;
}

Untuk mengganti warna icon SVG gunakan CSS berikut:

.element svg path {
   fill: white;
}

Itu saja dulu cara menggunakan cion SVG sebagai ikon blog. Selamat berkreasi :)