Cara Upload Gambar SVG Didalam Postingan Blog

Cara Upload / Memunculkan gambar Vektor di blog

Assalamu’alaikum warahmatullahi wabarakatuh.

Pada umumnya meletakan gambar didalam postingan blog merupakan hal yang lumayan penting menurut admin sendiri,hal tersebut membuat blog kalian lebih hidup dan terkesan menarik.

Kalian bisa meletakan gambar PNG,JPG dan bahkan gambar bergerak yaitu gif.

Namun tahukah kalian,Mengupload gambar di blogger mempunyai batasan tersendiri salah satunya ialah Kita tidak bisa upload gambar vektor atau format SVG kedalam postingan blog.

Jika dilihat dari segi keuntungan,Menggantikan gambar Bitmap (jpg,Gif,PNG) Dengan gambar vektor (SVG) ,membuat loading blog kalian lebih cepat, mengapa demikian?.karena ukuran SVG relatif lebih kecil ketimbang bitmap,Kode kode pada SVG lebih cepat terbaca oleh browser daripada harus memuat gambar Bitmap.

Kelebihan :

Bersifat sclable artinya jika kita memperbesar gambar maka gambar tersebut tidak akan pecah.
Ukuran file relatif lebih kecil ketimbang bitmap.
Membuat loading Blog lebih cepat.

Nah,Postingan kali ini Admin akan memberikan tutorial bagaimana cara meletakan gambar SVG ke dalam blog.

Siapkan dulu gambar SVG yang akan diletakkan kedalam blog.

Ada 2 Toturial berbeda untuk meletakan gambar SVG di blog,Kalian pilih salah satu nya saja yang paling mudah menurut kalian.(Admin sarankan pake cara 1 )

Cara 1

1.Buat Link menuju gambar terlebih dahulu

Upload gambar SVG ke Google Drive Kalian.
Setelah selesai di upload 1.klik file >> 2.klik gambar link >> 3.Aktifkan berbagi link : Aktif >> 4.Salin Url
Maka Url akan seperti ini hasilnya https://drive.google.com/open?id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32
Salin id file yang berwarna “merah”.
Lalu salin code ini https://drive.google.com/uc?export=view&id=
Letakan id file tadi dibelakang view&id contoh seperti ini https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32
Link gambar sudah jadi.

2.Selanjutnya meletakan gambar SVG tersebut ke dalam postingan blog

Salin tag img ini untuk memanggil gambar <img alt=”Logo CariPengetahuan-id” src=”#”/>
Ganti tanda “#” dengan url gambar yang sudah kalian buat
Contoh <img alt=”Logo CariPengetahuan-id” src=”https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32″/>
Nah letakan codenya di dalam postingan (Pilih mode HTML jangan di letakan di compose)

Note : Untuk mengubah ukuran lebar gambar gunakan width=”” ,untuk mengubah tinggi gambar height=””

Contoh :

Taadaaaaaaa dan inilah hasilnya

gambar koala
Zoom sepuas kalian,gambar tidak akan pecah.

Cara 2

1.Pertama ubah dulu SVG ke format HTML

Untuk meletakan gambar SVG ke dalam blog .kalian ubah dulu SVG ke html melalui url ini https://anyconv.com/svg-to-html-converter/
Upload gambar yang ingin dijadikan html “Choose File”
Jika sudah,tunggu beberapa saat nanti akan muncul file gambar yang sudah terconvert ke html.”DOWNLOAD HTML”

2.Meletakan Code gambar SVG tersebut kedalam postingan blog

Admin anggap kalian sudah mengubah gambar SVG tadi ke html,langkah selanjutnya cari dan buka html yang sudah didownload tadi,lalu salin code html nya.disarankan rename dulu html ke txt agar yang terbuka adalah kode bukan gambar.
Admin anggap Kalian sudah mencopy.lalu tempel code tadi di postingan pada mode HTML jangan di mode compose
Untuk mengubah ukuran yang kalian mau cari code width=” (untuk mengubah lebar gambar) dan code height=” (untuk mengubah tinggi gambar. Contoh width=”50 berarti dengan lebar 50 pixel.
Selesaiiiii

Yups itu tadi 2 cara meletakan Gambar vektor ke dalam blog yang sangat mudah dilakukan jika diikuti step demi step.

Jika soal SEO Admin kurang tau apakah itu berpengaruh pada SEO atau tidak? Kemungkinan gambar vektor tidak terindex oleh mesin pencari.mungkin juga iya.