Cara Pasang Ikon SVG Pada Blog

Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan XML sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh World Wide Web Consortium sejak tahun 1999.

Kelebihan menggunakan ikon SVG

Ikon Responsif
Pernah melihat ketika kita mengubah ukuran browser dan elemen dalam website yang sedang kita buka juga ikut berubah ukuran dan susunannya? ini dilakukan supaya pengunjung tetap memiliki visibilitas konten yang baik, istilahnya adalah elemen web responsif.

Secara umum, elemen web responsif dicapai dengan menyiapkan beberapa gambar di server dalam ukuran yang berbeda. Atau cara lain adalah dengan menggunakan font yang memang isinya simbol, misalnya fontAwesome. Namun seperti yang sudah kita bahas pada paragraf diatas, menggunakan ikon dalam format SVG dapat secara otomatis menyesuaikan diri agar sesuai dengan ukuran jendela browser Anda. Dengan format SVG, ikon pada website selalu terlihat tajam dan lebih hemat tempat pada server.

Kekurangan menggunakan ikon SVG

Ada kelebihan, pasti ada kekurangan. Format file SVG mungkin tidak dapat ditampilkan pada browser minoritas. Biasanya untuk menghindari ruang kosong karena masalah ini, kita perlu menyiapkan file tambahan dalam bentuk JPEG atau PNG sebagai penggantinya.

Cara Pemasangan Ikon SVG Pada Blog

1. Pertama kunjungi website Material Design Icons.

2. Pilih salah satu, lalu klik icon </>, pilih "View SVG". Kemudian kode untuk menampilkan iconnya muncul.

3. Setelah kodenya didapatkan pasang kode HTML seperti contoh ini.

<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>

- width:24px;height:24px; Lebar dan Tinggi icon.
- #000000 Warna icon.

4. Penempatan icon SVG

Penempatan icon SVG ini harus benar-benar menempatkannya contoh ingin menempatkan icon SVG di dekat teks profil <div id="profil"><svg ...><path .../></svg></div>.

Untuk menyesuaikan ikon nya tinggal atur saja Lebar dan Tinggi nya.