Cara Memasang Gambar Format SVG di Blogspot dan WordPress

Format SVG - Apa kelebihan format foto SVG ini, sehingga banyak sekali orang-orang maupun web perusahaan menggunakan gambar yang berformat SVG.

Menggunakan logo SVG di blog adalah langkah yang tepat kamu terapkan, sebab logo SVG ini lebih baik kerjanya untuk kecepatan loading blog ketimbang menggunakan icon logo FontAwesome.

Tentang Gambar Format SVG

SVG atau kepanjangannya adalah " Scalable Vector Graphics " ini adalah format foto yang sempat terabaikan.

Dalam sejarahnya format foto jenis SVG ini sempat tidak digunakan untuk pemakaian website, Bukan tentang masalah format fotonya yang menjadi masalah, hanya saja format SVG ini dulunya di tahun 1999 kurang mendukung untuk semua jenis browser yang ada di internet.

Tetapi pada akhirnya format SVG ini, sudah mulai mendukung untuk semua jenis browser desktop maupun mobile (saat ini).

Lewat tulisan SVG " Scalabe Vektor Graphic " kita sudah bisa menilai bahwa foto atau gambar SVG ini adalah jenis vektor. Gambar vektor ini pun dikenal dengan kelebihannya yang hebat dari pada jenis foto biasa.

Kelebihan Foto Format SVG

Gambar yang berjenis vektor atau dalam format SVG tidak akan pecah saat kita perbesar tampilannya. Inilah yang menjadi daya tarik saat ini untuk format SVG karena menjaga kualitas resolusi gambar.

Sebagai contoh bahan, kita bisa lihat logo gambar yang digunakan Helpscout yang berformat SVG. Untuk melihat tampilan gambarnya silahkan klik link dibawah ini.
Lihat contoh format foto SVG. Sampai disini saya rasa kamu semua sudah paham masalah tentang format foto SVG.

Penjelasan langkah berikutnya adalah menggunakan foto format SVG ini kedalam blog, sudah kita ketahui jika ingin mengupload foto format SVG di blogger dan Wordpress tidak di dukung.

Lalu bagaimana cara mengatasinya agar foto yang berformat SVG bisa kita gunakan di blogger dan Wordpress?

Dalam halaman ini, kami sudah merangkum beberapa trik agar blog kamu bisa menggunakan format foto SVG dengan mudah. Dan berikut ini caranya.

Membuat Foto Format SVG

Pertama kamu harus memiliki foto yang sudah berformat JPG / PNG.

Langkah berikutnya menggubah format foto yang sebelumnya JPG/PNG ke format SVG dengan bantuan tool secara online yang bisa kamu gunakan dengan gratis. Catatan — Gunakan tool yang kami rekomendasikan hanya di PNG to SVG. Selanjutnya tinggal kamu upload foto yang ingin kamu ubah formatnya ke SVG.

Images by rianseo.com

Untuk pengaturanya usahakan jangan diubah seperti colors dan simplify agar hasil fotonya tidak berantakan dalam format SVG.

Tinggal kamu klik tulisan " Generate " maka hasil fotonya akan terlihat di samping.

Lalu tinggal kamu klik Download SVG untuk menggunduhnya.

Sampai disini tahap pengubahan foto berformat SVG sudah selesai kamu lakukan. Langkah berikutnya adalah memasang foto yang berformat SVG ke dalam blog.

Memasang Gambar Format SVG di Blogspot

Karena untuk hosting penyimpanan di blogspot tidak mendukung format foto SVG, maka kita akan menggunakan hosting penyimpanan foto yang versi gratis dari Cloudinary.

Pertama silahkan daftar dulu akunnya disini jika kamu belum memiliki akun di Cloudinary.

Apabila tahap pendaftaran akun sudah selesai, langkah berikutnya adalah mengupload foto format SVG ke hosting Cloudinary.

Buka Dashbor > Media Libary > Upload

Selesai mengupload gambar/foto di cloudinary, silahkan kamu salin alamat url foto format SVG tadi dengan cara mengklik icon link seperti contoh gambar dibawah ini.

Tahap berikutnya adalah memasang gambar SVG yang ingin kamu tampilkan di blogspot.

Buka Blogger > Dashbor > Tata Letak > Logo Catatan — Karena saya ingin memasang gambar SVG dibagian kepala blog sebagai logo, maka saya pilih tata letak Header > Url Images. Nah untuk posisi foto lainnya yang ingin kamu tampilkan silahkan kreasi sendiri.

Menggunakan Icon SVG di Blog

Untuk yang ingin memasang icon atau logo SVG dalam template, kamu bisa dapatkan beberapa format icon SVG lewat halaman disini

Klik </> lalu pilih view SVG

Cara memasangnya, kamu hanya perlu mengklik icon SVG yang kamu inginkan dan menyalin kode yang berformat seperti contoh dibawah ini.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
</svg>

NOTE : pacth fill=#000000 adalah kode warna, width:24px adalah lebar icon SVG, dan height:24px adalah tinggi icon SVG

Simpan kode icon SVG dalam edit HTML, Sedikit penjelasan jika kamu memasang kode SVG ini disuatu tempat yang kamu inginkan, misalnya di bagian icon search yang ingin kamu ganti dengan kode SVG ini.

Contohnya seperti kode dibawah ini.

<div class='search-icon'>
  <a href='#searchfs'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg></a>
 </div>
<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form' method='get'>
    <input name='q' placeholder='type to search' type='search' value=''/>
 <input name='max-results' type='hidden' value='7'/>
  </form>
</div>

Agar ukuran icon SVG ini sesuai dengan keinginan, maka kita harus mengaturnya menggunakan CSS untuk lebih mudahnya, lihat contoh kode CSS dibawah ini.

.search-icon svg {
      width: 26px;
      height: 26px;
}

Untuk menggubah bagian warna icon SVG, kita bisa gunakan lagi kode CSS seperti contoh dibawah ini.

.search-icon svg path {
      fill: black;
}

Bagaimana? cukup mudah bukan menggunakan icon SVG ini di blogspot.

Update 27/05/2019

Memasang ikon SVG hanya menggunakan CSS

width: 22px;
    height: 22px;
    vertical-align: -6px;
    display: inline-block;
    margin-right: 5px;
    transition: all 0.3s ease;
    background: url(data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' fill='%23757575'></path></svg>) no-repeat;
    content: '';

Keterangan :

• Kode yang kami berikan tanda merah, adalah kode icon SVG. Ubah sesuai kode SVG kamu.
• fill='%23757575 adalah kode warna icon, ubah dengan kode warna yang bertanda merah saja. Jangan dihapus %23 saat memasukan kode warna.

Memasang icon bisa menggunakan CSS selektor bagian :before / :after.

Contohnya = .menu:before {kode CSS diatas tadi}

Untuk pengguna Wordpress silahkan baca triknya dibawah ini.

Mengupload Gambar SVG di Blog WordPress

Cara ini hanya bisa kamu lakukan untuk pengguna wordpress, jika blog kamu adalah Wordpress bisa ikuti langkah singkat dibawah ini.

Buka file function.php thema yang kamu gunakan.

Tambahkan kode di kotak bawah ini.

function cc_mime_types ($mimes){
 
$mimes['svg'] = 'image/svg+xml';
 
return $mimes;
 
}
 
add_filter ('upload_mimes','cc_mime_types');

Sampai disini kamu sudah bisa mengupload foto format SVG di Wordpress.

Penutup

Demikian informasi yang dapat kami sampaikan tentang masalah memasang gambar SVG di blog dengan mudah yang bisa kamu lakukan, Jika ada pertanyaan maupun masukan jangan ragu untuk menulis komentar di blog ini.

Berbagi :