4 Alasan Kenapa Blog atau Website Anda Harus Beralih Menggunakan SVG

4 Alasan Kenapa Blog atau Website Anda Harus Beralih Menggunakan SVG

Alasan Blog atau Website Anda Harus Beralih Menggunakan SVG
AdityaTekno.com - Kali ini saya akan membahas tentang Alasan Kenapa Blog atau Website Anda harus Beralih Menggunakan Gambar / Icon SVG. Pasti dari anda ada yang sudah tahu bahkan baru tahu sekarang ini soal SVG. Sebelum lanjut membahas tentang SVG, saya akan sedikit membahas tentang Font Awesome.

Nah, kalo Font Awesome pasti sudah tidak asing lagi untuk anda kan? Dan penggunaan Font Awesome pada blog sudah menjadi hal yang lumrah terjadi. Karena Font Awesome adalah font khusus yang berfungsi sebagai icon. Jadi, anda tidak perlu repot-repot menggunakan gambar yang berekstensi .JPG / .PNG / .GIF jika ingin memasang icon di blog / website.

Baca Juga : Cara Mempercepat Blog dengan Expires Headers

Cara menggunakannya juga mudah sekali, cukup sisipkan Font Awesome didalam blog / website. Tapi dibalik kemudahannya tentu ada kelebihan dan kurangannya.

Kelebihan dan Kekurangan Font Awesome

Berikut adalah kelebihan dan kekurangan dari Font Awesome.

Kelebihan

Meringankan pekerjaan anda, jadi tidak perlu repot-repot membuat icon satu-persatu dengan gambar. Selain itu, jenis iconnya juga banyak. Jadi jangan khawatir kalau icon yang dibutuhkan tidak ada, karena iconnya sudah tersedia banyak sekali. Dan satu lagi, penggunaan icon juga bisa mempercantik layout blog.

Kekurangan

Dengan kelebihan yang diberikan, ternyata Font Awesome juga bisa memperlambat loading blog. Karena untuk menggunakan Font Awesome ini harus memanggil script terlebih dahulu. Pemanggilan script eksternal menjadi salah satu poin penting untuk dipertimbangkan.

Khususnya bagi anda pengguna Blogger yang tidak bisa mengatur cache dan expired header. Meski tidak begitu memperlambat loading blog secara signifikan, tapi tetap saja akan menurunkan score ketika di cek page speed di Google PageSpeed Insight maupun GTmetrix dan lain-lain.

Jadi, kalau anda tidak pintar mengakalinya, page speed blog akan menjadi lambat.

Setelah sedikit membahas tentang Font Awesome, sekarang saya akan masuk ke topik pembahasannya. Silahkan disimak dengan baik.

Apa itu SVG?

SVG atau Scalable Vector Graphics adalah format gambar yang menggunakan XML sebagai dasar untuk membentuk gambar vektor dua dimensi. Gambar ini dapat terdiri dari jalur, gambar, dan / atau teks yang dapat ditingkatkan dan diubah ukurannya tanpa kehilangan kualitas gambar.

Rekomendasi Scalable Vector Graphics (SVG) berasal dari W3C. Rekomendasi tersebut menjelaskan cara membuat grafik vektor menggunakan bahasa mark up. Karena SVG didasarkan pada XML, alat yang sudah tahu bagaimana menafsirkan XML akan dapat menafsirkan SVG. Dan juga memiliki standar yang mapan sebagai fondasi menghemat banyak pekerjaan dalam mendefinisikan bahasa.

Ada banyak alat di sekitarnya yang dapat memeriksa struktur dokumen SVG atau membacanya untuk menarik informasi yang menarik. SVG dibangun di atas XML yang membuatnya jadi lebih mudah untuk menghasilkan SVG secara terprogram dari sumber data XML lainnya menggunakan XSL dan XSLT.

Dokumen SVG tidak lebih dari file teks biasa yang menjelaskan garis, kurva, bentuk, warna, dan teks. Karena dapat dibaca oleh manusia, mudah dipahami dan dimodifikasi, kode SVG dapat dimanipulasi melalui CSS atau JavaScript. Ini memberi SVG fleksibilitas dan keserbagunaan yang tidak pernah bisa ditandingi oleh PNG, GIF atau JPG tradisional.

Lalu apa sebenarnya alasan kenapa Blog atau Website harus beralih menggunakan gambar / icon svg? Silahkan di simak penjelasan dibawah ini.

Alasan Kenapa Blog atau Website Anda Harus Menggunakan Gambar / Icon SVG

Berikut adalah alasan kenapa blog atau website anda harus segera beralih menggunakan SVG.

1. Skalabilitas & Responsive

Dengan SVG, Anda dapat menggabungkan berbagai bentuk, jalur, dan elemen teks untuk membuat semua jenis visual dan memastikan bahwa mereka akan terlihat jelas dan jernih pada ukuran berapa pun.

Sebaliknya, format berbasis raster seperti GIF, JPG, dan PNG memiliki dimensi yang tetap, yang menyebabkannya menjadi pixelate ketika mereka diskalakan. Meskipun berbagai teknik gambar responsif telah terbukti berharga untuk grafis piksel, mereka tidak akan pernah bisa benar-benar bersaing dengan kemampuan SVG untuk skala secara tak terbatas.

2. Programabilitas & Interaktivitas

SVG sepenuhnya dapat diedit dan lewat skrip juga bisa diedit. Mengedit SVG semudah mengubah koordinat atau kata dalam editor teks atau meng-kode SVG ke halaman web anda dan mengubahnya dengan JavaScript atau CSS. Anda juga dapat menggunakan perangkat lunak pengeditan grafik vektor seperti Adobe Illustrator, Corel Draw, dan Sketch.

Misalnya, katakanlah anda memiliki logo sederhana dengan hanya satu warna (putih) dan anda ingin membuat iklan banner anda diunggah. Tetapi karena iklan banner sepenuhnya dirancang dengan warna putih, anda perlu mengubah warna logo.

Jika anda menggunakan file SVG, akan lebih mudah bagi anda untuk mengubah warna di aplikasi apa pun.

3. Aksesibilitas & SEO Friendly

SVG hadir dengan sedikit bonus untuk perancang mesin pencari yang cerdas juga. Karena SVG menggunakan teks aktual dalam format, mesin pencari dapat membaca gambar dengan lebih baik.

Ya, anda dapat menambahkan informasi alternatif dengan gambar lain, tetapi ada begitu banyak ruang untuk kata kunci. Dengan SVG anda dapat membuat lebih banyak gambar yang ramah pencarian. Google mengindeks semua konten SVG, termasuk file mandiri dan ketika SVG tertanam langsung dalam HTML.

4. Performa & Ukuran File

Salah satu aspek terpenting yang memengaruhi kinerja blog / website adalah ukuran file yang digunakan pada halaman web. Dan yang paling disukai pengiklan dan desainer adalah ukuran file visual mereka setelah mereka merancang dan menyimpannya.

Baca Juga : Cara Mempercepat Loading Blog dengan Memasang DNS Prefetch

Karena menggunakan gambar SVG dan bukan gambar JPG atau PNG akan membantu anda mengurangi ukuran file hingga 200% dengan tetap mempertahankan kualitas maksimum pada tampilan apa pun atau dimensi apa pun untuk spanduk anda.

Demikian artikel tentang 4 Alasan Blog atau Website Anda Harus Menggunakan Gambar / Icon SVG. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com

sumber : 
https://www.igniel.com/2017/09/cara-pasang-icon-svg.html
https://whello.id/tips-digital-marketing/4-alasan-harus-menggunakan-gambar-svg/

Anda mungkin menyukai postingan ini