Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Gambar Format SVG di Blogspot dan WordPress

Cara Mengunakan Gambar Format SVG di Blogspot

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.

Cara Memasang Gambar Logo SVG di Blogspot
Images by rianseo.com

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

Cara Memasang Gambar Logo SVG di Blogspot

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

Cara Memasang Gambar Logo SVG di Blogspot

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.

Cara Memasang Gambar Logo SVG di Blogspot

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 Memasang Gambar Logo SVG di Blogspot

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.

10 komentar untuk "Cara Memasang Gambar Format SVG di Blogspot dan WordPress"

  1. terima kasih gan, mampir ke www.masdejay.com

    BalasHapus
  2. Bagus sie tp ribet banget, bagusan mana dengan format webp dr segi kecepatan loadnya

    BalasHapus
    Balasan
    1. Menurut saya sih bagusa SVG, ringan tambah fotonya jernih gk blur

      Hapus
  3. Dapat ilmu baru nih, makasih banyak ya

    BalasHapus
  4. Terima kasih, Mbak.
    Sudah saya aplikasikan ke blog saya (AisyCatering.com), dan berhasil.
    Tadinya logo headernya kalo dibuka via Smartphone jadinya blur, karena masih pake PNG.
    Sekarang sudah nggak blur.

    Tapi aku mau tanya satu hal.
    Itu harus pake Cloudinary, ya?
    Kalo pake Google Drive, bisa nggak, ya?

    BalasHapus
    Balasan
    1. Sepertinya bisa saja, kalau di simpan di Google Drive.

      Yang kita butuhkan cuma URL foto nya saja kan.

      Hapus

Kami memiliki kebijakan dalam berkomentar di Blog ini :

— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan

NB :Komentar yang melanggar tidak akan ditampilkan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini