Cara Pasang Gambar SVG ke Blogger

Kali ini kita akan belajar cara pasang gambar SVG ke dalam artikel di Blogger. Meskipun pada tutorial ini contoh pengaplikasian pada platform Blogger, secara teori bisa dimasukkan ke dalam platform lain seperti Wordpress, Joomla, dan lain sebagainya.

Sebelum masuk pada cara memasukkan gambar SVG ke dalam artikel blog, terlebih dahulu kita harus tahu apa itu SVG? Secara garis besar, SVG adalah sebuah format gambar berbasis vektor dengan format XML yang disajikan dalam tampilan 2 dimensi.

SVG yang merupakan singkatan dari Scalable Vector Graphics memiliki banyak keunggulan jika dibandingkan dengan format gambar vektor lainnya. Adapun untuk kelebihan gambar SVG antara lain :

• Fleksibel
  Gambar SVG sangat mudah dipasang ke dalam artikel karena bisa dengan melakukan copy-paste biasa.


• Ringan
  Gambar SVG sangat ringan saat di-load oleh web browser. Hal ini memungkinkan kecepatan loading situs web menjadi jauh lebih cepat.


• Kecil
  Meskipun SVG adalah gambar vektor, ukurannya sangat kecil sehingga menghemat memory dan space hosting.

Meskipun gambar SVG tampak lebih superior jika dibandingkan format gambar lainnya, gambar SVG masih punya kekurangan. Kelemahan gambar SVG adalah tidak bisa diaplikasikan warna gradasi (gradient color). Jadi kamu hanya bisa memakai warna-warna solid saja.

Update: ternyata sekarang sudah bisa memakai warna gradasi dengan cara menambahkan fungsi lineargradient

Untuk contoh penggunaan gambar SVG bisa kamu lihat pada blog Oom ini. Semua gambar icon yang ada di blog ini memakai gambar SVG. Saya menghindari penggunaan icon dari Font Awesome untuk mengoptimalkan kecepatan loading blog.

Cara Pasang Gambar SVG dalam Artikel

Jika kamu sudah paham tentang apa itu gambar SVG serta kekurangan dan kelebihannya, sekarang kita coba untuk memasukkan gambar SVG ke dalam artikel.

Untuk langkah awal tentu kamu harus menyiapkan gambar SVG yang akan dimasukkan. Kamu bisa mendapatkan gambar icon SVG dari aneka situs web di internet. Sebagai contoh kita akan memasukkan gambar ikon berlian berikut ini :

Gambar di atas adalah gambar SVG, tak tampak perbedaan jika dibandingkan gambar biasa, bukan? Inilah kode gambar SVG dari icon berlian di atas :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M464 0H112c-4 0-7.8 2-10 5.4L2 152.6c-2.9 4.4-2.6 10.2.7 14.2l276 340.8c4.8 5.9 13.8 5.9 18.6 0l276-340.8c3.3-4.1 3.6-9.8.7-14.2L474.1 5.4C471.8 2 468.1 0 464 0zm-19.3 48l63.3 96h-68.4l-51.7-96h56.8zm-202.1 0h90.7l51.7 96H191l51.6-96zm-111.3 0h56.8l-51.7 96H68l63.3-96zm-43 144h51.4L208 352 88.3 192zm102.9 0h193.6L288 435.3 191.2 192zM368 352l68.2-160h51.4L368 352z"/>
</svg>

Cara pasangnya, copy kode di atas lalu paste ke dalam artikel melalui mode HTML. Jadinya akan seperti ini :

Lho, kok ukurannya besar sekali? Iya, karena dalam kode di atas belum diberikan ukuran width dan height. Jadi ukurannya akan mengikuti lebar maksimal elemen div pada halaman posting. Untuk mengecilkan ukurannya, kita tambahkan atribut width dan height  pada tag kode pertama (dalam elemen <svg>). Contoh :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">

menjadi

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="128" height="128">

Nah, ukurannya menjadi lebih kecil seperti di bawah ini :

Sudah lebih kecil, bukan? Kamu bisa mengubah ukuran gambar dengan menyesuaikan nilai pada atribut width (lebar) dan height (tinggi) seperti yang dicontohkan.

Lalu bagaimana cara memberikan warna pada gambar icon SVG? Caranya cukup mudah yakni dengan menambahkan atribut fill ke dalam tag <path>.

Warna yang diterapkan harus dalam format hexadecimal ya. Contoh saya akan mewarnai icon berlian di atas menjadi berwarna biru dengan kode hex #49ace1 maka saya tambahkan kode SVG di atas menjadi:

<svg viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" width="128" height="128">
<path d="M464 0H112c-4 0-7.8 2-10 5.4L2 152.6c-2.9 4.4-2.6 10.2.7 14.2l276 340.8c4.8 5.9 13.8 5.9 18.6 0l276-340.8c3.3-4.1 3.6-9.8.7-14.2L474.1 5.4C471.8 2 468.1 0 464 0zm-19.3 48l63.3 96h-68.4l-51.7-96h56.8zm-202.1 0h90.7l51.7 96H191l51.6-96zm-111.3 0h56.8l-51.7 96H68l63.3-96zm-43 144h51.4L208 352 88.3 192zm102.9 0h193.6L288 435.3 191.2 192zM368 352l68.2-160h51.4L368 352z" fill="#49ace1"></path>
</svg>

Maka jadinya nanti akan seperti ini :

Jika kamu lebih menyukai memakai gradasi warna, maka kamu perlu menambahkan kode-kode berikut ini:

<svg viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" width="128" height="128" >
<defs><lineargradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#ff00cc"></stop>
<stop offset="100%" stop-color="#333399"></stop>
</lineargradient></defs>
<g><path fill="url('#logo-gradient')" d="M464 0H112c-4 0-7.8 2-10 5.4L2 152.6c-2.9 4.4-2.6 10.2.7 14.2l276 340.8c4.8 5.9 13.8 5.9 18.6 0l276-340.8c3.3-4.1 3.6-9.8.7-14.2L474.1 5.4C471.8 2 468.1 0 464 0zm-19.3 48l63.3 96h-68.4l-51.7-96h56.8zm-202.1 0h90.7l51.7 96H191l51.6-96zm-111.3 0h56.8l-51.7 96H68l63.3-96zm-43 144h51.4L208 352 88.3 192zm102.9 0h193.6L288 435.3 191.2 192zM368 352l68.2-160h51.4L368 352z"></path></g>
</svg>

Ubah warna-warna gradasi pada bagian yang saya tandai, maka jadinya nanti akan seperti ini:

Bagaimana? Cukup mudah atau malah tambah pusing? Hehehe 😂 Jika kamu masih merasa kesulitan, silahkan tinggalkan komentar yaa...

Tips:
Buat kamu yang bingung dimana mencari icon-icon SVG seperti ini, kamu bisa mencarinya di salah satu situs berikut:
SVG Icons
Bootstrap Icons
iconmonstr
Material Design Icons
Iconify